ViewPager使用详解1

一、简介

1.特点：可以左右滑动的控件，需要PagerAdapter配合使用，由v4包提供
类全名： android.support.v4.view.ViewPager

2.作用：ViewPager作用主要是能使界面左右滑动。比如最常用的使用是做一个引导界面；多张图片的预览或自动变换的图片展示（如淘宝首页面上的广告）；viewpager还可以结合fragment作为主界面框架（如微信主界面）。。。

3.viewpager中的几个重要的方法
1）setAdapter()设置ViewPager的适配器。
2）setOnPageChangeListener()设置页面改变事件监听器
3）setCurrentItem(int position) 显示第几页
4）setCurrentItem(int position,boolean smoothScroll) 显示第几页，是否执行滚动动画
5）setOffscreenPageLimit(int limit) 设置脱离屏幕的页面限制－－最多同时加载的页面数，limit默认是1
-这个方法解释一下：默认情况下，viewpager在显示页面时，会加载当前显示页和它左右的页面，这也是为什么移动页面时可以显示下一页面一部分。如果想设置其他数，viewpager会加载对应值的页面，比如设置2，则当前显示页和它左两页和右两页都会加载。

二、相关类介绍

1.viewpager相关的几个重要的类
1.1OnPageChangeListener：
–onPageScrollStateChanged(int state) 页面滚动发生或停止时
–onPageScrolled(int position, float offset, int offsetPixes) 滚动时
–onPageSelected(int position) 页面位置确定时

1.2 PagerAdapter
–作用：主要配合ViewPager显示相关的View
–用法：
1）创建类，并继承PagerAdatper
2) 必须实现的方法
–getCount() 获取View的数量
–instantiateItem(ViewGroup, int poistion) 实例化指定位置的View对象
–destroyItem(ViewGroup, int poistion, Object) 删除指定位置的View
–isViewFromObject(View, Object) 判断当前的View是否为Object

1.3FragmentPagerAdaper
–作用：与PagerAdapter的功能相同，不过显示的View改为Fragment
–FragmentStatePagerAdapter: 如果需要处理有很多页，并且数据动态性较大、占用内存较多的情况，应该使用FragmentStatePagerAdapter 保存当前界面，以及下一个界面和上一个界面（如果有)，最多保存3个，其他会被销毁掉。
–FragmentPagerAdaper和FragmentStatePagerAdapter的区别：
FragmentPagerAdaper销毁的只是视图，数据没有销毁，FragmentStatePagerAdapter则是全部销毁。拿fragment生命周期来说，使用FragmentPagerAdaper，当滑动页面时，被销毁的fragment会执行到onDestyoyView()但没有执行onDestroy()。而使用FragmentStatePagerAdapter时，会执行onDestroy()方法。后面实例会看到。

三、使用

1.使用步骤:
1) 在布局文件中使用标签

<android.support.v4.view.ViewPager/>

2) 代码中增加显示的页面
3) 在Activity里实例化ViewPager组件，并设置它的Adapter
需要注意的是：根据不同的场景，选择不同的适配器父类，不结合fragment使用时使用继承PagerAdapter的适配器，结合Fragment使用时，根据需求，可以选择父类为FragmentPagerAdapter和FragmentStatePagerAdapter，这两个的区别在后面前面已经讲过了。

2.案例一：用viewpager做一个欢迎界面
先看效果图：

1） 布局文件

<FrameLayout 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}" >
    <!-- 其显示的页面需要通过PagerAdapter适配器增加或移除 -->
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <!-- 导航布局 ，小点点 -->
    <LinearLayout
        android:id="@+id/ll_dots"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_marginBottom="10dp"
        android:gravity="center"
        android:orientation="horizontal"
        android:padding="10dp" >
    </LinearLayout>
</FrameLayout>

2） 然后看看几个主要的方法体：
第一个是自定义的适配器，各种方法都有注释。

// 声明PageAdapter子类，用于管理viewpager中显示的控件
    class WelComePageAdapter extends PagerAdapter {
        @Override
        public int getCount() {
            // TODO 返回页面的数量
            return views.size();
        }
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            // TODO 获取指定位置的View（UI)，并增加到ViewPager中，同时作为当前页面的数据返回
            Log.i("--", "instantiateItem--" + position);
            View view = views.get(position);
            container.addView(view);
            return view;
        }
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            // TODO 当前位置与VIewPager中显示页面的位置的间隔超出一页面，需要将当前位置的页面移除
            Log.i("--", "destroyItem--" + position);
            container.removeView(views.get(position));
        }
        @Override
        public boolean isViewFromObject(View view, Object obj) {
            // TODO 判断当前显示的页面的UI和数据对象是否一致
            return view == obj;
        }
    }

