Android ViewPager再探：增加滑动指示条

上一篇：《Android ViewPager初探：让页面滑动起来》

ViewPager只是左右滑动有些丑，也不知道当前位于第几页面。

可以在上方加入滑动指示条，来确定当前位置。

只需要修改activity_main.xml和MainActivity.java即可，Adapter没什么要更改的。

首先，在activity_main.xml这个主页面中，修改根布局为LinearLayout，并增加布局TAB：

<LinearLayout
        android:id="@+id/ll_tab"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:background="#FFFFFF" >

        <TextView
            android:id="@+id/tv_first"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="First"
            android:textSize="20sp" />

        <TextView
            android:id="@+id/tv_second"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="Second"
            android:textSize="20sp" />

        <TextView
            android:id="@+id/tv_third"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="Third"
            android:textSize="20sp" />
    </LinearLayout>

TAB布局下，应该有滑动指示条。在网上找了个图片命名为slidebar，放在mipmap-hdpi文件夹下，对应的布局为：

<ImageView
        android:id="@+id/cursor"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scaleType="matrix"
        android:src="@mipmap/slidebar"
        android:contentDescription="slidebar"/>

对于cursor这个滑动条指示器，首先定义需要的参数：

/*滑动条相关定义*/
private ImageView cursor;
private int bmp_width = 0;//游标宽度
private int offset = 0;//游标图片偏移量
private int number = 0;//当前页面编号

其次应该初始化它的位置：

//初始化指示器位置
    public void initCursorPos() {
        // 初始化动画
        cursor = (ImageView) findViewById(R.id.cursor);
        bmp_width = BitmapFactory.decodeResource(getResources(), R.mipmap.slidebar)
                .getWidth();// 获取图片宽度

        DisplayMetrics dm = new DisplayMetrics();//初始化DisplayMetrics对象
        getWindowManager().getDefaultDisplay().getMetrics(dm);//将当前窗口信息放入DisplayMetrics类中
        int s_width = dm.widthPixels;// 获取分辨率宽度
        offset = (s_width / viewList.size() - bmp_width) / 2;// 计算偏移量(保证滑动条在该tab下正中间)

        Matrix matrix = new Matrix();
        matrix.postTranslate(offset, 0);
        cursor.setImageMatrix(matrix);// 设置动画初始位置
    }

Andorid.util 包下的DisplayMetrics 类提供了一种关于显示的通用信息，如显示大小，分辨率和字体。

DisplayMetrics dm = new DisplayMetrics();这句初始化了DisplayMetrics对象，但并未保存信息。

getWindowManager().getDefaultDisplay().getMetrics(dm);这句是获取当前窗口信息，并放入dm中。

偏移量的计算参考了网上例子，让滑动条处于正下方中间。

滑动指示条的移动需要跟随viewpager页面改变，这意味着要设置监听：（此处代码参考自：http://blog.csdn.net/harvic880925/article/details/38557517）

//页面改变监听器
    public class NewPageChangeListener implements ViewPager.OnPageChangeListener {

        int one = offset * 2 + bmp_width;// 页卡1 -> 页卡2 偏移量
        int two = one * 2;// 页卡1 -> 页卡3 偏移量

        @Override
        public void onPageSelected(int arg0) {
            Animation animation = null;
            switch (arg0) {
                case 0:
                    if (number == 1) {
                        animation = new TranslateAnimation(one, 0, 0, 0);
                    } else if (number == 2) {
                        animation = new TranslateAnimation(two, 0, 0, 0);
                    }
                    break;
                case 1:
                    if (number == 0) {
                        animation = new TranslateAnimation(offset, one, 0, 0);
                    } else if (number == 2) {
                        animation = new TranslateAnimation(two, one, 0, 0);
                    }
                    break;
                case 2:
                    if (number == 0) {
                        animation = new TranslateAnimation(offset, two, 0, 0);
                    } else if (number == 1) {
                        animation = new TranslateAnimation(one, two, 0, 0);
                    }
                    break;
            }
            number = arg0;
            animation.setFillAfter(true);// True:图片停在动画结束位置
            animation.setDuration(300);
            cursor.startAnimation(animation);
        }

        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {
        }

        @Override
        public void onPageScrollStateChanged(int arg0) {
        }
    }

最后，在onCreate()函数内，加上监听操作：

viewPager.setCurrentItem(0);//设置当前页
viewPager.setOnPageChangeListener(new NewPageChangeListener());//监听页面改变

到此，滑动条和viewpager就结合了。

如果希望点击tab块，能跳转到相应页面，则需要加上监听操作：

/*Tab页面参数*/
private TextView tv_first;
private TextView tv_second;
private TextView tv_third;

onCreate()里：

/*TAB页初始化*/
tv_first = (TextView)findViewById(R.id.tv_first);
tv_second = (TextView)findViewById(R.id.tv_second);
tv_third = (TextView)findViewById(R.id.tv_third);


