ViewPager之引导页

一、概述

ViewPager是android-support-v4中提供的类，它是一个容器类，常用于页面之间的切换。

本文介绍ViewPager最基础的应用：在多个View之间进行切换，亦即ViewPager的每个页面是个View。

这种模式适合每个页面的逻辑较为简单的情况，比如去实现“小红书”引导页这样的效果：

二、实现思路

2.1 页面如何布局

这个引导页一共有三个页面，毫无疑问上面的标题和配图是隶属于viewpager不同页面内部的，而下面的俩按钮则是直接放在Activity的布局中。

那indicator呢？虽然在不同的页面红点的位置不一样，但它不能放在页面的布局中，否则，三个点就会跟配图一样整体滑动了……

2.2 代码如何实现

ViewPager是什么鬼呢？其实它就是个ViewGroup，用法跟ListView类似，重点在于实现这样一个Adapter：

     private class ViewPagerAdapter extends PagerAdapter {
         @Override
         public int getCount() {
             return 0; //ViewPager总共有几个页面
         }

         @Override
         public boolean isViewFromObject(View view, Object object) {
             return false; //判断一个页面(View)是否与instantiateItem方法返回的Object一致
         }

         @Override
         public Object instantiateItem(ViewGroup container, int position) {
             return super.instantiateItem(container, position); //创建一个页面
         }

         @Override
         public void destroyItem(ViewGroup container, int position, Object object) {
             super.destroyItem(container, position, object); //销毁一个页面
         }
     }

