TabLayout的下划线

TabLayout作为官方顶部导航栏是非常好用的，但是有个问题，下划线只能设置高度，不能设置宽度，如果标签较多还好，但遇到三个标签时候就不太好看了，线太长了。

tab.png

解决方案

第一种思路

通过反射拿到TabLayout里的的每个tab，然后再修改相应Margin的值，来达到效果，但是可能会压缩字体的大小

第二种思路

0.不会影响TabLayout里的属性值

1. 依旧需要通过反射拿到TabLayout里的属性
2. 不使用自带下划线，自己定义一个TabIndicator当做下划线使用
3. 利用ViewPager的监听，不断的修改TabIndicator的值
   这里又分两种思路
   。不断的改变TabIndicator的Margin
   。不断移动TabIndicator
   不断改变Margin这个方案需要每次都把 TabIndicator的宽高等属性设置一遍，我觉得效率不高，下面展示第二种方案

以下代码仅仅适用于tabMode="fixed"和 app:tabGravity="fill"的情况下，如果是scrollable，那么还要考虑整个TabLayout的滑动，但是TabLayout滑动的前提是Tab多到超出屏幕的宽度，这时候TabLayout自带的下划线是可以满足需求的

如果是fill，那为何不为TabLayout设置左右Margin来达到同样效果呢

`

`

`

    //拿到tabLayout的mTabStrip属性
    mTabLayout.post(new Runnable() {
        @Override
        public void run() {
            try {
                Field mTabStripField = mTabLayout.getClass().getDeclaredField("mTabStrip");
                mTabStripField.setAccessible(true);
                mTabStrip = (LinearLayout) mTabStripField.get(mTabLayout);

                Log.e("tag", "mTabStrip: " + mTabStrip.getWidth());
                mTabStrip.setBackgroundResource(R.color.colorAccent);       // 易于观察结构
                View tabView = mTabStrip.getChildAt(0);
                //拿到tabView的mTextView属性
                Field mTextViewField = tabView.getClass().getDeclaredField("mTextView");
                mTextViewField.setAccessible(true);
                TextView mTextView = (TextView) mTextViewField.get(tabView);
                tabView.setBackgroundResource(R.color.colorPrimary);        // 易于观察结构
                mTv_width = mTextView.getWidth();      //获得的宽度
                mTv_left = mTextView.getLeft();  //获得离左边的默认距离

                //设置默认的Indicator的位置
                RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(
                        RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
                layoutParams.width = mTv_width;
                layoutParams.height = 5;
                layoutParams.topMargin = mTabStrip.getBottom();
                Log.e("tag", "left: " + mTabLayout.getLeft() + "   " + mTextView.getLeft());
                //TabLayout的左边距+ Textview的左边距 等于 默认Tab=0的 Indicator的位置
                mDefalut_selected = mTabLayout.getSelectedTabPosition();
                //根据默认的位置，算出起始边距
                mLeftMargen_defalut = mTabLayout.getLeft()+mTextView.getLeft()+(mTextView.getLeft()*2+mTv_width)*mDefalut_selected+correct;
                layoutParams.leftMargin = mLeftMargen_defalut;
                setLayoutParams(layoutParams);
                //两个tab文本之间的距离
                mBasic = mTv_left * 2 + mTv_width;
            } catch (Exception e) {
                e.printStackTrace();
            }

        }
    });

`

`

mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener()

    {
        float scale = 5;        //缩放系数
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            int index = mTabLayout.getSelectedTabPosition();
            Log.e("tag", "position：" + position + "  positionOffset: " + positionOffset + "  positionOffsetPixels: " + positionOffsetPixels);
            Log.e("tag", "position：" + position + "  mDefalut_selected: "+mDefalut_selected);

            if (mTabStrip == null || positionOffset == 0) {
                return;
            }
            //这里是给TabIndicator增加一个简单的缩放效果
            if (positionOffset < 0.5) {
                setScaleX(1 + positionOffset * scale);
            } else {
                setScaleX(1f+0.5f*scale - (positionOffset-0.5f)*scale);
            }
            Log.e("basic","basic: "+mBasic);
          //当前position大于默认的position 需要将TabIndicator向右移动
            if(position>=mDefalut_selected){
                if(position==mDefalut_selected){
                    setTranslationX(mBasic*positionOffset);
                }else {
                    float correct = 1.5f;    //可能是精度问题造成的些许偏差
                    setTranslationX((mBasic+correct)*(position-mDefalut_selected)+mBasic*positionOffset);
                }
            }else if(position

`
效果如下

image.png

总结:

针对正常需求，这样解决思路我认为还可以，但是碰到 tab文本长度不一样，且下划线必须大小一致 那就在反射的时候存储每个tab的width等属性，在滑动的时候再拿出来。