Android 自制ViewPager的指示器PagerIndicator

1.实际效果

由于之前用到了一个比较老的类似的指示器框架，发现它功能并不完善（发现显示层是用图片来做的，感觉好呆板的控件），而且UI很丑（使用蓝色png图片填充的，为了搭配我的app色调，特意用ps把原图片素材全改为白色了[]~(￣▽￣)~*），就如下面我之前做的App上展示的那样。后来发现Bilibili客户端的效果不错，稍微思考一下发现原理不难，就尝试着自己写一个，终于成品出来了！







从左到右依次是纯粹菜谱，Bilibili客户端，本案例demo

2.原理机制

完成这个自定义ViewGroup时遇到了不少bug,不过主要是逻辑方面的bug,认真检查后一一排除问题了。

制作类似的控件要解决的主要是滑动ViewPager时指示器的显示问题，这个需要很细致清晰的逻辑，然后是对自定义View各个内部方法调用顺序和机制的熟练程度。

整个PagerIndicator运行原理：根据传入的ViewPager，调用其监听方法，根据其状态动态绘制标题下方的小横条（矩形）。当用户滑动页面时，小横条会按比例移动相应的距离；当滑动结束时，小横条固定在指定的位置

下面贴出PagerIndicator源码：

package chen.capton.custom;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.util.Log;
import android.view.Gravity;
import android.view.View;
import android.widget.HorizontalScrollView;
import android.widget.LinearLayout;
import android.widget.TextView;

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

import static android.content.ContentValues.TAG;

/**
* Created by CAPTON on 2017/1/13.
*/

public class PagerIndicator extends HorizontalScrollView implements View.OnClickListener{
private Context context;
private int textColor;   //标题字体的颜色
private int textCheckedColor; //选中时标题字体的颜色
private int textSize;    //标题字体大小
private int lineColor;  //横条颜色
private int lineHeight; //横条厚度（高度）
private float lineProportion; //横条占比（宽度）0.0~1.0
private ViewPager viewPager;  //保存传进来的ViewPager
private List<TextView> textViewList=new ArrayList<>();//显示各个标题的TextView集合
private List<String> titleList;//标题字符串ArrayList
private LinearLayout wrapper; //由于控件继承自HorizontalView，其直系子View必须是唯一的LinearLayout。

public ViewPager getViewPager() {return viewPager;}
//返回值为控件本体对象，方便用户链式调用，下同
public PagerIndicator setViewPager(ViewPager viewPager) {
this.viewPager = viewPager;
return this;
}
public List<String> getTitleList() {return titleList;}
public PagerIndicator setTitleList(List<String> titleList) {
this.titleList = titleList;
return this;
}
public int getTextColor() {return textColor;}
public PagerIndicator setTextColor(int textColor) {
this.textColor = getResources().getColor(textColor);
invalidate();
return this;
}
public int getTextSize() {return textSize;}
public PagerIndicator setTextSize(int textSize) {
this.textSize =  DisplayUtil.sp2px(context,textSize);;
invalidate();
return this;
}
public int getTextCheckedColor() {return textCheckedColor;}
public PagerIndicator setTextCheckedColor(int textCheckedColor) {
this.textCheckedColor = getResources().getColor(textCheckedColor);
invalidate();
return this;
}
public int getLineColor() {return lineColor;}
public PagerIndicator setLineColor(int lineColor) {
this.lineColor = getResources().getColor(lineColor);
paint.setColor(this.lineColor);
invalidate();
return this;
}
public int getLineHeight() {return lineHeight;}
public PagerIndicator setLineHeight(int lineHeight) {
this.lineHeight = DisplayUtil.dip2px(context,lineHeight);
invalidate();
return this;
}
public float getLineProportion() {return lineProportion;}
public PagerIndicator setLineProportion(float lineProportion) {
this.lineProportion = lineProportion;
invalidate();
return this;
}

public PagerIndicator(Context context) {
this(context,null);
}
public PagerIndicator(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);}
public PagerIndicator(Context context, AttributeSet attrs) {
this(context, attrs,0);
this.context=context;
TypedArray ta=context.obtainStyledAttributes(attrs,R.styleable.PagerIndicator);
textColor=ta.getColor(R.styleable.PagerIndicator_textColor,getResources().getColor(R.color.pager_indicator_black)); //默认标题字体为黑色
textCheckedColor=ta.getColor(R.styleable.PagerIndicator_textCheckedColor,getResources().getColor(android.R.color.white)); //默认选中标题为白色
lineColor=ta.getColor(R.styleable.PagerIndicator_lineColor,getResources().getColor(android.R.color.white)); //默认横线为白色
textSize= (int) ta.getDimension(R.styleable.PagerIndicator_textSize,44);    //默认14sp(44px)
lineHeight= (int) ta.getDimension(R.styleable.PagerIndicator_lineHeight,18); //默认6dp(18px)
lineProportion=ta.getFloat(R.styleable.PagerIndicator_lineProportion,0.33f); //默认选项宽度的1/3
/*防止用户输入参数超出范围造成显示错误*/
if(lineProportion>1){
lineProportion=1;
}
if(lineProportion<0){
lineProportion=0;
}
ta.recycle();
wrapper=new LinearLayout(context);
paint=new Paint();
paint.setColor(lineColor);
}

