关于TabLayout的indicator宽度的一次探索

最新推荐文章于 2024-05-15 18:21:46 发布

JasonGaoH

最新推荐文章于 2024-05-15 18:21:46 发布

阅读量3.4k

点赞数 4

分类专栏： Android进阶文章标签： TabLayout Indicator 反射自定义TabLayout

本文链接：https://blog.csdn.net/H_Gao/article/details/79784325

版权

本文探讨了如何解决TabLayout的indicator宽度与Tab文字等宽的问题，通过反射设置Tab的Margin值、修改TabView的Margin以及自定义TabLayout源码来实现。详细介绍了三种方法的实现原理及效果，提供了Demo地址。

摘要由CSDN通过智能技术生成

本文的微信公众号链接：关于TabLayout的indicator宽度的一次探索

关于TabLayout，做过android开发的都知道，在android开发中应用特别广泛。这里来简单记录一下前不久遇到的关于TabLayout的一个问题。

先来看看下面一张图，

[外链图片转存失败(img-1dwBvvQQ-1569121977316)(https://raw.githubusercontent.com/JasonGaoH/Images/master/tablayout_1.png)]
这是我们app首页顶部的部分截图，典型的TabLayout的应用场景，现在遇到一个问题，设计需要TabLayout的indicator的宽度能够与Tab的文字等宽，甚至需要比文字的宽度短。

那么现在就需要想办法解决这个问题了，另外需要注意的是，这里的TabLayout是与ViewPager绑定的，需要兼容原来的TabLayout的的逻辑。

首先，想想能否在原生TabLayout的基础上，做一些调整。查看TabLayout的源码，我们发现TabLayout的有一个私有内部类SlidingTabStrip，这个SlidingTabLayout继承自LinearLayout，TabLayout的每个Tab的indicator就是由这个类负责绘制的。

SlidingTabStrip的draw方法：
[外链图片转存失败(img-Q9BAdtL2-1569121977317)(https://raw.githubusercontent.com/JasonGaoH/Images/master/tablayout_0.png)]

可以看到，Tab的indicator的是SlidingTabStrip绘制的一个Rect，这个Rect的宽度是由IndicatorLeft和mIndicatorRight来决定的，看到上面截图的第一个箭头所指的地方，注意到这两行代码left = selectedTitle.getLeft(); right = selectedTitle.getRight();基本可以确定每个Indicator的宽度是和每个Tab的宽度确定的。所以，可以考虑针对这个特点做点调整。

第一种方法：通过反射设置TabLayout每个Tab的Margin值来实现压缩Tab的indicator宽度的效果。

链接地址：方法一

主要代码如下：

tabLayoutThree.post(new Runnable() {
            @Override
            public void run() {
                try {
                    Class<?> tablayout = tabLayoutThree.getClass();
                    Field tabStrip = tablayout.getDeclaredField("mTabStrip");
                    tabStri