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);
         }
     }

 }

MainActivity.java