/*Tab页面监听*/
tv_first.setOnClickListener(new TabOnClickListener(0));
tv_second.setOnClickListener(new TabOnClickListener(1));
tv_third.setOnClickListener(new TabOnClickListener(2));

对应的监听函数：

/*Tab页面点击监听*/
    public class TabOnClickListener implements View.OnClickListener{
        private int num = 0;

        public TabOnClickListener(int index){
            num = index;
        }

        @Override
        public void onClick(View v){
            viewPager.setCurrentItem(num);
        }
    }

最后附上MainActivity的完整代码：

package com.example.viewpager.myapplication;

import android.app.Activity;
import android.graphics.BitmapFactory;
import android.graphics.Matrix;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.util.DisplayMetrics;
import android.view.LayoutInflater;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;


public class MainActivity extends Activity {
    private View first,second,third;
    private ViewPager viewPager;//对应 <android.support.v4.view.ViewPager/>控件
    private List<View> viewList;//View数组

    /*滑动条相关定义*/
    private ImageView cursor;
    private int bmp_width = 0;//游标宽度
    private int offset = 0;//游标图片偏移量
    private int number = 0;//当前页面编号

    /*Tab页面参数*/
    private TextView tv_first;
    private TextView tv_second;
    private TextView tv_third;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        /*TAB页初始化*/
        tv_first = (TextView)findViewById(R.id.tv_first);
        tv_second = (TextView)findViewById(R.id.tv_second);
        tv_third = (TextView)findViewById(R.id.tv_third);

        /*初始化*/
        viewPager = (ViewPager)findViewById(R.id.viewpager);
        LayoutInflater inflater = getLayoutInflater();
        first = inflater.inflate(R.layout.first_page,null);
        second = inflater.inflate(R.layout.second_page,null);
        third = inflater.inflate(R.layout.third_page,null);

        viewList = new ArrayList<View>();// 将要分页显示的View装入数组中
        viewList.add(first);
        viewList.add(second);
        viewList.add(third);

        //初始化指示器位置
        initCursorPos();

        /*适配器部分*/
        NewPagerAdapter pagerAdapter = new NewPagerAdapter(viewList);
        viewPager.setAdapter(pagerAdapter);

        viewPager.setCurrentItem(0);//设置当前页
        viewPager.setOnPageChangeListener(new NewPageChangeListener());//监听页面改变

        /*Tab页面监听*/
        tv_first.setOnClickListener(new TabOnClickListener(0));
        tv_second.setOnClickListener(new TabOnClickListener(1));
        tv_third.setOnClickListener(new TabOnClickListener(2));
    }

    //初始化指示器位置
    public void initCursorPos() {
        // 初始化动画
        cursor = (ImageView) findViewById(R.id.cursor);
        bmp_width = BitmapFactory.decodeResource(getResources(), R.mipmap.slidebar)
                .getWidth();// 获取图片宽度

        DisplayMetrics dm = new DisplayMetrics();//初始化DisplayMetrics对象
        getWindowManager().getDefaultDisplay().getMetrics(dm);//将当前窗口信息放入DisplayMetrics类中
        int s_width = dm.widthPixels;// 获取分辨率宽度
        offset = (s_width / viewList.size() - bmp_width) / 2;// 计算偏移量(保证滑动条在该tab下正中间)

        Matrix matrix = new Matrix();
        matrix.postTranslate(offset, 0);
        cursor.setImageMatrix(matrix);// 设置动画初始位置
    }


    //页面改变监听器
    public class NewPageChangeListener implements ViewPager.OnPageChangeListener {

        int one = offset * 2 + bmp_width;// 页卡1 -> 页卡2 偏移量
        int two = one * 2;// 页卡1 -> 页卡3 偏移量

        @Override
        public void onPageSelected(int arg0) {
            Animation animation = null;
            switch (arg0) {
                case 0:
                    if (number == 1) {
                        animation = new TranslateAnimation(one, 0, 0, 0);
                    } else if (number == 2) {
                        animation = new TranslateAnimation(two, 0, 0, 0);
                    }
                    break;
                case 1:
                    if (number == 0) {
                        animation = new TranslateAnimation(offset, one, 0, 0);
                    } else if (number == 2) {
                        animation = new TranslateAnimation(two, one, 0, 0);
                    }
                    break;
                case 2:
                    if (number == 0) {
                        animation = new TranslateAnimation(offset, two, 0, 0);
                    } else if (number == 1) {
                        animation = new TranslateAnimation(one, two, 0, 0);
                    }
                    break;
            }
            number = arg0;
            animation.setFillAfter(true);// True:图片停在动画结束位置
            animation.setDuration(300);
            cursor.startAnimation(animation);
        }

        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {
        }

        @Override
        public void onPageScrollStateChanged(int arg0) {
        }
    }


    /*Tab页面点击监听*/
    public class TabOnClickListener implements View.OnClickListener{
        private int num = 0;

        public TabOnClickListener(int index){
            num = index;
        }

        @Override
        public void onClick(View v){
            viewPager.setCurrentItem(num);
        }
    }

}