史上最巧妙自定义tablayout指示器

国际惯例，无图无真相

首先我们先过几个概念，老手这个请自行跳过。

Android的View显示在界面上需要三步：测量，定位和绘制。

第一步：测量，View的measure方法

这个方法用来测量View显示的宽高值。这个宽高值是基于View**自身宽高，再加上父View的约束**得到的。这个约束使用MeasureSpec类传递。

@Override
        protected void onMeasure(final int widthMeasureSpec, final int heightMeasureSpec) {
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
            }

measure方法是final型的，子类需要重写的是onMeasure方法，这里做了两件事：真正测量宽高值；保存宽高值。保存操作是调用setMeasuredDimension方法，以供后续步骤使用。
在View的onMeasure方法中，使用getDefaultSize方法获取在具体size和具体measureSpec下调整后的最终size，并调用setMeasuredDimension方法保存。
要是有子View，需要在onMeasure方法中调用ViewGroup的measureChild方法。

第二步：定位，View的layout方法

这个方法用来将View（子View）放在确定的位置。这时View的左上右下的坐标值就存在了。
这个方法是final型的，子类需要重写的是onLayout方法，

    protected void onLayout(boolean changed, int l, int t, int r, int b) {
            super.onLayout(changed, l, t, r, b);
}

layout方法最初传入的右下参数，就是measure方法中保存的值。
要是有子View，需要在onLayout方法中调用子View的layout方法。

第三步：绘制，View的draw方法

这个方法用来绘制view内容。包括自身及子View。
draw方法中将绘制过程分六步：背景；阴影层（if nesessary）；view自身；子View；阴影边缘（if nesessary）；装饰部分（如前景色，滚动条）。

其中，view自身绘制在onDraw方法中实现，子View绘制在dispatchDraw方法中实现。View类中这两个方法均是空实现，ViewGroup类中仅对dispatchView添加具体实现，即依次调用子View的draw方法（用drawChild方法封装）。
draw方法是final型的，子类需要重写的是onDraw方法，来完成自身的绘制。
要是有子View，一般直接使用ViewGroup的dispatchDraw方法就可以了，不需要重写。

private class SlidingTabStrip extends LinearLayout {
    private int mSelectedIndicatorHeight;
    private final Paint mSelectedIndicatorPaint;

    int mSelectedPosition = -1;
    float mSelectionOffset;

    private int mIndicatorLeft = -1;
    private int mIndicatorRight = -1;

    private ValueAnimatorCompat mIndicatorAnimator;

    SlidingTabStrip(Context context) {
        super(context);
        setWillNotDraw(false);
        mSelectedIndicatorPaint = new Paint();
    }
    //省略部分代码

    @Override
    protected void onMeasure(final int widthMeasureSpec, final int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //省略部分代码
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        super.onLayout(changed, l, t, r, b);
        //省略部分代码
    }

    @Override
    public void draw(Canvas canvas) {
        super.draw(canvas);
        //这里是关键代码，画指示线，那么我么也可以利用底下的几个参数画整个背景，后面需要用到
        // Thick colored underline below the current selection
        if (mIndicatorLeft >= 0 && mIndicatorRight > mIndicatorLeft) {
            canvas.drawRect(mIndicatorLeft, getHeight() - mSelectedIndicatorHeight,
                    mIndicatorRight, getHeight(), mSelectedIndicatorPaint);
        }
    }
}

这里我们知道private class SlidingTabStrip 是私有方法，而且 private final SlidingTabStrip mTabStrip; 是final，我们没有通过重写继承更改。那么要怎么去修改呢？有些人可能会想到反射，但是反射怎么才能最简单的修改呢？

如果对反射不是很熟悉的，可以参考下这一篇博客 你必须掌的握反射用法

上面的关键代码主要是其draw(Canvas canvas)方法，我们发现他传入的参数是canvas ，我们能否拿到这个对象，然后就可以在外部使用canvas进行画图了。

思路有了，怎么实现呢？

通过源码我们可以知道，TabLayout 添加Tab最终是添加到我们上面说的mTabStrip里面

