锐客网

  1. 首页 > it技术 > >

TabLayout的下划线

TabLayout作为官方顶部导航栏是非常好用的，但是有个问题，下划线只能设置高度，不能设置宽度，如果标签较多还好，但遇到三个标签时候就不太好看了，线太长了。
TabLayout的下划线
文章图片
tab.png 解决方案
第一种思路 通过反射拿到TabLayout里的的每个tab，然后再修改相应Margin的值，来达到效果，但是可能会压缩字体的大小
第二种思路 0.不会影响TabLayout里的属性值

  1. 依旧需要通过反射拿到TabLayout里的属性
  2. 不使用自带下划线，自己定义一个TabIndicator当做下划线使用
  3. 利用ViewPager的监听，不断的修改TabIndicator的值
    这里又分两种思路
    。不断的改变TabIndicator的Margin
    。不断移动TabIndicator
    不断改变Margin这个方案需要每次都把 TabIndicator的宽高等属性设置一遍，我觉得效率不高，下面展示第二种方案
以下代码仅仅适用于tabMode="fixed"和 app:tabGravity="fill"的情况下，如果是scrollable，那么还要考虑整个TabLayout的滑动，但是TabLayout滑动的前提是Tab多到超出屏幕的宽度，这时候TabLayout自带的下划线是可以满足需求的 如果是fill，那为何不为TabLayout设置左右Margin来达到同样效果呢 `


`
`
//拿到tabLayout的mTabStrip属性 mTabLayout.post(new Runnable() { @Override public void run() { try { Field mTabStripField = mTabLayout.getClass().getDeclaredField("mTabStrip"); mTabStripField.setAccessible(true); mTabStrip = (LinearLayout) mTabStripField.get(mTabLayout); Log.e("tag", "mTabStrip: " + mTabStrip.getWidth()); mTabStrip.setBackgroundResource(R.color.colorAccent); // 易于观察结构 View tabView = mTabStrip.getChildAt(0); //拿到tabView的mTextView属性 Field mTextViewField = tabView.getClass().getDeclaredField("mTextView"); mTextViewField.setAccessible(true); TextView mTextView = (TextView) mTextViewField.get(tabView); tabView.setBackgroundResource(R.color.colorPrimary); // 易于观察结构 mTv_width = mTextView.getWidth(); //获得的宽度 mTv_left = mTextView.getLeft(); //获得离左边的默认距离//设置默认的Indicator的位置 RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams( RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT); layoutParams.width = mTv_width; layoutParams.height = 5; layoutParams.topMargin = mTabStrip.getBottom(); Log.e("tag", "left: " + mTabLayout.getLeft() + "" + mTextView.getLeft()); //TabLayout的左边距+ Textview的左边距 等于 默认Tab=0的 Indicator的位置 mDefalut_selected = mTabLayout.getSelectedTabPosition(); //根据默认的位置，算出起始边距 mLeftMargen_defalut = mTabLayout.getLeft()+mTextView.getLeft()+(mTextView.getLeft()*2+mTv_width)*mDefalut_selected+correct; layoutParams.leftMargin = mLeftMargen_defalut; setLayoutParams(layoutParams); //两个tab文本之间的距离 mBasic = mTv_left * 2 + mTv_width; } catch (Exception e) { e.printStackTrace(); }} });

【TabLayout的下划线】`
`
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener()
{ float scale = 5; //缩放系数 @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { int index = mTabLayout.getSelectedTabPosition(); Log.e("tag", "position：" + position + "positionOffset: " + positionOffset + "positionOffsetPixels: " + positionOffsetPixels); Log.e("tag", "position：" + position + "mDefalut_selected: "+mDefalut_selected); if (mTabStrip == null || positionOffset == 0) { return; } //这里是给TabIndicator增加一个简单的缩放效果 if (positionOffset < 0.5) { setScaleX(1 + positionOffset * scale); } else { setScaleX(1f+0.5f*scale - (positionOffset-0.5f)*scale); } Log.e("basic","basic: "+mBasic); //当前position大于默认的position 需要将TabIndicator向右移动 if(position>=mDefalut_selected){ if(position==mDefalut_selected){ setTranslationX(mBasic*positionOffset); }else { float correct = 1.5f; //可能是精度问题造成的些许偏差 setTranslationX((mBasic+correct)*(position-mDefalut_selected)+mBasic*positionOffset); } }else if(position

`
效果如下

TabLayout的下划线
文章图片
image.png 总结: 针对正常需求，这样解决思路我认为还可以，但是碰到 tab文本长度不一样，且下划线必须大小一致 那就在反射的时候存储每个tab的width等属性，在滑动的时候再拿出来。

    推荐阅读


    上一篇：“一个桶”观后感

    下一篇：迷茫的时候应该做点什么