Android开发中经常碰到一个页面上有多个可滑动tab的场景，经常是tabLayout和viewpager配合实现
如果碰到的场景并不需要viewpager，只是想要一个轻量的指示器，可以用很少的代码自己实现。效果如下
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;
import android.widget.Scroller;
public class TabStrip extends View {
private Paint mPaint;
private Scroller mScroller;
private int mIndicatorCenterX;
private int mIndicatorWidth = 25;
private int mIndicatorHeight = 2;
private RectF mIndicatorRect;
private int ANIM_DURATION = 500;
private int mRadius = 5;
public TabStrip(Context context) {
this(context, null);
}
public TabStrip(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public TabStrip(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setStrokeWidth(5);
mPaint.setColor(0xFFFF5777);
mScroller = new Scroller(getContext());
mIndicatorRect = new RectF();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, MeasureSpec.makeMeasureSpec(dp2px(mIndicatorHeight), MeasureSpec.EXACTLY));
}
public void smoothScrollTo(int destX) {
smoothScrollTo(destX, ANIM_DURATION);
}
public void smoothScrollTo(int destX, int duration) {
int finalX = mScroller.getFinalX();
int deltaX = destX - finalX;
mScroller.startScroll(finalX, 0, deltaX, 0, duration);
invalidate();
}
public void setIndicatorPosition(int x) {
smoothScrollTo(x, 1);
}
@Override
public void computeScroll() {
if (mScroller.computeScrollOffset()) {
mIndicatorCenterX = mScroller.getCurrX();
invalidate();
}
}
private int dp2px(int dp) {
return (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, dp, getContext().getResources().getDisplayMetrics()
);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// 画指示器
mIndicatorRect.left = mIndicatorCenterX - dp2px(mIndicatorWidth) / 2;
mIndicatorRect.right = mIndicatorCenterX + dp2px(mIndicatorWidth) / 2;
mIndicatorRect.top = 0;
mIndicatorRect.bottom = dp2px(mIndicatorHeight);
canvas.drawRoundRect(mIndicatorRect, dp2px(mRadius), dp2px(mRadius), mPaint);
}
}
其实只需要看smoothScrollTo computeScroll onDraw 三个方法
要实现Indicator的效果，首先当然是要画出指示条，那么需要在ondraw方法里画出指示条。（这里要注意ondraw方法绝不能new任何东西，因为ondraw是十分频繁调用的，要保证不让无谓的操作影响性能）
然后需要思考怎么让指示条动起来。可能很容易想到可以用动画Animation或者插值器Interpolator实现。不过这类滑动的场景，系统提供了一个很好用的工具类Scroller，可以十分方便的实现滑动场景。
既然指示条是我们自己在onDraw里画出来的，那么只需要保证不断进入onDraw重绘并且每次都改变画指示条的位置，滑动效果就出来了。
Scroller跟插值器有点像，可以想象它是一个特定时间特定距离的滑动的数据表示，可以通过它获取某个时间点的滑动信息。
这里的调用关系是
smoothScrollTo -> invalidate->onDraw->computeScroll-> invalidate-> onDraw->computeScroll->invalidate-> onDraw->....
关键在于onDraw会调用computeScroll，computeScroll又会用invalidate刷新导致onDraw被调用，而每次onDraw中画指示条的时候的位置由scroller.getcurrentX()提供，整个循环调用由mScroller.computeScrollOffset()控制退出。当设定的滑动完成后，computeScrollOffset返回true退出不断重绘的循环。
由于使用scroller可以实时得到当前的滑动位置，哪怕是在某次指示条还在滑向某个指定tab的滑动过程又点了另一个tab，smoothScrollTo设定了新的滑动动作之后指示条也可以从半路开始滑向新的tab，动画不会中断。
这里实现了一个可以滑动的Indicator，只需要在适当的时候调用smoothScrollTo，就可以跟其他内容组合起来，起到指示器的作用