private void addTabView(Tab tab) {
        final TabView tabView = tab.mView;
        mTabStrip.addView(tabView, tab.getPosition(), createLayoutParamsForTabs());
    }

而TabLayout的子view就是我们上面说的SlidingTabStrip ，通过mTabLayout.getChildAt(0)获取。然后我们知道view实现了drawable的回调接口

public class View implements Drawable.Callback, KeyEvent.Callback,
        AccessibilityEventSource {
        }

于是实现自定义drawable代理类如下：

public class ProxyDrawable  extends Drawable {
    View view;
    Paint paint;

    float paddingLeft ;
    float paddingTop;

    public ProxyDrawable(View view) {
        this.view = view;
        paint = new Paint();
        paint.setColor(0xFF6DA9FF);
        float density = view.getResources().getDisplayMetrics().density;
        //这两个留白可以根据需求更改
        paddingLeft = 0 * density;
        paddingTop =  5 * density;
    }

    @Override
    public void draw(@NonNull Canvas canvas) {
    //这里通过反射获取SlidingTabStrip的两个变量，源代码画的是下划线，我们现在画的是带圆角的矩形
        int mIndicatorLeft = getIntValue("mIndicatorLeft");
        int mIndicatorRight = getIntValue("mIndicatorRight");
        int height = view.getHeight();
        int radius = height / 2;
        if (mIndicatorLeft >= 0 && mIndicatorRight > mIndicatorLeft) {
            canvas.drawRoundRect(new RectF(mIndicatorLeft + (int)paddingLeft, (int)paddingTop, mIndicatorRight - (int)paddingLeft, height - (int)paddingTop), radius, radius, paint);
        }
    }

    int getIntValue(String name) {
        try {
            Field f = view.getClass().getDeclaredField(name);
            f.setAccessible(true);
            Object obj = f.get(view);
            return (Integer) obj;
        } catch (Exception e) {
            e.printStackTrace();
        }

        return 0;
    }

    @Override
    public void setAlpha(@IntRange(from = 0, to = 255) int alpha) {

    }

    @Override
    public void setColorFilter(@Nullable ColorFilter colorFilter) {

    }

    @Override
    public int getOpacity() {
        return PixelFormat.UNKNOWN;
    }
}

实现代码如下即可实现指示器修改，存在的问题是系统画的下划线仍然存在，需要在布局将其隐藏

 View view1 = mTabLayout.getChildAt(0);
 view1.setBackgroundDrawable(new ProxyDrawable(view1));

其中app:tabBackground=”@null”去除tab点击的阴影效果
app:tabIndicatorColor=”@null”去除tab的下划线
布局代码对比如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.philos.tablayoutdrawproxydemo.MainActivity"
    android:orientation="vertical">
    <android.support.design.widget.TabLayout
        android:id="@+id/tab0"
        android:layout_marginBottom="16dp"
        android:background="@color/colorPrimaryDark"
        app:tabBackground="@null"
        app:tabIndicatorColor="@null"
        app:tabSelectedTextColor="@color/colorAccent"
        android:layout_width="match_parent"
        android:layout_height="45dp"/>

    <android.support.design.widget.TabLayout
        android:id="@+id/tab"
        android:layout_marginBottom="16dp"
        android:background="@color/colorPrimaryDark"
        app:tabBackground="@null"
        app:tabSelectedTextColor="@color/colorAccent"
        android:layout_width="match_parent"
        android:layout_height="45dp"/>

    <android.support.design.widget.TabLayout
        android:id="@+id/tab1"
        android:layout_marginBottom="16dp"
        app:tabMode="fixed"
        app:tabMaxWidth="150dp"
        app:tabPadding="8dp"
        android:background="@color/colorPrimaryDark"
        app:tabBackground="@null"
        app:tabIndicatorColor="@null"
        app:tabSelectedTextColor="@color/colorAccent"
        android:layout_width="match_parent"
        android:layout_height="45dp"/>
</LinearLayout>

这样就巧妙实现了TabLayout的指示器更改，本来昨晚写这篇博客的，没想到我们家喵大人过来霸占了电脑，然后只能早上起来写了。。。。标题有点过了，请大家海涵。。。。。

附一张我们家起司的萌照