TabLayout的指示器宽度问题

2017-07-19 本文已影响368人 CysionLiu

最近碰到一个需求，因为是我比较感兴趣的TabLayout的，所以记录一下吧。

产品需求：希望上部导航栏中的指示器宽度略大于文字宽度；
技术方案：TabLayout配合ViewPager；
问题分析：原生TabLayout的指示器宽度等于每个tab的宽度，远大于 tab内文字标题的宽度。
原因分析：
TabLayout（TL）继承自HorizontalScrollView，其只能添加一个子控件，这个子控件便是TL内部私有类--SlidingTabStrip，其继承自LinearLayout。指示器怎么加上的呢？便是在该类的onDraw方法中：

 @Override
public void draw(Canvas canvas) {
   super.draw(canvas);
   // Thick colored underline below the current selection
  if (mIndicatorLeft >= 0 && mIndicatorRight > mIndicatorLeft) {
     canvas.drawRect(mIndicatorLeft, getHeight() - mSelectedIndicatorHeight, mIndicatorRight, getHeight(), mSelectedIndicatorPaint);
  }
}

即指示器是与这个SlidingTabStrip容器伴生存在，其宽度，由mIndicatorLeft和mIndicatorRight确定，而这二者，由tab的宽度决定，因为本文不会详细描述TL的源码，所以这里直接报出结论：这个指示器的宽度设置由tab宽度决定，而tab在mode=fix情况下，是符合linearLayout中weight控制的，因此，也没法通过tab的宽度来影响指示器的宽度，比较囧的是，源码中也没给tab设置个Margin什么的，另外，源码中也没有暴露set等方法来改变指示器宽度，否则也不会有此问题了。
解决方案1：
百度的方案基本集中在反射，使用麻烦，有时还不好用。
这个的思路来自stackoverflow，大致过程是由TL拿到其唯一的子类，即SlidingTabStrip，然后遍历再拿到其各子View，然后为每个子View设置Margin，这就相当于给每个tab设置margin，那么指示器的宽度自然也就跟着改变了。show code：

public static void reduceMarginsInTabs(TabLayout tabLayout, int marginOffset) {
       View tabStrip = tabLayout.getChildAt(0);
       if (tabStrip instanceof ViewGroup) {
           ViewGroup tabStripGroup = (ViewGroup) tabStrip;
           for (int i = 0; i < ((ViewGroup) tabStrip).getChildCount(); i++) {
               View tabView = tabStripGroup.getChildAt(i);
              if (tabView.getLayoutParams() instanceof ViewGroup.MarginLayoutParams) {
                  ((ViewGroup.MarginLayoutParams) tabView.getLayoutParams()).leftMargin = marginOffset;
                 ((ViewGroup.MarginLayoutParams) tabView.getLayoutParams()).rightMargin = marginOffset;
              }
         }
        tabLayout.requestLayout();
      }
 }

这种方式的限制是：最多只能让指示器与tab等宽，无法继续减小指示器的宽度。

解决方案2：
本方案属于自定制指示器显示，相对比较灵活，能解决方案1的tab等宽问题，但是其缺点是不能保留指示器的动画。具体过程：
TL中tab可以设置自定义view，方法是setCustomView(@Nullable View view) ，也就是说，完全可以不用TL中那套，直接自定义布局即可。在tab源码的update方法中有这么一句：

 mCustomTextView = (TextView) custom.findViewById(android.R.id.text1);
  if (mCustomTextView != null) {
     mDefaultMaxLines = TextViewCompat.getMaxLines(mCustomTextView);
    }
  mCustomIconView = (ImageView) custom.findViewById(android.R.id.icon);

里面的android.R.id.text1和android.R.id.icon就是TL中tab能跟随滑动改变状态的两个view的id，我们自定义的时候可以让对应的view也这么设置id即可。而指示器，大可屏蔽原生TL的，直接在自定义布局的合适位置，加个view就行。
这里可以参考简单优雅的使用tablayout和viewpager打造导航栏

作者刘咸尚

TabLayout的指示器宽度问题

猜你喜欢

热点阅读