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等屬性，在滑動的時候再拿出來。