第二个是viewpager滑动监听事件，这里自定义一个类看着清楚点，继承OnPageChangeListener，然后事项相应的方法，特别注意onPageScrolled和onPageSelected这两个方法，onPageScrolled在滑动时会一直回调，根据回调的三个参数，在这里可以进行相应的操作，比如微信那个，当你滑动时，相邻两个标签会有颜色的渐变，就在这里处理的。onPageSelected方法在滑动一个页面停止后回调。

class WelcomPageChangeListner implements OnPageChangeListener {

        @Override
        public void onPageScrollStateChanged(int state) {
            Log.i("--", "onPageScrollStateChanged" + state);
            // TODO 页面滚动状态发生变化事件：开始滚动、停止滚动、正在设置页面
            // ViewPager.SCROLL_STATE_DRAGGING 开始滚动
            // ViewPager.SCROLL_STATE_IDLE 停止滚动
            // ViewPager.SCROLL_STATE_SETTLING 正在设置页面，即将要停止，并且设置当前显示的页面
            // setDot(position);
            // switch (state) {
            // case ViewPager.SCROLL_STATE_DRAGGING:
            // Log.i("--", "-SCROLL_STATE_DRAGGING-");
            // break;
            // case ViewPager.SCROLL_STATE_IDLE:
            // Log.i("--", "-SCROLL_STATE_IDLE-");
            // break;
            // case ViewPager.SCROLL_STATE_SETTLING:
            // Log.i("--", "-SCROLL_STATE_SETTLING-");
            // break;
            // }
        }

        /**
         * 第一个参数：滚动页面开始的位置 <br>
         * 第二个参数：两个页面之间滚动的偏移量，范围：0-1<br>
         * 第三个页面：两个页面之间的滚动的像素偏移量<br>
         */
        @Override
        public void onPageScrolled(int position, float offset, int offsetPixwls) {
            // TODO 从当前页面位置开始滚动事件
            // Log.i("--", "-onPageScrolled-" + position + ",[" + offset + "],"
            // + "[" + offsetPixwls + "]");
        }
        @Override
        public void onPageSelected(int position) {
            // TODO 指定位置的页面被选择
            setDot(position);
        }
    }

第三个是动态改变导航栏小点点的背景图。

/**
     * 选择指定位置的导航图片为选择图片，之前选择的导航图片重置为未选择图片
     * 
     * @param position
     */
    private void setDot(int position) {
        ImageView imageView = null;
        // 遍历导航布局张所有的子控件，判断子控件的位置是否未选择位置，若是则设置为选择图片
        for (int i = 0; i < LlDot.getChildCount(); i++) {
            imageView = (ImageView) LlDot.getChildAt(i);// 获取布局中指定位置的子控件
            if (i == position) {
                imageView.setImageResource(R.drawable.page_now);
            } else {
                imageView.setImageResource(R.drawable.page);
            }
        }
    }

其他还有小点点的点击事件，具体看源代码。

3.案例二：viewpager和view结合做一个主界面
效果图：

1）布局：最上面的导航栏是一个HorizonalScrollView，里面有一个LinearLayout（因为HorizonalScrollView里只能有一个子视图），然后在LinearLayout定义你想要的导航模块，TextView即可。

<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}" >
    <HorizontalScrollView
        android:id="@+id/hScrollView"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginBottom="2dp"
        android:scrollbars="none" >
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="vertical" >
            <!-- 顶部模块的布局 -->
            <LinearLayout
                android:id="@+id/navLayout"
                android:layout_width="wrap_content"
                android:layout_height="45dp"
                android:orientation="horizontal" >
                <TextView
                    android:id="@+id/tv_model1"
                    android:layout_width="150dp"
                    android:layout_height="match_parent"
                    android:gravity="center"
                    android:text="第一"
                    android:textColor="#000"
                    android:textSize="20sp" />
                <TextView
                    android:id="@+id/tv_model2"
                    android:layout_width="150dp"
                    android:layout_height="match_parent"
                     android:gravity="center"
                    android:text="第二"
                    android:textColor="#000"
                    android:textSize="20sp" />
                <TextView
                    android:id="@+id/tv_model3"
                    android:layout_width="150dp"
                    android:layout_height="match_parent"
                    android:gravity="center"
                    android:text="第三"
                    android:textColor="#000"
                    android:textSize="20sp" />
                <TextView
                    android:id="@+id/tv_model4"
                    android:layout_width="150dp"
                    android:layout_height="match_parent"
                     android:gravity="center"
                    android:text="第四"
                    android:textColor="#000"
                    android:textSize="20sp" />
                <TextView
                    android:id="@+id/tv_model5"
                    android:layout_width="150dp"
                   android:layout_height="match_parent"
                     android:gravity="center"
                    android:text="第五"
                    android:textColor="#000"
                    android:textSize="20sp" />
            </LinearLayout>
            <!-- 指示器控件 -->
            <View
                android:id="@+id/view_nav"
                android:layout_width="150dp"
                android:layout_height="4dp"
                android:background="#0cf" />
            <!-- 基准线 -->
            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#0cf" />
        </LinearLayout>
    </HorizontalScrollView>
    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_below="@id/hScrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</RelativeLayout>

