Android开发中经常碰到一个页面上有多个可滑动tab的场景，经常是tabLayout和viewpager配合实现
如果碰到的场景并不需要viewpager，只是想要一个轻量的指示器，可以用很少的代码自己实现。效果如下

效果图.gif

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，就可以跟其他内容组合起来，起到指示器的作用