码迷，mamicode.com
首页 > 其他好文 > 详细

TabLayout设置下划线(Indicator)宽度

时间：2018-06-19 16:16:24      阅读：156      评论：0      收藏：0      [点我收藏+]

标签：设置   www   download   cat   style   val   解决方案   csdn   tcl   

再战TabLayout之下划线宽度

这周的需求搞定之后，想到之前有一个小瑕疵，反正没什么事，索性较量较量

 

如图官方原版就是小瑕疵，反射版本就是最终技术分享图片

 

解决方案-Demo源码

先讲解决方案。直接贴代码(要在tabLayout添加完所有的tab后调用)

 

[java] view plain copy
  1. public void reflex(final TabLayout tabLayout){  
  2.     //了解源码得知 线的宽度是根据 tabView的宽度来设置的  
  3.     tabLayout.post(new Runnable() {  
  4.         @Override  
  5.         public void run() {  
  6.             try {  
  7.                 //拿到tabLayout的mTabStrip属性  
  8.                 LinearLayout mTabStrip = (LinearLayout) tabLayout.getChildAt(0);  
  9.   
  10.                 int dp10 = dip2px(tabLayout.getContext(), 10);  
  11.   
  12.                 for (int i = 0; i < mTabStrip.getChildCount(); i++) {  
  13.                     View tabView = mTabStrip.getChildAt(i);  
  14.   
  15.                     //拿到tabView的mTextView属性  tab的字数不固定一定用反射取mTextView  
  16.                     Field mTextViewField = tabView.getClass().getDeclaredField("mTextView");  
  17.                     mTextViewField.setAccessible(true);  
  18.   
  19.                     TextView mTextView = (TextView) mTextViewField.get(tabView);  
  20.   
  21.                     tabView.setPadding(0, 0, 0, 0);  
  22.   
  23.                     //因为我想要的效果是   字多宽线就多宽，所以测量mTextView的宽度  
  24.                     int width = 0;  
  25.                     width = mTextView.getWidth();  
  26.                     if (width == 0) {  
  27.                         mTextView.measure(0, 0);  
  28.                         width = mTextView.getMeasuredWidth();  
  29.                     }  
  30.   
  31.                     //设置tab左右间距为10dp  注意这里不能使用Padding 因为源码中线的宽度是根据 tabView的宽度来设置的  
  32.                     LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) tabView.getLayoutParams();  
  33.                     params.width = width ;  
  34.                     params.leftMargin = dp10;  
  35.                     params.rightMargin = dp10;  
  36.                     tabView.setLayoutParams(params);  
  37.   
  38.                     tabView.invalidate();  
  39.                 }  
  40.   
  41.             } catch (NoSuchFieldException e) {  
  42.                 e.printStackTrace();  
  43.             } catch (IllegalAccessException e) {  
  44.                 e.printStackTrace();  
  45.             }  
  46.         }  
  47.     });  
  48.   
  49. }  




 

 

问题解决思路

第一反应是找系统的方法和属性

发现只有设置tabIndicatorHeight的属性 并没有宽度的属性

 

接着百度，一百度就看到几个博客，宣称可以解决这个问题，我们先看看他们的解决方案

 

传送门这种解决方案仅限于所有的tabView的text字数都是相同字数，比如所有的图中所有的tab字数都是2个。其实思路是错的，没有研究源码详细实现

 

他的思路是设置tabView的padding为0，并且设置了margin

 

这种方案错误的原因是，tablayout会强制设置tabView的宽度为  几个tabView中最宽的宽度，比如4个字的tabview和2个字的tabview的组合，两个tabview的宽度强制为4个字的tabview的宽度

 

 下面会证实这一点

 

技术分享图片

 

 

那只有查源码了呗，tab的创建是 tablayout.addTab();方法构造的 具体代码如下

[java] view plain copy
  1. tabLayout.addTab(tabLayout.newTab().setText("生鲜食品"));  



直接查这个方法，通过几个重载方法(addTab(Tab tab)->addTab(Tab tab,boolean setSelected)->addTab( Tab tab, int position, boolean setSelecte);  跳转如下代码


技术分享图片

 

从注释看就是添加一个tab到这个layout上  具体实现是在addTabView(Tab tab)里面，继续看这个方法

 

技术分享图片

 

可以看到最后添加到mTabStrip中，我们再来看看TabView里面有什么东西

 

技术分享图片

 

光从属性可以看出TabView可以自定义的，而且并没有发现Indicator线的痕迹，我猜测他可能放在layout(mTabStrip)里面，因为我以前写这样效果  这样写过，那我们就来看mTabStrip

 

技术分享图片

 

查看类中，发现mSelectedIndicatorHeight，眼睛一亮，下划线高度！！，就是画线的地方。追踪mIndicatorLeft和mIndicatorRight的来路，几经追踪，发现如下代码

 

技术分享图片

 

如图，selectedTitle就是TabView，直接获取了左边坐标和右边坐标，也就说是线的宽度就是tabview的宽度，那疑问又来了，为什么我们两个字的tabView和4个字的tabView是一样宽度，先去看看SlidingTabStrip的onMeasure方法，如下图

 

技术分享图片

 

我日，我怎么感觉写TabLayout这个类的人是强迫症，有没有？第一个for循环干的事就是记录下来，所有tabView中的最大宽度，第二个循环就是把所有的tabView的宽度设置为第一个循环得到的最大宽！！！

 

罪魁祸首是找到了，这时候能动态代理一个重写onMeasure方法的SlidingTabStrip对象塞进去，也可以解决这个问题，你会发现SlidingTabStrip是private的！！！！！！！

 

思路一转，系统是强制设置所有tabview的宽度为 最宽那个tabview的宽度，那我重新设置一遍tabView的宽度即可，解决问题(其实中间还尝试过调用setIndicatorPosition方法，但是系统源码，在多个时期调用这个方法，所以毙掉了)

那最上面的解决方案就来了

 

1、通过反射拿到SlidingTabStrip，通过遍历拿到tabview，继续通过反射拿到textview，然后设置Tabview的宽度为textview的宽度

 

2、为了美观我们可以设置一下tabview的margin，不设置会连在一起

 

转载 https://blog.csdn.net/qq_35473951/article/details/78653567

TabLayout设置下划线(Indicator)宽度

标签：设置   www   download   cat   style   val   解决方案   csdn   tcl   

原文地址：https://www.cnblogs.com/Android-FJH/p/9198453.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！