优雅地修改 TabLayout 指示线 Indicator 的宽度

声明:别人的,解决了我的问题,拿过来以后自己查看,感谢,希望能帮到别人,附上链接

https://cloud.tencent.com/developer/article/1460300

本文总结了几种修改 Indicator 宽度的方案,并讨论如何「优雅」地修改它。

反射

如果你的项目中也有修改指示线宽度的需求,并且已经在网上找过修改方法,很可能你现在项目中用的就是这个方法。网上大部分文章都是通过分析源码,用反射实现的,代码如下:

publicvoidsetIndicatorWidth(@NonNull final TabLayout tabLayout,final int margin){tabLayout.post(newRunnable(){@Overridepublicvoidrun(){try{Field mTabStripField=tabLayout.getClass().getDeclaredField("mTabStrip");mTabStripField.setAccessible(true);LinearLayout mTabStrip=(LinearLayout)mTabStripField.get(tabLayout);for(int i=0;i<mTabStrip.getChildCount();i++){View tabView=mTabStrip.getChildAt(i);Field mTextViewField=tabView.getClass().getDeclaredField("mTextView");mTextViewField.setAccessible(true);TextView mTextView=(TextView)mTextViewField.get(tabView);tabView.setPadding(0,0,0,0);int width=mTextView.getWidth();if(width==0){mTextView.measure(0,0);width=mTextView.getMeasuredWidth();}LinearLayout.LayoutParams params=(LinearLayout.LayoutParams)tabView.getLayoutParams();params.width=width;params.leftMargin=margin;params.rightMargin=margin;tabView.setLayoutParams(params);tabView.invalidate();}}catch(NoSuchFieldExceptione){e.printStackTrace();}catch(IllegalAccessExceptione){e.printStackTrace();}}});}复制代码

这样做是没问题的,但如果把项目的 SDK 升级到 28 或以上,它就不再有效了,原因是 TabLayout 源码中的变量名修改了,所以代码也要改成这样:

publicvoidsetIndicatorWidth(@NonNull final TabLayout tabLayout,final int margin){tabLayout.post(newRunnable(){@Overridepublicvoidrun(){try{Field slidingTabIndicatorField=tabLayout.getClass().getDeclaredField("slidingTabIndicator");slidingTabIndicatorField.setAccessible(true);LinearLayout mTabStrip=(LinearLayout)slidingTabIndicatorField.get(tabLayout);for(int i=0;i<mTabStrip.getChildCount();i++){View tabView=mTabStrip.getChildAt(i);Field textViewField=tabView.getClass().getDeclaredField("textView");textViewField.setAccessible(true);TextView mTextView=(TextView)textViewField.get(tabView);tabView.setPadding(0,0,0,0);int width=mTextView.getWidth();if(width==0){mTextView.measure(0,0);width=mTextView.getMeasuredWidth();}LinearLayout.LayoutParams params=(LinearLayout.LayoutParams)tabView.getLayoutParams();params.width=width;params.leftMargin=margin;params.rightMargin=margin;tabView.setLayoutParams(params);tabView.invalidate();}}catch(NoSuchFieldExceptione){e.printStackTrace();}catch(IllegalAccessExceptione){e.printStackTrace();}}});}复制代码

通过反射虽然可以实现,但我个人觉得反射不够优雅,并且它有可能因为 SDK 的升级而失效。

自定义 Tab

TabLayout 中的 Tab 是允许自定义的,但 Indicator 不属于 Tab。

所以有这样一种解决方案,把 Indicator 隐藏掉,然后在自定义 Tab 的布局中加入指示线。

我们可以通过把 Indicator 的颜色设为透明来隐藏它:

<android.support.design.widget.TabLayout    android:id="@+id/tab_layout"android:layout_width="match_parent"android:layout_height="wrap_content"app:tabIndicatorColor="@android:color/transparent"/>复制代码

在代码中,当 Tab 添加完毕后,替换成自定义的 Tab:

TabLayout.Tab tab=tabLayout.getTabAt(i);tab.setCustomView(R.layout.layout_tab);TextView tv=tab.getCustomView().findViewById(R.id.text_view);tv.setText(tab.getText());复制代码

并且还需要监听 Tab 的切换,控制指示线的显示隐藏:

tabLayout.addOnTabSelectedListener(newTabLayout.OnTabSelectedListener(){@OverridepublicvoidonTabSelected(TabLayout.Tab tab){// TODO Tab 被切换,刷新所有 Tab}@OverridepublicvoidonTabUnselected(TabLayout.Tab tab){}@OverridepublicvoidonTabReselected(TabLayout.Tab tab){}});复制代码

用这种方法,什么样式都能实现了。但有个缺点是,在 Tab 切换的时候,没有了指示线的移动动画。

SDK 28+ 属性配置

如果你使用的 SDK 版本是 28 或以上,并且需要将 Indicator 的宽度修改成和文字宽度一样,那么太棒了,现在你只需要给 TabLayout 配置一个属性就好了:

<android.support.design.widget.TabLayout    android:id="@+id/tab_layout"android:layout_width="match_parent"android:layout_height="wrap_content"app:tabIndicatorFullWidth="false"/>复制代码

当 tabIndicatorFullWidth 取 false 的时候,Indicator 的宽度会和文字的宽度一样,但这也意味着,当不同 Tab 里的文字宽度不一样时,Indicator 的宽度也会不一样,像下面这样。


如果设计要求 Indicator 的宽度必须固定,或者宽度要比文字短,那我们还要接着找别的解决方案。

使用 Drawable 样式

最后这种方案,是我认为最优雅的解决方案,使用也特别简单。在网上还没看到有人使用,可以算是我的原创了,哈哈。

Indicator 是允许我们设置 drawable 来自定义样式的,比如添加圆角什么的。但无论什么样式,Indicator 依然是占满 Tab 宽度的。没关系,我们把它的背景设成透明,包含一个固定宽度的 shape 就好了,像这样:

<?xml version="1.0"encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle"><item android:gravity="center"><shape><size                android:width="16dp"android:height="4dp"/><corners android:radius="4dp"/><solid android:color="@color/colorAccent"/></shape></item></layer-list>复制代码

然后在布局文件中配置 tabIndicator 属性:

<android.support.design.widget.TabLayout    android:id="@+id/tab_layout"android:layout_width="match_parent"android:layout_height="wrap_content"app:tabIndicatorHeight="10dp"app:tabIndicator="@drawable/tab_indicator"/>复制代码

也可以在代码中设置:

tabLayout.setSelectedTabIndicator(R.drawable.tab_indicator);复制代码

效果如下:


从上面这个例子还可以发现,使用这个方法,不仅可以在视觉上增加 Indicator 的左右边距,还可以增加它的上下边距。

好啦,其实就是配置一个 Drawable 文件这么简单,只是发现网上不少人在问,但还没有人用这个方法解决,在这里和大家分享一下。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,088评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,715评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,361评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,099评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 60,987评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,063评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,486评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,175评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,440评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,190评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,550评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2 335

推荐阅读更多精彩内容