ViewPager 之监听器

本文主要写一下 ViewPager 的监听。

调用 addOnPageChangeListener(ViewPager.OnPageChangeListener listener) 为 ViewPager 添加一个监听器来监听 ViewPager 的更改和滑动，OnPagerChangeListener 需要重写以下三个方法：

onPageScrollStateChanged(int state)：当 ViewPager 滚动状态发生改变时调用。其参数为滚动状态，共有以下三种：
- SCROLL_STATE_IDLE：Pager 停止滑动。
- SCROLL_STATE_DRAGGING：表示目前用户正在滑动 Pager。
- SCROLL_STATE_SETTLING：Pager 正在定位到最后的位置。
onPageSelected(int position)：表示哪个页面被显示。
onPageScrolled(int position, float positionOffset, int positionOffsetPixels)：页面开始滚动时，该方法会不断被调用。其参数：
- int position：表示滑动的页面，但是需要注意的是：
  - 用户向左滑动时，该值一直为当前页面 position，如果滑动成功，变为目标页面 position。
  - 用户向右滑动时，该值一直为目标页面 position，如果滑动成功，变为目标页面 position。
- float positionOffset：当前页面滑动比例，如果页面向右翻动，这个值不断变大，最后在趋近1的情况后突变为0。如果页面向左翻动，这个值不断变小，最后变为0。
- int positionOffsetPixels：当前页面滑动像素，变化情况和positionOffset一致。

明白了 ViewPager 的监听器，我们可以给 ViewPager 添加一个指示器。

布局文件：


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


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

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

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginBottom="5dp"
        android:layout_marginRight="5dp"
        android:padding="5dp">

        <ImageView
            android:id="@+id/index_one"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="5dp"
            android:src="@drawable/red" />

        <ImageView
            android:id="@+id/index_two"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="5dp"
            android:src="@drawable/green" />

        <ImageView
            android:id="@+id/index_three"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="5dp"
            android:src="@drawable/green" />
    </LinearLayout>
</RelativeLayout>

然后根据监听器中 onPageSelected 方法参数，修改 ImageView：

        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }
            @Override
            public void onPageSelected(int position) {
                switch (position) {
                    case 0:
                        index_one.setImageResource(R.drawable.red);
                        index_two.setImageResource(R.drawable.green);
                        index_three.setImageResource(R.drawable.green);
                        break;
                    case 1:
                        index_one.setImageResource(R.drawable.green);
                        index_two.setImageResource(R.drawable.red);
                        index_three.setImageResource(R.drawable.green);
                        break;
                    case 2:
                        index_one.setImageResource(R.drawable.green);
                        index_two.setImageResource(R.drawable.green);
                        index_three.setImageResource(R.drawable.red);
                        break;
                }
            }
            @Override
            public void onPageScrollStateChanged(int state) {
            }
        });

显示如下：

ViewPager 之 监听器

ViewPager 之监听器