Android之ViewPager显示应用新特性

来源：互联网发布：windows nt 4.9 编辑：程序博客网时间：2024/06/05 20:13

我们都知道，很多应用在安装后第一次使用都会有一个新特性显示，一个好的新特性显示，将给客户带来更好的体验，因此，当我们做一个应用的时候，不能忽视这个问题，不得不佩服微信在这方面做得很不错。今天我就来模仿微信新特性的显示，做一个小应用。

源码下载地址：http://download.csdn.net/detail/weidi1989/4562605

废话不多说，先上效果图：

最后一张，增加了一个开门的动画效果：

下面是主要的类结构：

LoginActivity代码：

[java] view plain copy
package com.way.viewpager;  
  
import java.util.ArrayList;  
import java.util.List;  
import java.util.Timer;  
import java.util.TimerTask;  
  
import android.app.Activity;  
import android.content.Context;  
import android.os.Bundle;  
import android.os.Handler;  
import android.os.Message;  
import android.support.v4.view.ViewPager;  
import android.support.v4.view.ViewPager.OnPageChangeListener;  
import android.view.LayoutInflater;  
import android.view.View;  
import android.view.View.OnClickListener;  
import android.view.animation.Animation;  
import android.view.animation.AnimationUtils;  
import android.view.animation.Animation.AnimationListener;  
import android.view.Window;  
import android.widget.ImageView;  
  
/** 
 *  
 * @author way 
 *  
 */  
public class LoginActivity extends Activity {  
    private static final int ISNEW = 0x001;// 是否为  
    private static final int COMPLETE = 0x002;// 新特性显示完毕  
    private Context mContext = this;  
    private DotMarks mDotMarks;  
    private ImageView ivLeftImage,ivRightImage;  
    private Handler handler = new Handler() {  
        public void handleMessage(android.os.Message msg) {  
            switch (msg.what) {  
            case ISNEW:  
                // if (WhatIsNewUtils.isFirstUse(LoginActivity.this))  
                // {//如果是第一次使用该应用  
                init();  
                // 保存标记，下一次打开程序WhatIsNewUtils.isFirstUse(LoginActivity.this)返回的是false  
                WhatIsNewUtils.saveFirstUseFlag(LoginActivity.this);  
                // }else{  
                // setContentView(R.layout.activity_main);  
                // }  
  
                break;  
            case COMPLETE:  
                View mainView = LayoutInflater.from(mContext).inflate(R.layout.activity_main, null);  
                setContentView(mainView);  
                Animation enterAnim = AnimationUtils.loadAnimation(mContext, R.anim.main_activity_enter_anim);  
                enterAnim.setFillAfter(true);  
                mainView.startAnimation(enterAnim);  
                break;  
            default:  
                break;  
            }  
        }  
    };  
  
