修改TabLayout的下划线指示器长度

TabLayout用过的小伙伴都知道,在默认的情况下它的下划线指示器长度是与你的标题长度对应的,像下方图示一样:

修改TabLayout的下划线指示器长度_第1张图片

为什么会这样呢?查看源码你就会发现:这个下划线指示器的宽度使用的是 所有tabView中的最大宽度(循环读取所有tabView,获取最大宽度),而且TabLayout本身并没有提供设置这个指示器宽度的方法。而现在问题来了,如果需要修改这个宽度该怎么样做呢?

接下来介绍两种方法:

第一种:仅限于所有的tabView的text字数都是相同字数,比如所有的图中所有的tab字数都是2个

直接上代码,具体解释请看注释

```

/**

* 通过反射机制 修改TabLayout 的下划线长度

*/

public void setIndicator (TabLayout tabs,int leftDip,int rightDip) {

//通过反射获取到

    Class tabLayout = tabs.getClass();

    Field tabStrip =null;

    try {

tabStrip = tabLayout.getDeclaredField("mTabStrip");

    }catch (NoSuchFieldException e) {

e.printStackTrace();

    }

//设置模式

    tabStrip.setAccessible(true);

    //获得tabview

    LinearLayout llTab =null;

    try {

llTab = (LinearLayout) tabStrip.get(tabs);

    }catch (IllegalAccessException e) {

     e.printStackTrace();

    }

//设置tabView的padding为0,并且设置了margin

    int left = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, leftDip, Resources.getSystem().getDisplayMetrics());

    int right = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, rightDip, Resources.getSystem().getDisplayMetrics());

    for (int i =0; i < llTab.getChildCount(); i++) {

View child = llTab.getChildAt(i);

        child.setPadding(0, 0, 0, 0);

        LinearLayout.LayoutParams params =new LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.MATCH_PARENT, 1);

        params.leftMargin = left;

        params.rightMargin = right;

        child.setLayoutParams(params);

        child.invalidate();

    }

}

```

然后使用的话,直接调用方法即可.必须要在Tablayout渲染出来后调用,我们可以选择view.post()方法来实现,比如:

```

//设置下划线长度

tabLayout.post(new Runnable() {

@Override

    public void run() {

      setIndicator(tabLayout,60,60);

    }

});

```

到此这种方法就搞定啦,这个时候再运行程序你就会看到效果:

修改TabLayout的下划线指示器长度_第2张图片
效果图

这种思路是设置tabView的padding为0,并且设置了margin,其实这种方案是错误的,他并没有真正的去修改指示器宽度,而且它影响了tabview之间的间距,如果tabview多的话会被挤出去,它仅限于字数一样的原因是:如果字数不一样,tablayout会强制设置tabView的宽度为 几个tabView中最宽的宽度,比如4个字的tabview和2个字的tabview的组合,两个tabview的宽度j将会强制为4个字的tabview的宽度。

因此这种解决方法适用性很差,像这种tabview个数不多的情况倒是可以使用这种。接下来我们看看第二种方法:

第二种:在第一种基础上改进,适应性相对好很多

首先我们看默认的效果是什么样的:


未做修改时效果图

刚开始我们就提到了,源码中 线的宽度是根据 tabView的宽度来设置的,那我们可以根据这个来入手,通过反射拿到SlidingTabStrip,再通过遍历拿到tabview,继续通过反射拿到textview,然后设置Tabview的宽度为textview的宽度,这样就改变了指示器的宽度:看代码

```

public void setIndicatorWidth(final TabLayout tabLayout){

//从源码得知 线的宽度是根据 tabView的宽度来设置的

    tabLayout.post(new Runnable() {

@Override

        public void run() {

try {

//拿到tabLayout的mTabStrip属性

                LinearLayout mTabStrip = (LinearLayout)tabLayout.getChildAt(0);

                //将dp转换成px

                int dp10 = MiscUtil.dipToPx(tabLayout.getContext(), 10);

                for (int i =0; i < mTabStrip.getChildCount(); i++) {

View tabView = mTabStrip.getChildAt(i);

                    //拿到tabView的mTextView属性  tab的字数不固定一定用反射取mTextView

                    Field mTextViewField = tabView.getClass().getDeclaredField("mTextView");

                    mTextViewField.setAccessible(true);

                    TextView mTextView = (TextView) mTextViewField.get(tabView);

                    tabView.setPadding(0, 0, 0, 0);

                    //想要的效果是  字多宽线就多宽,所以测量mTextView的宽度

                    int width =0;

                    width = mTextView.getWidth();

                    if (width ==0) {

mTextView.measure(0, 0);

                        width = mTextView.getMeasuredWidth();

                    }

//设置tab左右间距 ,因为源码中线的宽度是根据tabView的宽度来设置的,所以得注意这里不能使用Padding

                    LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) tabView.getLayoutParams();

                    //指示器宽度值设置

                    params.width = width;

                    //设置一下tabview的margin,不设置会连在一起

                    params.leftMargin = dp10;

                    params.rightMargin = dp10;

                    tabView.setLayoutParams(params);

                    tabView.invalidate();

                }

}catch (NoSuchFieldException e) {

e.printStackTrace();

            }catch (IllegalAccessException e) {

e.printStackTrace();

            }

}

});

}

```

然后在Tablayout渲染出来后调用此方法即可。我们看看效果


设置后效果图

现在的效果就变成了字多宽指示器就多宽了。

这个效果我也是思考了挺久的,参考许多前辈的经验,总结了这篇文章,中间是否会有其他问题暂时还没有发现,大家要是有什么更好的办法,请评论指教一番,后续有什么问题我将及时更新的。另外热烈欢迎大家来留言讨论。

你可能感兴趣的:(修改TabLayout的下划线指示器长度)