[转载请保留本文地址：http://www.cnblogs.com/snser/p/5700751.html]

三、开始干活

3.1 摆出activity和每个页面的布局

viewpager_view.xml (activity的布局)：

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:background="@drawable/viewpager_view_bg"
     tools:context="${relativePackage}.${activityClass}" >

     <android.support.v4.view.ViewPager
         android:id="@+id/viewpager_view_pager"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:background="@drawable/viewpager_view_bg" />

     <ImageView
         android:id="@+id/viewpager_view_point"
         android:layout_width="66.7dp"
         android:layout_height="10dp"
         android:layout_centerHorizontal="true"
         android:layout_above="@+id/viewpager_view_register"
         android:layout_marginBottom="20dp"
         android:src="@drawable/viewpager_view_point_1" />

     <Button
         android:id="@+id/viewpager_view_register"
         android:layout_width="190dp"
         android:layout_height="45dp"
         android:layout_centerHorizontal="true"
         android:layout_above="@+id/viewpager_view_login"
         android:layout_marginBottom="10dp"
         android:background="@drawable/viewpager_view_register_bg"
         android:textSize="19sp"
         android:textColor="#FFFFFF"
         android:text="@string/viewpager_view_register" />

     <Button
         android:id="@+id/viewpager_view_login"
         android:layout_width="190dp"
         android:layout_height="45dp"
         android:layout_alignParentBottom="true"
         android:layout_centerHorizontal="true"
         android:layout_marginBottom="50dp"
         android:background="@drawable/viewpager_view_login_bg"
         android:textSize="19sp"
         android:textColor="#999999"
         android:text="@string/viewpager_view_login" />

 </RelativeLayout>

viewpager_view_page.xml (页面的布局)：

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     tools:context="${relativePackage}.${activityClass}" >

     <TextView
         android:id="@+id/viewpager_view_page_title"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_marginTop="30dp"
         android:layout_centerHorizontal="true"
         android:textSize="20sp"
         android:textColor="#333333"
         android:text="@string/viewpager_view_page_title_1" />

     <ImageView
         android:id="@+id/viewpager_view_page_content"
         android:visibility="visible"
         android:layout_width="match_parent"
         android:layout_height="385dp"
         android:layout_marginTop="75dp"
         android:layout_gravity="center_horizontal"
         android:scaleType="centerInside"
         android:src="@drawable/viewpager_view_page_content_1" />

 </RelativeLayout>

3.2 简要介绍一下即将出炉的核心代码

 public class ViewPagerViewActivity extends Activity implements View.OnClickListener {

     private ViewPager mPager;
     private ImageView mImgPoint;

     private SparseArray<View> mPageCache = new SparseArray<View>();

     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.viewpager_view);
         initView();
     }

     private void initView() {
         mPager = (ViewPager)findViewById(R.id.viewpager_view_pager);
         mImgPoint = (ImageView)findViewById(R.id.viewpager_view_point);
         mPager.setAdapter(new ViewPagerAdapter(ViewPagerViewActivity.this));
         mPager.addOnPageChangeListener(new OnViewPageChangeListener());
         findViewById(R.id.viewpager_view_register).setOnClickListener(this);
         findViewById(R.id.viewpager_view_login).setOnClickListener(this);
     }

     private class ViewPagerAdapter extends PagerAdapter {
         private final int mCount = 3;
         private LayoutInflater mInflater;

         private ViewPagerAdapter(Context context) {
             mInflater = LayoutInflater.from(context);
         }

         @Override
         public int getCount() {
             return mCount;
         }

         @Override
         public boolean isViewFromObject(View view, Object obj) {
             return view == obj;
         }

         @Override
         public Object instantiateItem(ViewGroup container, int position) {
             View page = mPageCache.get(position);
             if (page == null) {
                 page = mInflater.inflate(R.layout.viewpager_view_page, container, false);
                 TextView txtTitle = (TextView)page.findViewById(R.id.viewpager_view_page_title);
                 ImageView imgContent = (ImageView)page.findViewById(R.id.viewpager_view_page_content);
                 switch (position) {
                     case 0:
                         txtTitle.setText(R.string.viewpager_view_page_title_1);
                         imgContent.setImageResource(R.drawable.viewpager_view_page_content_1);
                         break;
                     case 1:
                         txtTitle.setText(R.string.viewpager_view_page_title_2);
                         imgContent.setImageResource(R.drawable.viewpager_view_page_content_2);
                         break;
                     case 2:
                         txtTitle.setText(R.string.viewpager_view_page_title_3);
                         imgContent.setImageResource(R.drawable.viewpager_view_page_content_3);
                         break;
                     default:
                         break;
                 }
                 mPageCache.append(position, page);
             }
             container.addView(page);
             return page;
         }

         @Override
         public void destroyItem(ViewGroup container, int position, Object object) {
             container.removeView((View)object);
         }
     }

     private class OnViewPageChangeListener implements OnPageChangeListener {
         @Override
         public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
         }

         @Override
         public void onPageSelected(int position) {
             switch (position) {
                 case 0:
                     mImgPoint.setImageResource(R.drawable.viewpager_view_point_1);
                     break;
                 case 1:
                     mImgPoint.setImageResource(R.drawable.viewpager_view_point_2);
                     break;
                 case 2:
                     mImgPoint.setImageResource(R.drawable.viewpager_view_point_3);
                     break;
                 default:
                     break;
             }
         }

         @Override
         public void onPageScrollStateChanged(int state) {
         }
     }

     @Override
     public void onClick(View v) {
         finish();
     }
 }

重点关注下 ViewPagerAdapter ：

在 instantiateItem 方法中会inflate出新的页面，再根据不同的position对页面进行对应的初始化工作，同时在ViewPager中添加当前页面。

而在 destroyItem 方法中，只需要将当前页面从ViewPager中移除即可。

同时，需要给ViewPager设置一个 OnPageChangeListener ，以便在页面切换的时候更新Indicator对应的小红点位置。

3.3 关于缓存

可以看到，上面的代码在 instantiateItem 方法中用到了页面缓存，亦即每个position对应的页面只需要inflate一次。

那为什么会有缓存的需求呢？这是因为ViewPager每次加载当前页面的同时，会自动预加载(instantiateItem)与当前页面左右相隔的两个页面，同时会销毁(destroyItem)与当前页面不相邻的页面。

设想一下，滑动到第三个页面时，第一个页面会被销毁掉，而滑回第二个页面时，又会重新创建第一个页面。如果不加以缓存，就会造成页面的重复inflate从而浪费资源、降低性能。

[转载请保留本文地址：http://www.cnblogs.com/snser/p/5700751.html]

四、demo工程

保存下面的图片，扩展名改成 .zip 即可

 [转载请保留本文地址：http://www.cnblogs.com/snser/p/5700751.html]