boolean once;
int width,heigth;//控件宽度，控件高度
int childrenWidth=0; //标题视图的宽度总和
List<Integer> childWidthList=new ArrayList<>();
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int widthSize=MeasureSpec.getSize(widthMeasureSpec);
int heightSize=MeasureSpec.getSize(heightMeasureSpec);
int heightMode=MeasureSpec.getMode(heightMeasureSpec);
//当用户设置本空间高度为“wrap_content”时，默认高度设置为40dp,其他情况则是实际高度
heightSize=heightMode==MeasureSpec.AT_MOST?DisplayUtil.dip2px(context,40):heightSize;
width=widthSize;
heigth=heightSize;
while (!once) {
LinearLayout.LayoutParams lp2 = new LinearLayout.LayoutParams(widthSize, heightSize);
lp2.gravity=LinearLayout.HORIZONTAL;
wrapper.setLayoutParams(lp2);

//根据传进来的标题ArrayList动态添加子View(标题项)
for (int i = 0; i <titleList.size(); i++) {
int childWidth=titleList.get(i).length()*60;
childWidthList.add(childWidth);
TextView textView=new TextView(context);
textView.setText(titleList.get(i));
textView.setTextSize(DisplayUtil.px2sp(context,textSize));
textView.setTextColor(textColor);
textView.setGravity(Gravity.CENTER);
LayoutParams lp3=new LayoutParams(childWidth,
heightSize-DisplayUtil.px2dip(context,lineHeight));
textView.setLayoutParams(lp3);
//设置Tag,用于标识此TextView对象，当点击标题时，根据此Tag的i值,ViewPager将跳转至页面i。
textView.setTag(i);
textView.setOnClickListener(this);
childrenWidth+=childWidth;
textViewList.add(textView);
wrapper.addView(textView);
}
textViewList.get(0).setTextColor(textCheckedColor);
addView(wrapper);
once=true;
}
setMeasuredDimension(widthSize,heightSize);//测量控件本体
}
int tempPosition=0;
float goneWidth=0;//保存当前标题之前的所有标题宽度，通过计算，确定当前小横条的位置
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
wrapper.layout(0,0,childrenWidth,heigth);//布局直系唯一子View,参数 r 必须等于其子View的宽度之和，如果等于父控件宽度，则当子View宽度大于父控件时，多出部分的子View没法显示，也没有拖动效果。
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
/*
*核心算法部分，当手指滑动屏幕时页面跟着滑动，指示器的小横条跟着移动；停止滑动时，小横条显示在正确的位置上。（ps:这部分算法因人而异，我相信大家可以写出更简洁高效的代码，就不多做注释了）
*/
if(position==tempPosition) {
left = childWidthList.get(position)*(1-lineProportion)/2
+positionOffset*childWidthList.get(position)+goneWidth;
right = childWidthList.get(position)*(1+lineProportion)/2+
positionOffset*childWidthList.get(position)+goneWidth;
top = heigth - DisplayUtil.px2dip(context,lineHeight);
bottom = heigth;
}else {
int sum=0;
for (int i = 0; i < position; i++) {
sum+=childWidthList.get(i);
}
goneWidth=sum;
if(position>tempPosition) {
left = childWidthList.get(position)*(1-lineProportion)/2+
goneWidth;
right = childWidthList.get(position)*(1+lineProportion)/2+
goneWidth;
}else{
left = childWidthList.get(position)*(1-lineProportion)/2+positionOffset*childWidthList.get(position)+goneWidth;
right = childWidthList.get(position)*(1+lineProportion)/2+positionOffset*childWidthList.get(position)+goneWidth;
}
/*
*这是当页面很多，标题宽度很大（超过屏幕了）时，将选定的标题居中显示的算法
*/
float scrollCenter=goneWidth+childWidthList.get(position)/2;
if (scrollCenter>=width/2){
smoothScrollTo((int) (scrollCenter-width/2),0);
}else {
smoothScrollTo(0,0);
}
tempPosition=position;
}
invalidate();
}
@Override
public void onPageSelected(int position) {
for(TextView textview:textViewList){
textview.setTextColor(textColor);
}
textViewList.get(position).setTextColor(textCheckedColor);
invalidate();
}
@Override
public void onPageScrollStateChanged(int state) {}
});
}
Paint paint;  //绘制小横条的画笔
float left,top,right,bottom;//绘制小横条（矩形）的四个边界
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawRect(left,top,right,bottom,paint);
}
@Override
public void onClick(View v) {
if(v instanceof TextView){
//根据之前动态初始化TextView时设置的Tag(int类型)，跳转页面
viewPager.setCurrentItem((Integer) v.getTag());
}
}
}

