在工作中,經常會碰到把標籤欄指示線的寬度,做的和文字寬度一樣,甚至比文字寬度還要短的設計。使用 TabLayout 我們可以快速實現一個 Material Design 風格的標籤欄,但 TabLayout 的指示線 Indicator 預設是佔滿一格 Tab 的,且未直接提供修改 Indicator 寬度的方法。
本文總結了幾種修改 Indicator 寬度的方案,並討論如何「優雅」地修改它。
反射
如果你的專案中也有修改指示線寬度的需求,並且已經在網上找過修改方法,很可能你現在專案中用的就是這個方法。網上大部分文章都是通過分析原始碼,用反射實現的,程式碼如下:
public void setIndicatorWidth(@NonNull final TabLayout tabLayout, final int margin) {
tabLayout.post(new Runnable() {
@Override
public void run() {
try {
Field mTabStripField = tabLayout.getClass().getDeclaredField("mTabStrip");
mTabStripField.setAccessible(true);
LinearLayout mTabStrip = (LinearLayout) mTabStripField.get(tabLayout);
for (int i = 0; i < mTabStrip.getChildCount(); i++) {
View tabView = mTabStrip.getChildAt(i);
Field mTextViewField = tabView.getClass().getDeclaredField("mTextView");
mTextViewField.setAccessible(true);
TextView mTextView = (TextView) mTextViewField.get(tabView);
tabView.setPadding(0, 0, 0, 0);
int width = mTextView.getWidth();
if (width == 0) {
mTextView.measure(0, 0);
width = mTextView.getMeasuredWidth();
}
LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) tabView.getLayoutParams();
params.width = width;
params.leftMargin = margin;
params.rightMargin = margin;
tabView.setLayoutParams(params);
tabView.invalidate();
}
} catch (NoSuchFieldException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
}
}
});
}
複製程式碼
這樣做是沒問題的,但如果把專案的 SDK 升級到 28 或以上,它就不再有效了,原因是 TabLayout 原始碼中的變數名修改了,所以程式碼也要改成這樣:
public void setIndicatorWidth(@NonNull final TabLayout tabLayout, final int margin) {
tabLayout.post(new Runnable() {
@Override
public void run() {
try {
Field slidingTabIndicatorField = tabLayout.getClass().getDeclaredField("slidingTabIndicator");
slidingTabIndicatorField.setAccessible(true);
LinearLayout mTabStrip = (LinearLayout) slidingTabIndicatorField.get(tabLayout);
for (int i = 0; i < mTabStrip.getChildCount(); i++) {
View tabView = mTabStrip.getChildAt(i);
Field textViewField = tabView.getClass().getDeclaredField("textView");
textViewField.setAccessible(true);
TextView mTextView = (TextView) textViewField.get(tabView);
tabView.setPadding(0, 0, 0, 0);
int width = mTextView.getWidth();
if (width == 0) {
mTextView.measure(0, 0);
width = mTextView.getMeasuredWidth();
}
LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) tabView.getLayoutParams();
params.width = width;
params.leftMargin = margin;
params.rightMargin = margin;
tabView.setLayoutParams(params);
tabView.invalidate();
}
} catch (NoSuchFieldException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
}
}
});
}
複製程式碼
通過反射雖然可以實現,但我個人覺得反射不夠優雅,並且它有可能因為 SDK 的升級而失效。
自定義 Tab
TabLayout 中的 Tab 是允許自定義的,但 Indicator 不屬於 Tab。
所以有這樣一種解決方案,把 Indicator 隱藏掉,然後在自定義 Tab 的佈局中加入指示線。
我們可以通過把 Indicator 的顏色設為透明來隱藏它:
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="@android:color/transparent" />
複製程式碼
在程式碼中,當 Tab 新增完畢後,替換成自定義的 Tab:
TabLayout.Tab tab = tabLayout.getTabAt(i);
tab.setCustomView(R.layout.layout_tab);
TextView tv = tab.getCustomView().findViewById(R.id.text_view);
tv.setText(tab.getText());
複製程式碼
並且還需要監聽 Tab 的切換,控制指示線的顯示隱藏:
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
// TODO Tab 被切換,重新整理所有 Tab
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
複製程式碼
用這種方法,什麼樣式都能實現了。但有個缺點是,在 Tab 切換的時候,沒有了指示線的移動動畫。
SDK 28+ 屬性配置
如果你使用的 SDK 版本是 28 或以上,並且需要將 Indicator 的寬度修改成和文字寬度一樣,那麼太棒了,現在你只需要給 TabLayout 配置一個屬性就好了:
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorFullWidth="false" />
複製程式碼
當 tabIndicatorFullWidth 取 false 的時候,Indicator 的寬度會和文字的寬度一樣,但這也一位著,當不同 Tab 裡的文字寬度不一樣時,Indicator 的寬度也會不一樣,像下面這樣。
如果設計要求 Indicator 的寬度必須固定,或者寬度要比文字短,那我們還要接著找別的解決方案。
使用 Drawable 樣式
最後這種方案,是我認為最優雅的解決方案,使用也特別簡單。在網上還沒看到有人使用,可以算是我的原創了,哈哈。
Indicator 是允許我們設定 drawable 來自定義樣式的,比如新增圓角什麼的。但無論什麼樣式,Indicator 依然是佔滿 Tab 寬度的。沒關係,我們把它的背景設成透明,包含一個固定寬度的 shape 就好了,像這樣:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<item android:gravity="center">
<shape>
<size
android:width="16dp"
android:height="4dp" />
<corners android:radius="4dp" />
<solid android:color="@color/colorAccent" />
</shape>
</item>
</layer-list>
複製程式碼
然後在佈局檔案中配置 tabIndicator 屬性:
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorHeight="10dp"
app:tabIndicator="@drawable/tab_indicator" />
複製程式碼
也可以在程式碼中設定:
tabLayout.setSelectedTabIndicator(R.drawable.tab_indicator);
複製程式碼
效果如下:
從上面這個例子還可以發現,使用這個方法,不僅可以在視覺上增加 Indicator 的左右邊距,還可以增加它的上下邊距。
好啦,其實就是配置一個 Drawable 檔案這麼簡單,只是發現網上不少人在問,但還沒有人用這個方法解決,在這裡和大家分享一下。