    @Override  
    public void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        requestWindowFeature(Window.FEATURE_NO_TITLE);  
        setContentView(R.layout.login);  
        new Timer().schedule(new TimerTask() {  
  
            @Override  
            public void run() {  
                Message msg = Message.obtain();  
                msg.what = ISNEW;  
                handler.sendMessage(msg);  
            }  
        }, 2000);  
    }  
  
    /** 
     * 初始化新特性界面 
     */  
    private void init() {  
        LayoutInflater layoutInflater = LayoutInflater.from(mContext);  
        View what_is_new = layoutInflater.inflate(R.layout.what_is_new, null);  
  
        View pageOne = layoutInflater.inflate(R.layout.layout1, null);  
        View pageTwo = layoutInflater.inflate(R.layout.layout2, null);  
        View pageThree = layoutInflater.inflate(R.layout.layout3, null);  
        ivLeftImage = (ImageView)pageThree.findViewById(R.id.iv_left_image01);  
        ivRightImage = (ImageView)pageThree.findViewById(R.id.iv_left_image02);  
          
        ViewPager viewPager = (ViewPager) what_is_new  
                .findViewById(R.id.view_pager);  
        List<View> viewItems = new ArrayList<View>();  
        viewItems.add(pageOne);  
        viewItems.add(pageTwo);  
        viewItems.add(pageThree);  
        viewPager.setAdapter(new WhatIsNewAdapter(viewItems));  
        mDotMarks = (DotMarks) what_is_new.findViewById(R.id.dot_marks);  
        /** 
         * 翻页监听事件，用于更新索引小图片 
         */  
        viewPager.setOnPageChangeListener(new OnPageChangeListener() {  
            /** 
             * 根据ViewPager的页面的变化来实时更新索引小图标 
             * */  
            public void onPageSelected(int arg0) {  
                mDotMarks.updateMark(arg0);// 更新  
            }  
  
            public void onPageScrolled(int arg0, float arg1, int arg2) {  
                // TODO Auto-generated method stub  
            }  
  
            public void onPageScrollStateChanged(int arg0) {  
                // TODO Auto-generated method stub  
            }  
        });  
        /** 
         * 最后一个View添加点击事件，用于切换视图 
         */  
        pageThree.setOnClickListener(new OnClickListener() {  
  
            public void onClick(View v) {  
                mDotMarks.setVisibility(View.INVISIBLE);    startAnimation();//开始动画  
            }  
        });  
        this.setContentView(what_is_new);  
    }  
    /** 
     * 动画 
     */  
    private void startAnimation(){  
        Animation leftAnim = AnimationUtils.loadAnimation(mContext, R.anim.slide_left_anim);  
        Animation rightAnim = AnimationUtils.loadAnimation(mContext, R.anim.slide_right_anim);  
//      final Animation fadeAnim = AnimationUtils.loadAnimation(mContext, R.anim.fade_anim);  
        leftAnim.setFillAfter(true);  
        rightAnim.setFillAfter(true);  
        rightAnim.setAnimationListener(new AnimationListener() {  
              
            public void onAnimationStart(Animation animation) {  
//                  mDotMarks.startAnimation(fadeAnim);  
            }  
              
            public void onAnimationRepeat(Animation animation) {  
                  
            }  
              
            public void onAnimationEnd(Animation animation) {//动画结束  
                Message msg = handler.obtainMessage();  
                msg.what = COMPLETE;  
                handler.sendMessage(msg);  
            }  
        });  
        ivLeftImage.startAnimation(leftAnim);  
        ivRightImage.startAnimation(rightAnim);  
    }  
}  

自定义DotMarks，就是下面三个小圆点，模拟翻页效果：

[java] view plain copy
package com.way.viewpager;  
  
import android.content.Context;  
import android.graphics.drawable.Drawable;  
import android.util.AttributeSet;  
import android.view.LayoutInflater;  
import android.view.View;  
import android.widget.ImageView;  
import android.widget.LinearLayout;  
/** 
 *  
 * @author way 
 * 
 */  
public class DotMarks extends LinearLayout {  
    private ImageView mark_one, mark_two, mark_three;//三个小点图片  
    private Drawable guide_focus = getResources().getDrawable(  
            R.drawable.guide_focus);//焦点图片资源  
    private Drawable guide_default = getResources().getDrawable(  
            R.drawable.guide_default);//非焦点图片资源  
  
    public DotMarks(Context context) {  
        super(context);  
        init(context);  
    }  
  
    public DotMarks(Context context, AttributeSet attrs) {  
        super(context, attrs);  
        init(context);  
    }  
    /** 
     * 初始化 
     * @param context 
     * 上下文对象 
     */  
    private void init(Context context) {  
        LayoutInflater layoutInflater = LayoutInflater.from(context);  
        View dotmarks = layoutInflater.inflate(R.layout.dot_marks, null);  
        this.addView(dotmarks);  
        mark_one = (ImageView) dotmarks.findViewById(R.id.dot_mark1);  
        mark_two = (ImageView) dotmarks.findViewById(R.id.dot_mark2);  
        mark_three = (ImageView) dotmarks.findViewById(R.id.dot_mark3);  
          
        //设置一个默认值  
        mark_one.setImageResource(R.drawable.guide_focus);  
        mark_two.setImageResource(R.drawable.guide_default);  
        mark_three.setImageResource(R.drawable.guide_default);  
    }  
  
    /** 
     *  
     * 根据传递进来的页面的索引切换小图标的显示 
     *  
     * */  
    public void updateMark(int index) {  
        switch (index) {  
        case 0:  
            mark_one.setImageDrawable(guide_focus);  
            mark_two.setImageDrawable(guide_default);  
            mark_three.setImageDrawable(guide_default);  
            break;  
        case 1:  
            mark_one.setImageDrawable(guide_default);  
            mark_two.setImageDrawable(guide_focus);  
            mark_three.setImageDrawable(guide_default);  
            break;  
        case 2:  
            mark_one.setImageDrawable(guide_default);  
            mark_two.setImageDrawable(guide_default);  
            mark_three.setImageDrawable(guide_focus);  
            break;  
  
        default:  
            break;  
        }  
    }  
  
}  

