大部分项目开发中都会使用到ViewPager这个控件,而UI设计师有时候为了美观往往提出各种各样的要求。比如说要求Tab下划线与文本长度一致:
在实现的过程中,采用TabLayout+ViewPager的方式。但是TabLayout并没有提供有效的API给我们设置线的宽度,阅读TabLayout的源代码可以知道,下划线的宽度是TabLayout的子View来控制的,也就是每个包含标题的View的宽度决定了下划线的宽度。在不修改源代码的前提,可以通过反射的方式获取到子View,修改属性来控制下滑线宽度。
工具类代码如下:
public static void setIndicatorWidth(final TabLayout tabLayout) {
//从源码得知 线的宽度是根据 tabView的宽度来设置的
tabLayout.post(new Runnable() {
@Override
public void run() {
try {//拿到tabLayout的mTabStrip属性
LinearLayout mTabStrip = (LinearLayout) tabLayout.getChildAt(0);
//将dp转换成px
int leftMargin = (int) Utils.convertDpToPixel(20f);
int middleMargin = (int) Utils.convertDpToPixel(22f);
for (int i = 0; i < mTabStrip.getChildCount(); i++) {
View tabView = mTabStrip.getChildAt(i);
//拿到tabView的mTextView属性 tab的字数不固定一定用反射取mTextView
// 最新版的名字已经修改,如果修改版本,需要修改
String flagTextName = "mTextView";
Field mTextViewField = tabView.getClass().getDeclaredField(flagTextName);
mTextViewField.setAccessible(true);
TextView mTextView = (TextView) mTextViewField.get(tabView);
tabView.setPadding(0, 0, 0, 0);
//想要的效果是 字多宽线就多宽,所以测量mTextView的宽度
int width = 0;
width = mTextView.getWidth();
if (width == 0) {
mTextView.measure(0, 0);
width = mTextView.getMeasuredWidth();
}//设置tab左右间距 ,因为源码中线的宽度是根据tabView的宽度来设置的,所以得注意这里不能使用Padding
LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) tabView.getLayoutParams();
//指示器宽度值设置
params.width = width;
//设置一下tabview的margin,不设置会连在一起
if (i == 0) {
params.leftMargin = leftMargin;
params.rightMargin = 0;
} else if (i == mTabStrip.getChildCount() - 1) {
params.leftMargin = middleMargin;
params.rightMargin = leftMargin;
} else {
params.leftMargin = middleMargin;
params.rightMargin = 0;
}
tabView.setLayoutParams(params);
tabView.invalidate();
}
} catch (NoSuchFieldException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
}
}
});
}
需要注意的是,最新版的SDK的属性名已经改变,mTextView改成了textView。调用该工具类,需要在TabLayout绘制完后调用。因为只有测量绘制之后,才能知道文本的长度。