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了