关于Android改变TabLayout 下划线宽度实践总结

TabLayout我们再熟悉不过了，在开发中，像这种tab切换的需求都会用到TabLayout,它是由官方提供的一个控件，在support design 包中。使用起来非常简单方便，交互效果也很不错，能满足我们开发中95%的需求。但是它有一个缺陷：不能改变Tab下划线（Indicator）的宽度。本篇文章给你带来改变Tab下划线宽度的几种方式:

一、通过反射的方式，改变TabLayout下划线的宽度

首先我们看一下原生的TabLayout的效果（没有任何修改）：

Tablayout.png

gif演示：

gif演示.gif

上图第一个固定模式（tabMode:fixed）,下面是滚动模式(tabMode:scrollable),可以看到，所有Tab下方的线（即Indicator）是一样长的，不管Tab的内容是长还是短。Tab indicator的长度与最长的Tab保持一致。

TabLayout提供了 属性来设置indicator的高度，但是没有提供设置宽度的的api，要想改变indicator的宽度，就得去看看源码indicator是怎么实现的。简单的看一下源码：

思维导图.png

如上思维导图，其中有两个重点的东西， 和 ,就是我们所看到的Tab，是的父容器，继承自,用来处理Tab滑动相关操作，如动画，绘制Indicator等。

我们要研究indicator是怎么添加的，重点就在 里了，这里我们看到了，这就是我们设置Indicator的高度，在方法里有如下代码：

这就是绘制的选中Tab的Indicator,高度是,宽是mIndicatorRight - mIndicatorLeft 。那么者两个值是从哪儿来的呢？在方法中：

从上面的代码就可以看出，Indicator（Tab选中下划线）的宽度其实就是TabView的宽度，那么TabView的宽度是多少呢？在的方法中，为TabView设置了宽度。请看代码：

这个方法很简单，一看就明白，有两个步骤：

这就知道为什么前面提到的所有Tab 一样宽，不管长的还是短的。

如果是MODE_FIXED，并且GRAVITY_FILL，则设置weight=1，所有TabView平分屏幕宽度，MODE_SCROLLABLE ，设置的 。

反射改变下划线宽度

思路：知道了绘制Indicator的宽度是根据的宽度来决定的，那么我们设置的宽度就能改变indicator的宽，的宽由其中的决定，因此，通过反射得到，设置它的宽度，就能改变Indicator的宽度，这也是网上看到的大多数的解决方法。

上代码：

效果图如下：

改变长度的Indicator演示.gif

提醒：这种方式改变Indicator最短也就Tab内容的宽度，如果设置很短，Tab内容就显示不下,如下图：

Tab内容显示不下.png

二、通过TabLayout setCustomView 的方式

第一种通过反射的方式设置Indicator宽度，最短只能Tab内容的宽度，如果设计师要所有选中的Tab下的Indicator都设置一个指定的宽度，这种就不行了。TabLayout可以设置自定义View，可以通过这种方法来达到目的。

首先看布局：

:

Tab item 布局：

如上，TextView显示Tab内容，下面的View就是Tab下面的Indicator（下划线）。

自己定义的View,宽度随便你改。

添加Tab的时候使用setCustomView 方法：

然后在onTabSelected中处理状态：

代码其实挺简单的，但是如果项目中多处使用到，都这样来处理的话，就显得麻烦，因此，我们通过自定义View的方式将这些代码疯转成1个通用的TabLayoutView。如下：

暴露了一些常用方法和原生TabLayout 的几个重要属性，自定义属性如下：

好了，这样就封装了一个可以改变Indicator 宽度的TabLayout，看一下怎么用，xml布局如下：

Activity中代码如下：

注意，如果是配合ViewPager使用，需要下面两行代码，单独使用则不需要：

最后看一下效果：(图中第二个TabLayout)

自定义View方式.gif

三、第三方开源库

如果前面2中方式都满足不了你的需求的话，你可以使用第三方库，也有一些不错的开源库，这里推荐2个。

**1 , MagicIndicator **

github:https://github.com/hackware1993/MagicIndicator

star:4.4k

MagicIndicator ,使用方便，还有多种模式可以选择。包括：

indicator.png

有兴趣的可以去试一下。

布局文件：

代码中：

效果图如下，图中最后一个TabLayout:

MagicIndicator.gif

2 , FlycoTabLayout

github:https://github.com/H07000223/FlycoTabLayout

star:6.5k

功能和MagicIndicator差不多，都支持多种Indicator效果：

FlycoTabLayout.gif

具体使用请看github 详细介绍。

四、总结

本文总结了改变TabLayout下划线（indicator）宽度的几种方式，使用的时候根据自己的需求选择，在原生控件能做的情况下，尽量使用原生控件，毕竟导入三方库需要一些额外的成本。如果你还有更好的方式，欢迎评论区留言讨论。

谢谢赞赏

如果你觉得本文对你有帮助，请分享给更多的人

关注【Android技术杂货铺】，每天都有Android 干货文章分享！