Android学习之——ViewPager及应用引导页的开发

背景知识

     当我们第一次安装Android应用时，有的应用会有引导页，要么是用于介绍应用的新功能，要么就是关于应用的介绍，有的甚至是推广广告等。

    

       

   

    

     那么这个应用引导页是怎样实现的呢？这就得有请我们今天的主角登场了——ViewPager。

 

---

ViewPager介绍

   

 

    ViewPager继承自ViewGroup类，属于android.support.v4.view包（这个包是Google提供给我们开发兼容低版本Android的包，主要功能是提供各种各样的类来向后处理View的兼容性）。

  ViewPager，允许用户左右滑动来查看View。和ListView一样，不能直接将View对象呈现在ViewPager上。需实现PagerAdapter来将View适配成Page以显示到ViewPager上。ViewPager经常和Fragment同时使用，这是一种使用Page和管理Page生命周期很方便的方式。

---

 

如何使用ViewPager

  1.在布局文件中添加ViewPager(注意要写android.support.v4.view.ViewPager)

 <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >
    </android.support.v4.view.ViewPager>

  2.加载要显示的Page

private List<View> views;

LayoutInflater inflater = LayoutInflater.from(this);
view1 = inflater.inflate(R.layout.one, null);
view2 = inflater.inflate(R.layout.two, null);
view3 = inflater.inflate(R.layout.three, null);
views = new ArrayList<View>();
views.add(view1);
views.add(view2);
views.add(view3);

 3.实例化ViewPager并设置它的Adapter。

 方法1：直接在Activity中重写PagerAdapter

    PagerAdapter pagerAdapter = new PagerAdapter() {  
      
                @Override  
                public boolean isViewFromObject(View arg0, Object arg1) {  
      
                    return arg0 == arg1;  
                }  
      
                @Override  
                public int getCount() {  
      
                    return views.size();  
                }  
      
                @Override  
                public void destroyItem(ViewGroup container, int position,  
                        Object object) {  
                    container.removeView(views.get(position));  
      
                }  
      
                @Override  
                public int getItemPosition(Object object) {  
      
                    return super.getItemPosition(object);  
                }  
      
                @Override  
                public CharSequence getPageTitle(int position) {  
      
                    return titleList.get(position);  
                }  
      
                @Override  
                public Object instantiateItem(ViewGroup container, int position) {  
                    container.addView(views.get(position));  
                    return viewList.get(position);  
                }  
      
            };  
            viewPager.setAdapter(pagerAdapter);  

方法2.创建自己的PagerAdapter类继承自PagerAdapter类。

public class ViewPagerAdapter extends PagerAdapter {

    private List<View> views;
    private Context context;
   
    /**
     * 构造方法
     * @param views  
     * @param context
     */
    public ViewPagerAdapter(List<View> views, Context context) {

        this.views = views;
        this.context = context;
    }
    /**
     * 销毁View
     */
    @Override
    public void destroyItem(View container, int position, Object object) {

        ((ViewPager) container).removeView(views.get(position));
    }
    /**
     * 实例化View
     */
    @Override
    public Object instantiateItem(View container, int position) {

        ((ViewPager) container).addView(views.get(position));

        return views.get(position);

    }
   
    @Override
    public int getCount() {
        return views.size();
    }
   
    @Override
    public boolean isViewFromObject(View arg0, Object arg1) {
        return (arg0 == arg1);
    }

}

实现一个PagerAdapter，要实现以下几种方法：

instantiateItem(ViewGroup, int)         //实例化
destroyItem(ViewGroup, int, Object)   //销毁
getCount()                                     //获取总数 
isViewFromObject(View, Object)         //用于确认instantiateItem是否返回了和关键对象有关的Page视图

 效果展示：

             

 

---

 

使用ViewPager开发应用引导页

 学会了使用ViewPager之后，开发应用引导页就没有什么难点了。关键就是：用户只有在第一次安装应用进入应用后才会有引导页，之后打开就直接进入主界面了。

