掘金之路(九)自定义 TabLayout 的 indicator 样式

156 阅读1分钟

项目地址:https://gitee.com/cbfg5210/TabLayoutDemo

使用控件 <com.google.android.material.tabs.TabLayout> 的时候往往要自定义 indicator 的效果,本 demo 通过 xml drawable 的方式来自定义 indicator 的样式,以供后续使用作为参考。

先来看下项目的运行截图(Android 4.4 模拟器):

screeshot.png

其中,
第一个 TabLayout 是默认的效果;
第二个 TabLayout 的 tabIndicator 传入了一个 shape 定义的 drawable(shape_indicator.xml);
第三个 TabLayout 的 tabIndicator 传入了一个 layer-list 定义的 drawable(ll_indicator.xml);
第四个 TabLayout 的 tabIndicator 传入了一个 inset 定义的 drawable(inset_indicator.xml);

最后两个用的是从 TabLayout 源码 copy 出来,注释了其中 selectedIndicatorPaint 的一段代码实现的 FixedTabLayout,其中:
第五个 FixedTabLayout 的 tabIndicator 传入了一个 inset 定义的 drawable(inset_indicator.xml);
第六个 FixedTabLayout 的 tabIndicator 传入了一个 shape 定义的渐变 drawable(shape_gradient_indicator.xml);

点这里前往页面布局

FixedTabLayout 中注释的代码片段见下图:

code.png