TabLayout作为官方顶部导航栏是非常好用的，但是有个问题，下划线只能设置高度，不能设置宽度，如果标签较多还好，但遇到三个标签时候就不太好看了，线太长了。
tab.png
解决方案
第一种思路
通过反射拿到TabLayout里的的每个tab，然后再修改相应Margin的值，来达到效果，但是可能会压缩字体的大小
第二种思路
0.不会影响TabLayout里的属性值
- 依旧需要通过反射拿到TabLayout里的属性
- 不使用自带下划线，自己定义一个TabIndicator当做下划线使用
- 利用ViewPager的监听，不断的修改TabIndicator的值
这里又分两种思路
。不断的改变TabIndicator的Margin
。不断移动TabIndicator
不断改变Margin这个方案需要每次都把 TabIndicator的宽高等属性设置一遍，我觉得效率不高，下面展示第二种方案
以下代码仅仅适用于tabMode="fixed"和 app:tabGravity="fill"的情况下，如果是scrollable，那么还要考虑整个TabLayout的滑动，但是TabLayout滑动的前提是Tab多到超出屏幕的宽度，这时候TabLayout自带的下划线是可以满足需求的
如果是fill，那为何不为TabLayout设置左右Margin来达到同样效果呢
`
<android.support.design.widget.TabLayout
android:id="@+id/tab"
android:layout_width="fill_parent"
android:layout_height="60dp"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
app:tabBackground="@null"
app:tabGravity="fill"
app:tabIndicatorHeight="2dp"
app:tabMaxWidth="0.0dp"
app:tabMode="fixed" />
<View
android:id="@+id/indicator"
android:layout_width="wrap_content"
android:layout_height="2.0dp"
android:layout_below="@id/tab"
android:background="#000000" />
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/tab"></android.support.v4.view.ViewPager>
</RelativeLayout>
`
`
//拿到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();
}
}
});
`
`
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<mDefalut_selected){ //2. 比默认小都是向左移动
float ss = -mBasic*(1-positionOffset)+mBasic*(position-mDefalut_selected+1);
setTranslationX(ss);
}
}
@Override
public void onPageSelected(int position) {
setScaleX(1);
}
/**
*
* @param state
*/
@Override
public void onPageScrollStateChanged(int state) {
}
}
});
`
效果如下
image.png
总结:
针对正常需求，这样解决思路我认为还可以，但是碰到 tab文本长度不一样，且下划线必须大小一致 那就在反射的时候存储每个tab的width等属性，在滑动的时候再拿出来。