所以这里要有一个判断：用户是不是第一次进入应用。将这个值存储在手机中，在这里使用SharedPreferences存储。

  

         //用SharedPreferences来存储用户是否是安装后第一次使用的值
        SharedPreferences perPreferences = getSharedPreferences("JohnTsai", MODE_PRIVATE);
        isFirstUse = perPreferences.getBoolean("isFirstUse", true);
        if (!isFirstUse) {
            //进入主界面
                       ...
        }else{
            //反之则跳转到引导界面
            ...
            Editor editor = perPreferences.edit();
            editor.putBoolean("isFirstUse", false);
            editor.commit();
        }

 

   注意到每个引导页页面下方都有1个小黑点，用于指示当前所在页。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="#00000000" >
    </android.support.v4.view.ViewPager>

    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:gravity="center_horizontal"
        android:orientation="horizontal" >
  
        <!-- 图片下方的点 -->
        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/point_selected" />

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/point_unselected" />

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/point_unselected" />
    </LinearLayout>

</RelativeLayout>

    那怎样实现滑动，图片下方的点也随着改变呢？这就要实现OnPageChangeListener接口了，重写它的方法。

   

      //引导界面下面的小点，用于显示当前View是第几个
    private ImageView[] dots;
    private int[] ids = { R.id.imageView1, R.id.imageView2,R.id.imageView3 };
        dots = new ImageView[views.size()];
        for (int i = 0; i < views.size(); i++) {
            dots[i] = (ImageView) findViewById(ids[i]);
        }
            @Override
    public void onPageScrollStateChanged(int arg0) {

    }

    @Override
    public void onPageScrolled(int arg0, float arg1, int arg2) {

    }

    @Override
    public void onPageSelected(int arg0) {
        for (int i = 0; i < ids.length; i++) {
            //若当前的界面是用户选中的界面，则点设置为选中状态，反之，则为没选中状态
            if (arg0 == i) {
                dots[i].setImageResource(R.drawable.point_selected);
            } else {
                dots[i].setImageResource(R.drawable.point_unselected);
            }
        }
    }

 效果展示：

       

要实现应用引导页面，现在只需再创建两个Activity：一个是欢迎界面（WelcomeActivity）另一个则是应用主界面 (MainActivity)   

     WelcomeActivity代码：

public class WelcomeActivity extends Activity {
    
    //判断用户是否是第一次使用该应用
    private boolean isFirstUse = false;
   //延时时间，用于由欢迎界面进入另外的页面的延时效果
    private static final int TIME = 2*1000;
    private static final int TO_MAIN = 100001;
    private static final int TO_GUIDE = 100002;
    
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.welcome);
        init();
    }
    //由于不能在主线程中直接延时，所以用一个Handler来处理发送过来的消息
    Handler myHandler = new Handler(){
        public void handleMessage(android.os.Message msg) {
            switch (msg.what) {
            case TO_MAIN:
                Intent i1 = new Intent(WelcomeActivity.this,MainActivity.class);
                startActivity(i1);
                finish();
                break;
            case TO_GUIDE:
                Intent i2 = new Intent(WelcomeActivity.this,GuideActivity.class);
                startActivity(i2);
                finish();
                break;
            }
        };
    };


    private void init() {
        //将用户是否是第一次使用的值用SharedPreferences存储到本地
        SharedPreferences perPreferences = getSharedPreferences("JohnTsai", MODE_PRIVATE);
        isFirstUse = perPreferences.getBoolean("isFirstUse", true);
        if (!isFirstUse) {
            myHandler.sendEmptyMessageDelayed(TO_MAIN, TIME);
        }else{
            myHandler.sendEmptyMessageDelayed(TO_GUIDE, TIME);
            Editor editor = perPreferences.edit();
            editor.putBoolean("isFirstUse", false);
            editor.commit();
        }
        
    }

      MainActivity代码很简单，只需要改写下它所对应的布局文件就好了。

      应用引导界面Demo展示：