还需要几个fragment页，这里只展示一个，其他类似：

<?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:orientation="vertical" 
    android:gravity="center"
    android:background="#80f0">
    <TextView 
        android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="第一个页面"
    android:textSize="30sp"
        />
</RelativeLayout>

---

2）代码中需要做的事情有：
2).1 指示器的移动，也就是模块下那个粗线条的移动，viewpager本身就是可滑动的控件，这里需要指示器随着手指的滑动进行滑动
2).2选择导航模块的位置,将水平滚动到当前模块位置的中心点，
2).3模块点击事件,点击模块，显示相应的page
那么来一步步实现上面的工作：
2.1指示器的移动
要求是指示器随着手指的滑动，起始也就是动态的改变指示器的leftMargin

/**
     * 指示器移动
     * @param position
     * @param offset
     */
    private void navIndicateMove(int position, float offset){
        int leftMargin = (int) (indicateParams.width * (position + offset));
        indicateParams.leftMargin = leftMargin;
        navIndicate.setLayoutParams(indicateParams);
    }

2.2选择导航模块的位置,将水平滚动到当前模块位置的中心点
因为整个导航模块都在一个HorizonalScrollView中，HorizonalScrollView中有两个方法可以指定的移动位置，一个是hScrollView.scrollTo(x, y);//非平滑移动
hScrollView.smoothScrollTo(x, y);//平滑移动
所以根据选择的模块得到移动值即可。

/**
     * 选择导航模块的位置,将水平滚动到当前模块位置的中心点
     * 
     * @param position
     */
    private void selectNav(int position) {
        TextView modelTv = (TextView) navLayout.getChildAt(position);
        int left = modelTv.getLeft();// 获取当前控件的左边位置
        // 怎么放到中间?
//      int scWidth = (getResources().getDisplayMetrics().widthPixels / 2);
        int offset = left
                - (getResources().getDisplayMetrics().widthPixels / 2)
                + modelTv.getWidth() / 2;
        hScrollView.smoothScrollTo(offset, 0);// 水平滚动到指定位置

//设置被选中的模块
         for(int i = 0; i < navLayout.getChildCount(); i++){
             modelTv = (TextView) navLayout.getChildAt(i);
             if(i == position){
                 modelTv.setTextColor(Color.argb(100, 255, 0, 0));
             }else{
                 modelTv.setTextColor(Color.argb(255, 0, 0, 0));
             }
         }
    }

---

3.模块点击事件,点击模块，显示相应的page
给每个模块添加点击事件，然后点击一个模块，只用调用viewPager的
viewPager.setCurrentItem(item);//非平滑滑动
viewPager.setCurrentItem(item, smoothScroll);//平滑滑动

/**
     * 模块点击事件
     */
    private void modelTvClickEvent() {
         for(int i = 0; i < navLayout.getChildCount(); i++){
             final TextView tv = (TextView) navLayout.getChildAt(i);
             tv.setTag(i);
             tv.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    int position = (Integer)tv.getTag();
//                  selectNav(position);
//                  navIndicateMove(position, 0);
                    viewPager.setCurrentItem(position, true);
                }
            });
         }
    }

这样，viewpager结合导航栏都可以同步滑动了。

4.案例三：viewpager和fragment结合做一个主界面
效果图：

结合fragment使用和结合view使用很相似，只是继承的适配器不同。
上面继承PagerAdapter，这里继承FragmentPagerAdapter或者FragmentStatePagerAdapter。
1）定义一个ListFragment
2）自定义适配器
3）初始化数据源

ListFragment的使用前面有一篇讲过，这里就不附代码了。
来看看自定义适配器：很简单就完事

class InfoFragmentAdapter extends FragmentStatePagerAdapter{
        public InfoFragmentAdapter(FragmentManager fm){
            super(fm);
        }
        @Override
        public int getCount() {
            return fragments.size();
        }
        @Override
        public Fragment getItem(int position) {
            //返回指定位置的碎片
            return fragments.get(position);
        }
}

最后可以借这个案例看一看FragmentPagerAdapter和FragmentStatePagerAdapter区别：
ViewPager:默认创建自己和左右两页，当某个页面与显示的页面间放大点隔大于1，则销毁UI界面（注意，只是UI，里面的数据则不会销毁）
FragmentPagerAdapter：管理fragment时销毁的是UI界面，（fragment生命周期只会执行到onDestroyView）
FragmentStatePagerAdapter：管理fragment时，完全销毁（fragment生命周期会执行onDestroy）

只用把自定义适配器类的父类改一改，然后看fragment各生命周期
打印的日志即可看到区别，这里不做演示了。

现在，结合案例二和案例三就可以做一个现在很流行的主界面了。

源码下载