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 干货文章分享!
领取专属 10元无门槛券
私享最新 技术干货