博客

更新 2017.08.17

通过反射修改动画不够流畅，另外交互设计师还在增加分割线等要求…，基于TabLayout修改了代码写了自定义控件PPDTabLayout，支持调整下划线长度，增加了分割线

项目地址：

https://github.com/fengruisd/Hotpot

实现方法与原理

先上代码，这里是基于22的support包进行的反射，其他版本的代码没有去看，这里应该没有差别

public class MyActivity extends BaseActivity {


    private TabLayout tabLayout;

    // 通过反射改变下划线的长度
    private Field mIndicatorLeft;
    private Field mIndicatorRight;
    private View mTabStripObject;
    // 动画的最后位置会跳一下，原因没有分析出来，通过设置最小宽度限制一下
    private int minWidth;
    private final int positionOffset = 100;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 其他初始化代码
        ...
        changeTabLayoutLength();
    }

    private void changeTabLayoutLength() {
        minWidth = getResources().getDisplayMetrics().widthPixels / 4;
        try {
            Field mTabStrip = TabLayout.class.getDeclaredField("mTabStrip");
            mTabStrip.setAccessible(true);
            mIndicatorLeft = mTabStrip.getType().getDeclaredField("mIndicatorLeft");
            mIndicatorLeft.setAccessible(true);
            mIndicatorRight = mTabStrip.getType().getDeclaredField("mIndicatorRight");
            mIndicatorRight.setAccessible(true);
            mTabStripObject = (View) mTabStrip.get(tabLayout);
            mTabStripObject.getViewTreeObserver().addOnPreDrawListener(this);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    @Override
    public boolean onPreDraw() {
        try {
            int left = (int) mIndicatorLeft.get(mTabStripObject);
            int right = (int) mIndicatorRight.get(mTabStripObject);
            if(right - left - positionOffset * 2 > minWidth) {
                mIndicatorLeft.set(mTabStripObject, left + positionOffset);
                mIndicatorRight.set(mTabStripObject, right - positionOffset);
            }
        } catch (Exception e) {
        }
        return true;
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        try {
            mTabStripObject.getViewTreeObserver().removeOnPreDrawListener(this);
        } catch (Exception e) {
        }
    }
}

原理

TabLayout下划线是由SlidingTabScrip实现的，在animateIndicatorToPosition添加 了动画更新下划线位置，在onDraw方法中进行绘制，所以只要修改通过反射修改下划线的绘制位置就可以了，即mIndicatorLeft和mIndicatorRight。

这里还有一个小问题没有解决，在最后动画结束单独时候，这两个值会有一个跳动，估计是反射修改值之后影响了原来的计算，但是具体影响了哪里没有分析出来，所以在上面的实现代码中加了一个minWidth进行限制了取值范围，规避了这个问题。

TabLayout.java

    @Override
    protected void onDraw(Canvas canvas) {
        // Thick colored underline belowthe current selection
        if (mIndicatorLeft >= 0 && mIndicatorRight > mIndicatorLeft) {
            canvas.drawRect(mIndicatorLeft, getHeight() - mSelectedIndicatorHeight,
                    mIndicatorRight, getHeight(), mSelectedIndicatorPaint);
        }
    }