在ViewGroup中，onMeasure,onLayout,onDraw三个方法依次调用，其中onDraw方法在用户触摸或者拖动控件时会调用多次，当调用invalidate方法时，onDraw也会被调用。所以有了我们重绘控件的契机，即调用传进来的ViewPager对象的setOnPageChangeListener(new ViewPager.OnPageChangeListener() {})方法，通过在添加的OnPageChangeListener监听器中根据ViewPager的滑动状态来同步重绘我们的PagerIndicator控件的小横条，例如：

viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
/*
*核心算法部分，当手指滑动屏幕时页面跟着滑动，指示器的小横条跟着移动；停止滑动时，小横条显示在正确的位置上。（ps:这部分算法因人而异，我相信大家可以写出更简洁高效的代码，就不多做注释了）
*/
if(position==tempPosition) {
left = childWidthList.get(position)*(1-lineProportion)/2
+positionOffset*childWidthList.get(position)+goneWidth;
right = childWidthList.get(position)*(1+lineProportion)/2+
positionOffset*childWidthList.get(position)+goneWidth;
top = heigth - DisplayUtil.px2dip(context,lineHeight);
bottom = heigth;
}else {
int sum=0;
for (int i = 0; i < position; i++) {
sum+=childWidthList.get(i);
}
goneWidth=sum;
if(position>tempPosition) {
left = childWidthList.get(position)*(1-lineProportion)/2+
goneWidth;
right = childWidthList.get(position)*(1+lineProportion)/2+
goneWidth;
}else{
left = childWidthList.get(position)*(1-lineProportion)/2+positionOffset*childWidthList.get(position)+goneWidth;
right = childWidthList.get(position)*(1+lineProportion)/2+positionOffset*childWidthList.get(position)+goneWidth;
}
/*
*这是当页面很多，标题宽度很大（超过屏幕了）时，将选定的标题居中显示的算法
*/
float scrollCenter=goneWidth+childWidthList.get(position)/2;
if (scrollCenter>=width/2){
smoothScrollTo((int) (scrollCenter-width/2),0);
}else {
smoothScrollTo(0,0);
}
tempPosition=position;
}
invalidate();
}
@Override
public void onPageSelected(int position) {
for(TextView textview:textViewList){
textview.setTextColor(textColor);
}
textViewList.get(position).setTextColor(textCheckedColor);
invalidate();
}
@Override
public void onPageScrollStateChanged(int state) {}
});
}
Paint paint;  //绘制小横条的画笔
float left,top,right,bottom;//绘制小横条（矩形）的四个边界
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawRect(left,top,right,bottom,paint);
}
@Override
public void onClick(View v) {
if(v instanceof TextView){
//根据之前动态初始化TextView时设置的Tag(int类型)，跳转页面
viewPager.setCurrentItem((Integer) v.getTag());
}
}
}

3.具体用法

详情请见 5.相关文件

4.作者的话

对于自定义View与自定义ViewGroup我还不是特别熟悉，很多没见过的用法和函数都没深入去涉猎，例如专注界面绘制的Canvas,Paint，Drawable等等。希望看到我文章的大触们多多指教，对于那些看不懂这片代码的同学，建议先去掌握好自定义View（ViewGroup）的基础再来吐槽吧。

5.相关文件

GitHub链接：https://github.com/Ccapton/pagerIndicator