设计嫌自带的Indicator宽度太长了,能改的咱做开发的也得尽力改是不是,去搜索一翻,官方的API里没找到设置宽度的。再Google一下,找到个不错的方法,地址,方法也比较简单,用反射修改。
private void setUpIndicatorWidth(TabLayout tabLayout, int marginLeft, int marginRight) {
Class<?> tabLayoutClass = tabLayout.getClass();
Field tabStrip = null;
try {
tabStrip = tabLayoutClass.getDeclaredField("mTabStrip");
tabStrip.setAccessible(true);
} catch (NoSuchFieldException e) {
e.printStackTrace();
}
LinearLayout layout = null;
try {
if (tabStrip != null) {
layout = (LinearLayout) tabStrip.get(tabLayout);
}
for (int i = 0; i < layout.getChildCount(); i++) {
View child = layout.getChildAt(i);
child.setPadding(0, 0, 0, 0);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.MATCH_PARENT, 1);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
params.setMarginStart(DensityUtil.dp2px(getActivity(), marginLeft));
params.setMarginEnd(DensityUtil.dp2px(getActivity(), marginRight));
}
child.setLayoutParams(params);
child.invalidate();
}
} catch (IllegalAccessException e) {
e.printStackTrace();
}
}
但是本着学习的目的,不能复制上,能用就不管了,还是看看为什么这样做就成了吧。
在上面的代码里,我们可以看到主要是对"mTabStrip"这个域进行操作,那么"mTabStrip"是个什么类型的值呢?点开源码,发现这是一个SlidingTabStrip类的对象。而SlidingTabStrip是继承LinearLayout的,也就是说这是Indicator的容器类。通过layout = (LinearLayout) tabStrip.get(tabLayout)
拿到了mTabStrip并将其转型成LinearLayout。接下来我们就可以修改indicator的宽度了。
通常ViewGroup是不会绘制自身的,但是在SlidingTabStrip的构造函数里有一句setWillNotDraw(false)
,这样ViewGroup就会调用复写的onDraw方法,先看下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);
}
}
方法很简单,只有绘制矩形这一行代码。决定indicator的宽度的参数是 mIndicatorLeft 和 mIndicatorRight。类文件开头这两个值都被赋值为-1,接着找这两个参数在哪里被修改过值,在setIndicatorPosition方法中发现了这两个值被修改过。
void setIndicatorPosition(int left, int right) {
if (left != mIndicatorLeft || right != mIndicatorRight) {
// If the indicator's left/right has changed, invalidate
mIndicatorLeft = left;
mIndicatorRight = right;
ViewCompat.postInvalidateOnAnimation(this);
}
}
setIndicatorPostion 这个方法在updateIndicatorPosition 和 animatedIndicatorToPosition 方法中被调用,后者是在tab切换时调用的,暂时可以不用去管,只需要看updateIndicatorPostion 方法中的left和right值是怎么来的就行了。
private void updateIndicatorPosition() {
final View selectedTitle = getChildAt(mSelectedPosition);
int left, right;
if (selectedTitle != null && selectedTitle.getWidth() > 0) {
left = selectedTitle.getLeft();
right = selectedTitle.getRight();
if (mSelectionOffset > 0f && mSelectedPosition < getChildCount() - 1) {
// Draw the selection partway between the tabs
View nextTitle = getChildAt(mSelectedPosition + 1);
left = (int) (mSelectionOffset * nextTitle.getLeft() +
(1.0f - mSelectionOffset) * left);
right = (int) (mSelectionOffset * nextTitle.getRight() +
(1.0f - mSelectionOffset) * right);
} else {
left = right = -1;
}
setIndicatorPosition(left, right);
}
}
可以看出来left和right先是分别等于tab标签的left和right,这个view充满整个tab,因此拿到的left和right是tab的最左边和最右边。里面的一个if条件是在indicator滑动的时候用来更新left和right的值的,这里也可以暂时不去理睬。这也就是indicator的宽度与tab长度相等的原因。这也就是说,无法通过直接修改mIndicatorLeft和mIndicatorRight的值来达到目的(这是我个人的看法,如果有错误,望指出)。但是除此之外,还可以通过设置子view的margin来间接达到目的。代码在最开始已经给出。但是具体多少值能达到需要的效果还是需要调试的,也没办法保证在所有手机上都能达到相同的效果,不过也算是一个不错的解决方案了。