1.描述
viewpager+tabLayout+fragment非常常見蜕青，但google只給出了改變tabLayout中的tab IndicatorHeight的方法，其寬度是填充滿整個tab的捧韵，且不能更改市咆。在網(wǎng)上看了很多關(guān)于改變indicator的長度的方式，大多集中與反射和setCustomView()的方式再来，個人更傾向于后者蒙兰。
2.實現(xiàn)
1.效果
2.setCustomView的使用方式
或許大概可能都知道吧，還是記錄一下
for(int i=0;i<tabLayout.getTabCount();i++){
Tab tab =tabLayout.getTabAt(i);
View view = LayoutInflater.from(getContext()).inflate(R.layout.layout_extentd_tab, (LinearLayout) tabView, false);
tab.setCustomView(view);
}
網(wǎng)上通常的做法是通過以上循環(huán)來添加芒篷，其中l(wèi)ayout_extend_tab是自定義customView的布局搜变，在此處有一點小坑（我被坑了反正），此處的LayoutInflater.from(getContext()).inflate(R.layout.layout_extentd_tab, (LinearLayout) tabView, false)必須這樣用针炉，我通常加載布局是使用LayoutInflater.from(getContext()).inflate(R.layout.layout_extentd_tab, null),如果這樣加載的話大家可能會發(fā)現(xiàn)無論如何設置的customView根本不能填充滿tabView挠他。如果每個需要用到tabLayout+viewpager+fragment的地方都這樣使用，有點繁瑣篡帕。
3.封裝
在tabLayout中addTab()有四個重載方法殖侵，但無論顯示調(diào)用哪一個，最終都會調(diào)用到public void addTab(@NonNull Tab tab, int position, boolean setSelected)估重寫此方法來加載coustomView镰烧，具體代碼如下：
@Override
public void addTab(@NonNull Tab tab, int position, boolean setSelected) {
tab.setCustomView(createTabCustomView(tab.getText(), tab.view));
super.addTab(tab, position, setSelected);
}
/**
* 設置tab
*/
private View createTabCustomView(CharSequence text, View tabView) {
View view = LayoutInflater.from(getContext()).inflate(R.layout.layout_extentd_tab, (LinearLayout) tabView, false);
TextView textView = view.findViewById(R.id.layout_extend_tab_tv_content);
textView.setText(text);
textView.setTextColor(getTabTextColors());
View indicator = view.findViewById(R.id.layout_extend_tab_indicator);
ConstraintLayout.LayoutParams params = (ConstraintLayout.LayoutParams) indicator.getLayoutParams();
params.height = indicatorHeight;
params.leftMargin = indicatorMarginStart;
params.rightMargin = indicatorMarginEnd;
indicator.setLayoutParams(params);
indicator.setBackgroundColor(indicatorSelectColor);
indicator.setBackground(createStateListDrawable());
return view;
}
/**
* 創(chuàng)建StateListDrawable
*
* @return
*/
private StateListDrawable createStateListDrawable() {
StateListDrawable stateListDrawable = new StateListDrawable();
stateListDrawable.addState(new int[]{android.R.attr.state_selected}, new ColorDrawable(indicatorSelectColor));
stateListDrawable.addState(new int[]{}, new ColorDrawable());
return stateListDrawable;
}
最后附上layout_extentd_tab.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/layout_extend_tab_tv_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
app:layout_constraintBottom_toTopOf="@+id/layout_extend_tab_indicator"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="@+id/layout_extend_tab_indicator"
android:layout_width="0dp"
android:layout_height="3dp"
android:layout_gravity="bottom"
android:background="@color/themeColor"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="@+id/layout_extend_tab_tv_content"
app:layout_constraintStart_toStartOf="@+id/layout_extend_tab_tv_content" />
</androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>
