【Android】TabLayout 自定义指示器 Indicator 样式

app:tabIndicatorHeight=“2dp”

app:tabIndicatorColor=“@color/colorPrimary”

app:tabIndicator=“@drawable/indicator”
app:tabMode=“scrollable” />

3. 给 Indicator 设置圆角

如果不需要边距，只需要圆角，可以配合 app:tabIndicatorFullWidth 属性，使用 shape 设置 app:tabIndicator 来实现圆角即可，无需使用 layer-list，代码就不用贴了吧~

这里为了使效果看得明显一点，把 Indicator 的高度设置为 5dp。 给 Indicator 添加了 5dp 的圆角：

<?xml version="1.0" encoding="utf-8"?>

4. 给 Indicator 设置宽高

4.1 在 <shape> 的 <size> 标签里设置宽高（API 23 以上）：

<?xml version="1.0" encoding="utf-8"?>

4.2 在 layer-list 里给 <item> 标签设置宽高（API 23 以上）：

<?xml version="1.0" encoding="utf-8"?>

5. tabIndicator 属性源码分析

TabLayout 的 tabIndicator 属性里设置的 layer-list 不支持设置颜色。 我们查看一下 TabLayout 的源码，搜索 TabLayout_tabIndicator：

this.setSelectedTabIndicator(MaterialResources.getDrawable(context, a, styleable.TabLayout_tabIndicator));

setSelectedTabIndicator() 方法：

搜索一下使用 tabSelectedIndicator 的地方，在 SlidingTabIndicator 类里的 draw() 方法里： 第 1 处 tabSelectedIndicator

再看一下 selectedIndicatorHeight 是什么：

selectedIndicatorHeight 是在布局里给 TabLayout 设置的 tabIndicatorHeight 属性。

可见如果我们在布局里给 TabLayout 设置了 tabIndicatorHeight 属性，则 Indicator 高度优先取 tabIndicatorHeight 设置的高度；否则才会取咱们自定义的 drawable 里的高度。

继续，第 2 处 tabSelectedIndicator

黄色方框里可以发现，为什么之前在 drawable 里设置的颜色无效了，因为使用的是 TabLayout_tabIndicatorColor 属性里设置的颜色，所以 <stroke> 也无效，只保留了整体的形状样式。

6. 自定义复杂的 Indicator 样式

如果需要复杂一点的样式，比如 <stroke> 。 先写一个 tab 被选中时的样式 indicator.xml：

<?xml version="1.0" encoding="utf-8"?>

还需要一个 selector.xml：

<?xml version="1.0" encoding="utf-8"?>

接下来，我们要设置的是 tabBackground，也就是 tab 标签的背景，而不再是tabIndicator，所以要把 Indicator 的高度设为 0 ，不使用 tab 原生的 Indicator。

这里还要注意一下 tabRippleColor 属性，是设置点击 tab 标签时的波纹颜色，不设置的时候，默认是灰色的，文章前面的截图里有显示效果。如果想去掉这个效果，设置颜色为透明即可。

<android.support.design.widget.TabLayout
android:id=“@+id/tl”
android:layout_width=“match_parent”
android:layout_height=“wrap_content”

app:tabBackground=“@drawable/selector”

app:tabIndicatorHeight=“0dp”
app:tabMode=“scrollable”

最后是今天给大家分享的一些独家干货：

【Android开发核心知识点笔记】

【Android思维脑图（技能树）】

【Android核心高级技术PDF文档，BAT大厂面试真题解析】

【Android高级架构视频学习资源】
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！

[外链图片转存中…(img-hIkNefzN-1715156613913)]

【Android高级架构视频学习资源】
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！