ViewPage指示器

ViewPage指示器

1、先看布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="40dp">

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="@string/str1" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="@string/str2" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="@string/str3" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="@string/str4" />
    </LinearLayout>

    <ImageView
        android:id="@+id/id_main_viewPage_indicate"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#f00" />

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

简单介绍一下布局文件：

一、布局的最上面是四个TextView，每一个TextView都对应一个Fragment，这个就不多说了

二、中间有一个ImageView，这个ImageView就是我们要处理的指示器，可以随着ViewPage的滑动一起滑动

三、ViewPage不用多说

2、看一下我们需要的属性

    /**
     * 保存当前页面所有的Fragment
     */
    private ArrayList<Fragment> fragments;
    /**
     * 页面1
     */
    private Page1 page1;
    /**
     * 页面2
     */
    private Page2 page2;
    /**
     * 页面3
     */
    private Page3 page3;
    /**
     * 页面4
     */
    private Page4 page4;
    private ViewPager viewPager;
    /**
     * 红色指示器的宽度
     */
    private int indicateWidth;
    /**
     * 红色指示器
     */
    private ImageView indicateView;

3、继承OnPageChangeListener

    <pre name="code" class="java">class MyViewPageChangeListener implements ViewPager.OnPageChangeListener {

        private boolean isAnim = false;
        private int pos = 0;

        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            if (isAnim && positionOffset != 0) {
                //注意此处需要加上indicateWidth * position，如果不加，就是从初始位置开始位移的
                indicateView.setTranslationX(indicateWidth * position + indicateWidth * positionOffset);
            }
        }

        @Override
        public void onPageSelected(int position) {
            indicateView.setTranslationX(indicateWidth * position);
            pos = position;
        }

        @Override
        public void onPageScrollStateChanged(int state) {
            if (state == ViewPager.SCROLL_STATE_DRAGGING) //滑动状态
            {
                isAnim = true;
            } else if (state == ViewPager.SCROLL_STATE_SETTLING) //完成状态
            {
                isAnim = false;
                indicateView.setTranslationX(pos * indicateWidth);
            } else if (state == ViewPager.SCROLL_STATE_IDLE) //空闲状态
            {
                indicateView.setTranslationX(pos * indicateWidth);
            }
        }
    }

4、初始化IndicateView

<span style="white-space:pre">	</span>indicateView = (ImageView) findViewById(R.id.id_main_viewPage_indicate);

        DisplayMetrics dm = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(dm);
        //屏幕的宽度
        int screenWidth = dm.widthPixels;
        ViewGroup.LayoutParams params = indicateView.getLayoutParams();
        params.width = indicateWidth = screenWidth / fragments.size();
        indicateView.setLayoutParams(params);

好了，下面的任务就是设置ViewPage的OnPageChangeListener了