新特性适配器WhatIsNewAdapter：

[java] view plain copy
package com.way.viewpager;  
  
import java.util.List;  
  
import android.os.Parcelable;  
import android.support.v4.view.PagerAdapter;  
import android.support.v4.view.ViewPager;  
import android.view.View;  
/** 
 *  
 * @author way 
 * 
 */  
public class WhatIsNewAdapter extends PagerAdapter {  
    public List<View> mListViews;  
  
    public WhatIsNewAdapter(List<View> mListViews) {  
        this.mListViews = mListViews;  
    }  
  
    @Override  
    public void destroyItem(View arg0, int arg1, Object arg2) {  
        ((ViewPager) arg0).removeView(mListViews.get(arg1));  
    }  
  
    @Override  
    public void finishUpdate(View arg0) {  
    }  
  
    @Override  
    public int getCount() {  
        return mListViews.size();  
    }  
  
    @Override  
    public Object instantiateItem(View arg0, int arg1) {  
        ((ViewPager) arg0).addView(mListViews.get(arg1), 0);  
        return mListViews.get(arg1);  
    }  
  
    @Override  
    public boolean isViewFromObject(View arg0, Object arg1) {  
        return arg0 == (arg1);  
    }  
  
    @Override  
    public void restoreState(Parcelable arg0, ClassLoader arg1) {  
    }  
  
    @Override  
    public Parcelable saveState() {  
        return null;  
    }  
  
    @Override  
    public void startUpdate(View arg0) {  
    }  
  
}  

工具类WhatIsNewUtils，用来判断用户是否第一次使用该app：

[java] view plain copy
package com.way.viewpager;  
  
import android.app.Activity;  
import android.content.Context;  
import android.content.SharedPreferences;  
  
/** 
 *  
 * @author way 
 * */  
public class WhatIsNewUtils   
{  
  
    private static String WHAT_IS_NEW_PRE_NAME = "what_is_new_pre_name";  
      
    private static String FIRST_USE_FLAG = "first_use_flag";  
     /** 
      *  
      * 判断是否是第一次使用该应用程序 
      *  
      * */  
    public static boolean isFirstUse(Context context)  
    {  
        SharedPreferences sharedPreferences = context.getSharedPreferences(WHAT_IS_NEW_PRE_NAME, Activity.MODE_PRIVATE);  
        boolean flag = sharedPreferences.getBoolean(FIRST_USE_FLAG, true);  
        return flag;  
    }  
      
    /** 
     *  
     *保存第一次使用的信息 
     *  
     * */  
    public static void saveFirstUseFlag(Context context)  
    {  
        SharedPreferences sharedPreferences = context.getSharedPreferences(WHAT_IS_NEW_PRE_NAME, Activity.MODE_PRIVATE);  
        SharedPreferences.Editor editor = sharedPreferences.edit();  
        editor.putBoolean(FIRST_USE_FLAG, false);  
        editor.commit();  
    }  
      
}  

新特性的主布局文件what_is_new.xml：

[html] view plain copy
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:tools="http://schemas.android.com/tools"  
    android:layout_width="fill_parent"  
    android:layout_height="fill_parent" >  
  
    <android.support.v4.view.ViewPager  
        android:id="@+id/view_pager"  
        android:layout_width="fill_parent"  
        android:layout_height="fill_parent" />  
  
    <com.way.viewpager.DotMarks  
        android:id="@+id/dot_marks"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_alignParentBottom="true"  
        android:layout_centerHorizontal="true"  
        android:paddingBottom="50dp" />  
  
</RelativeLayout>  

三个小圆点的布局文件dot_marks.xml：

[html] view plain copy
<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:orientation="horizontal" >  
  
  
    <ImageView  
        android:id="@+id/dot_mark1"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:src="@drawable/guide_default" />  
  
  
  
    <ImageView  
        android:id="@+id/dot_mark2"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:src="@drawable/guide_default" />  
  
  
    <ImageView  
        android:id="@+id/dot_mark3"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:src="@drawable/guide_default" />  
  
</LinearLayout>  

还有其他一些动画效果跟布局的文件，我就不贴出来了。

0 0