Android ViewPager再探：增加滑动指示条-白红宇

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

阅读量：5139 次

发布时间：2019-06-13

本文共 9859 字，大约阅读时间需要 32 分钟。

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

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

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

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

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

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

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

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

1 //初始化指示器位置 2     public void initCursorPos() { 3         // 初始化动画 4         cursor = (ImageView) findViewById(R.id.cursor); 5         bmp_width = BitmapFactory.decodeResource(getResources(), R.mipmap.slidebar) 6                 .getWidth();// 获取图片宽度 7  8         DisplayMetrics dm = new DisplayMetrics();//初始化DisplayMetrics对象 9         getWindowManager().getDefaultDisplay().getMetrics(dm);//将当前窗口信息放入DisplayMetrics类中10         int s_width = dm.widthPixels;// 获取分辨率宽度11         offset = (s_width / viewList.size() - bmp_width) / 2;// 计算偏移量(保证滑动条在该tab下正中间)12 13         Matrix matrix = new Matrix();14         matrix.postTranslate(offset, 0);15         cursor.setImageMatrix(matrix);// 设置动画初始位置16     }

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

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

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

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

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

1 //页面改变监听器 2     public class NewPageChangeListener implements ViewPager.OnPageChangeListener { 3  4         int one = offset * 2 + bmp_width;// 页卡1 -> 页卡2 偏移量 5         int two = one * 2;// 页卡1 -> 页卡3 偏移量 6  7         @Override 8         public void onPageSelected(int arg0) { 9             Animation animation = null;10             switch (arg0) {11                 case 0:12                     if (number == 1) {13                         animation = new TranslateAnimation(one, 0, 0, 0);14                     } else if (number == 2) {15                         animation = new TranslateAnimation(two, 0, 0, 0);16                     }17                     break;18                 case 1:19                     if (number == 0) {20                         animation = new TranslateAnimation(offset, one, 0, 0);21                     } else if (number == 2) {22                         animation = new TranslateAnimation(two, one, 0, 0);23                     }24                     break;25                 case 2:26                     if (number == 0) {27                         animation = new TranslateAnimation(offset, two, 0, 0);28                     } else if (number == 1) {29                         animation = new TranslateAnimation(one, two, 0, 0);30                     }31                     break;32             }33             number = arg0;34             animation.setFillAfter(true);// True:图片停在动画结束位置35             animation.setDuration(300);36             cursor.startAnimation(animation);37         }38 39         @Override40         public void onPageScrolled(int arg0, float arg1, int arg2) {41         }42 43         @Override44         public void onPageScrollStateChanged(int arg0) {45         }46     }

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

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

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

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

1 /*Tab页面参数*/2 private TextView tv_first;3 private TextView tv_second;4 private TextView tv_third;

onCreate()里：

1 /*TAB页初始化*/ 2 tv_first = (TextView)findViewById(R.id.tv_first); 3 tv_second = (TextView)findViewById(R.id.tv_second); 4 tv_third = (TextView)findViewById(R.id.tv_third); 5  6  7 /*Tab页面监听*/ 8 tv_first.setOnClickListener(new TabOnClickListener(0)); 9 tv_second.setOnClickListener(new TabOnClickListener(1));10 tv_third.setOnClickListener(new TabOnClickListener(2));

对应的监听函数：

1 /*Tab页面点击监听*/ 2     public class TabOnClickListener implements View.OnClickListener{ 3         private int num = 0; 4  5         public TabOnClickListener(int index){ 6             num = index; 7         } 8  9         @Override10         public void onClick(View v){11             viewPager.setCurrentItem(num);12         }13     }

最后附上MainActivity的完整代码：

