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>

完整代码查看https://github.com/lijheng/tabLayout