TabLayout自定义Indicator宽度(layer-list实现)

官方API所支持的Indicator宽度分为两种,一种是以所有TabItem中最大的一个宽度为基准,另一种是每个TabItem根据文字宽度自适应,指定app:tabIndicatorFullWidth="false/true"即可。

TabLayout自定义Indicator宽度(layer-list实现)_第1张图片

然而当我们需要把Indicator宽度设置为比TabItem文字更短的时候,搜索一番下来,都是千篇一律的利用反射或者copy官方源码自己修改,反射方案貌似并不是很好实现,而copy官方源码自定义,我也尝试了一下,涉及到的类非常多,工作量不小。


TabLayout自定义Indicator宽度(layer-list实现)_第2张图片

在坚持不使用第三方库的前提下,只是更改一个Indicator的样式而已,我觉得还能再抢救一下。最终还是发现有个非常简单且优雅的方案,那就是通过layer-list图层为app:tabIndicator属性指定一个自定义的drawable。

通过TabLayout源码我们也可以发现,TabLayout的Indicator是由SlidingTabIndicator负责绘制的,而SlidingTabIndicator继承自LinearLayout,内部是通过一个drawable来绘制Indicator的


TabLayout自定义Indicator宽度(layer-list实现)_第3张图片

app:tabIndicator设置的无论是什么样式,Indicator都是占满TabItem宽度的,所以我们可以在layer-list里加一个居中的shape,并指定宽高,就能够轻松实现对Indicator样式的自定义

TabLayout自定义Indicator宽度(layer-list实现)_第4张图片

Tips:单纯用shape是不行的,无法控制宽度

TabLayout自定义Indicator宽度(layer-list实现)_第5张图片

最终效果:

TabLayout自定义Indicator宽度(layer-list实现)_第6张图片

TabLayout自定义Indicator宽度(layer-list实现)_第7张图片

TabLayout自定义Indicator宽度(layer-list实现)_第8张图片

就是这么简单!


TabLayout自定义Indicator宽度(layer-list实现)_第9张图片

另外,这种方法只支持6.0及以上,在5.0和5.1无效,还是无法控制宽度

你可能感兴趣的:(TabLayout自定义Indicator宽度(layer-list实现))