1 package com.example.viewpager.myapplication;  2   3 import android.app.Activity;  4 import android.graphics.BitmapFactory;  5 import android.graphics.Matrix;  6 import android.os.Bundle;  7 import android.support.v4.view.ViewPager;  8 import android.util.DisplayMetrics;  9 import android.view.LayoutInflater; 10 import android.view.View; 11 import android.view.animation.Animation; 12 import android.view.animation.TranslateAnimation; 13 import android.widget.ImageView; 14 import android.widget.TextView; 15  16 import java.util.ArrayList; 17 import java.util.List; 18  19  20 public class MainActivity extends Activity { 21     private View first,second,third; 22     private ViewPager viewPager;//对应 
      控件 23     private List
      
        viewList;//View数组 24  25     /*滑动条相关定义*/ 26     private ImageView cursor; 27     private int bmp_width = 0;//游标宽度 28     private int offset = 0;//游标图片偏移量 29     private int number = 0;//当前页面编号 30  31     /*Tab页面参数*/ 32     private TextView tv_first; 33     private TextView tv_second; 34     private TextView tv_third; 35  36     @Override 37     protected void onCreate(Bundle savedInstanceState) { 38         super.onCreate(savedInstanceState); 39         setContentView(R.layout.activity_main); 40  41         /*TAB页初始化*/ 42         tv_first = (TextView)findViewById(R.id.tv_first); 43         tv_second = (TextView)findViewById(R.id.tv_second); 44         tv_third = (TextView)findViewById(R.id.tv_third); 45  46         /*初始化*/ 47         viewPager = (ViewPager)findViewById(R.id.viewpager); 48         LayoutInflater inflater = getLayoutInflater(); 49         first = inflater.inflate(R.layout.first_page,null); 50         second = inflater.inflate(R.layout.second_page,null); 51         third = inflater.inflate(R.layout.third_page,null); 52  53         viewList = new ArrayList
       
        ();// 将要分页显示的View装入数组中 54         viewList.add(first); 55         viewList.add(second); 56         viewList.add(third); 57  58         //初始化指示器位置 59         initCursorPos(); 60  61         /*适配器部分*/ 62         NewPagerAdapter pagerAdapter = new NewPagerAdapter(viewList); 63         viewPager.setAdapter(pagerAdapter); 64  65         viewPager.setCurrentItem(0);//设置当前页 66         viewPager.setOnPageChangeListener(new NewPageChangeListener());//监听页面改变 67  68         /*Tab页面监听*/ 69         tv_first.setOnClickListener(new TabOnClickListener(0)); 70         tv_second.setOnClickListener(new TabOnClickListener(1)); 71         tv_third.setOnClickListener(new TabOnClickListener(2)); 72     } 73  74     //初始化指示器位置 75     public void initCursorPos() { 76         // 初始化动画 77         cursor = (ImageView) findViewById(R.id.cursor); 78         bmp_width = BitmapFactory.decodeResource(getResources(), R.mipmap.slidebar) 79                 .getWidth();// 获取图片宽度 80  81         DisplayMetrics dm = new DisplayMetrics();//初始化DisplayMetrics对象 82         getWindowManager().getDefaultDisplay().getMetrics(dm);//将当前窗口信息放入DisplayMetrics类中 83         int s_width = dm.widthPixels;// 获取分辨率宽度 84         offset = (s_width / viewList.size() - bmp_width) / 2;// 计算偏移量(保证滑动条在该tab下正中间) 85  86         Matrix matrix = new Matrix(); 87         matrix.postTranslate(offset, 0); 88         cursor.setImageMatrix(matrix);// 设置动画初始位置 89     } 90  91  92     //页面改变监听器 93     public class NewPageChangeListener implements ViewPager.OnPageChangeListener { 94  95         int one = offset * 2 + bmp_width;// 页卡1 -> 页卡2 偏移量 96         int two = one * 2;// 页卡1 -> 页卡3 偏移量 97  98         @Override 99         public void onPageSelected(int arg0) {100             Animation animation = null;101             switch (arg0) {102                 case 0:103                     if (number == 1) {104                         animation = new TranslateAnimation(one, 0, 0, 0);105                     } else if (number == 2) {106                         animation = new TranslateAnimation(two, 0, 0, 0);107                     }108                     break;109                 case 1:110                     if (number == 0) {111                         animation = new TranslateAnimation(offset, one, 0, 0);112                     } else if (number == 2) {113                         animation = new TranslateAnimation(two, one, 0, 0);114                     }115                     break;116                 case 2:117                     if (number == 0) {118                         animation = new TranslateAnimation(offset, two, 0, 0);119                     } else if (number == 1) {120                         animation = new TranslateAnimation(one, two, 0, 0);121                     }122                     break;123             }124             number = arg0;125             animation.setFillAfter(true);// True:图片停在动画结束位置126             animation.setDuration(300);127             cursor.startAnimation(animation);128         }129 130         @Override131         public void onPageScrolled(int arg0, float arg1, int arg2) {132         }133 134         @Override135         public void onPageScrollStateChanged(int arg0) {136         }137     }138 139 140     /*Tab页面点击监听*/141     public class TabOnClickListener implements View.OnClickListener{142         private int num = 0;143 144         public TabOnClickListener(int index){145             num = index;146         }147 148         @Override149         public void onClick(View v){150             viewPager.setCurrentItem(num);151         }152     }153 154 }

MainActivity.java

转载于:https://www.cnblogs.com/hopecapital/p/4682160.html

你可能感兴趣的文章