android TabLayout的指示器宽度问题

所属分类: 软件编程 / Android 阅读数: 61
收藏 0 赞 0 分享

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

  1. 产品需求:希望上部导航栏中的指示器宽度略大于文字宽度;
  2. 技术方案:TabLayout配合ViewPager;
  3. 问题分析: 原生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, 
 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就行。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

更多精彩内容其他人还在看

Android网络编程之获取网络上的Json数据实例

这篇文章主要介绍了Android网络编程之获取网络上的Json数据实例,本文用完整的代码实例讲解了在Android中读取网络中Json数据的方法,需要的朋友可以参考下
收藏 0 赞 0 分享

Android中的windowSoftInputMode属性详解

这篇文章主要介绍了Android中的windowSoftInputMode属性详解,本文对windowSoftInputMode的9个属性做了详细总结,需要的朋友可以参考下
收藏 0 赞 0 分享

Android网络编程之UDP通信模型实例

这篇文章主要介绍了Android网络编程之UDP通信模型实例,本文给出了服务端代码和客户端代码,需要的朋友可以参考下
收藏 0 赞 0 分享

Android中使用ListView实现漂亮的表格效果

这篇文章主要介绍了Android中使用ListView实现漂亮的表格效果,本文用详细的代码实例创建了一个股票行情表格,需要的朋友可以参考下
收藏 0 赞 0 分享

Android中刷新界面的二种方法

这篇文章主要介绍了Android中刷新界面的二种方法,本文使用Handler、postInvalidate两种方法实现界面刷新,需要的朋友可以参考下
收藏 0 赞 0 分享

Android SDK三种更新失败及其解决方法

这篇文章主要介绍了Android SDK三种更新失败及其解决方法,需要的朋友可以参考下
收藏 0 赞 0 分享

Android学习笔记——Menu介绍(一)

Android3.0(API level 11)开始,Android设备不再需要专门的菜单键。随着这种变化,Android app应该取消对传统6项菜单的依赖。取而代之的是提供anction bar来提供基本的用户功能
收藏 0 赞 0 分享

Android学习笔记——Menu介绍(二)

这次将继续上一篇文章没有讲完的Menu的学习,上下文菜单(Context menu)和弹出菜单(Popup menu)
收藏 0 赞 0 分享

Android学习笔记——Menu介绍(三)

今天继续昨天没有讲完的Menu的学习,主要是Popup Menu的学习,需要的朋友可以参考下
收藏 0 赞 0 分享

Android显示网络图片实例

这篇文章主要介绍了Android显示网络图片的方法,以实例形式展示了Android程序显示网络图片的方法,非常具有实用价值,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多