1.描述
viewpager+tabLayout+fragment非常常见，但google只给出了改变tabLayout中的tab IndicatorHeight的方法，其宽度是填充满整个tab的，且不能更改。在网上看了很多关于改变indicator的长度的方式，大多集中与反射和setCustomView()的方式，个人更倾向于后者。
2.实现
1.效果
Screenshot_2019-07-23-13-35-38-385_com.summer.tab.png
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);
}
网上通常的做法是通过以上循环来添加，其中layout_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),如果这样加载的话大家可能会发现无论如何设置的customView根本不能填充满tabView。如果每个需要用到tabLayout+viewpager+fragment的地方都这样使用，有点繁琐。
3.封装
在tabLayout中addTab()有四个重载方法，但无论显示调用哪一个，最终都会调用到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;
}
/**
* 创建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>
