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]