学习
实践
活动
专区
工具
TVP
写文章

关于Android改变TabLayout 下划线宽度实践总结

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 干货文章分享!

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180604G0A4XY00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

关注

腾讯云开发者公众号
10元无门槛代金券
洞察腾讯核心技术
剖析业界实践案例
腾讯云开发者公众号二维码

扫码关注腾讯云开发者

领取腾讯云代金券