前言

原生 TabLayout 的指示器长度是充满整个屏幕的，但在实际开发中 UI 会设计成 指示器的长度等于或者小于标题字体长度，如图

如果设置成跟字体长度一样即使用 API:

mTabLayout.setTabIndicatorFullWidth(false);

或者在 xml 布局文件中的TabLayout标签设置：

 app:tabIndicatorFullWidth=“false”

但如果想要指示器长度小于字体长度（如上图），API并未提供相关方法，此时就需要我们自定义一个CustomTabLayout 继承 TabLayout，允许开发者自定义选项卡的颜色、字体以及背景等属性。

二、自定义 View

public class CustomTabLayout extends TabLayout {private List<String> titles;private int mSelectColor = getResources().getColor(R.color.white);private int mUnSelectColor = getResources().getColor(R.color.c_80ffffff);public CustomTabLayout(Context context) {this(context,null);}public CustomTabLayout(Context context, AttributeSet attrs) {this(context, attrs,0);}public CustomTabLayout(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.CustomTabLayout);mSelectColor = array.getColor(R.styleable.CustomTabLayout_select_color, mSelectColor);mUnSelectColor = array.getColor(R.styleable.CustomTabLayout_unselect_color, mUnSelectColor);array.recycle();init();}private void init() {titles = new ArrayList<>();this.addOnTabSelectedListener(new OnTabSelectedListener() {@Overridepublic void onTabSelected(Tab tab) {/*** 设置当前选中的Tab为特殊高亮样式。*/if (tab != null && tab.getCustomView() != null) {TextView tab_layout_text = tab.getCustomView().findViewById(R.id.tv_tab_layout);View vIndicator = tab.getCustomView().findViewById(R.id.v_indicator);vIndicator.setVisibility(VISIBLE);vIndicator.setBackgroundColor(mSelectColor);tab_layout_text.setTextColor(mSelectColor);}}@Overridepublic void onTabUnselected(Tab tab) {/*** 重置所有未选中的Tab颜色、字体、背景恢复常态(未选中状态)。*/if (tab != null && tab.getCustomView() != null) {TextView tab_layout_text = tab.getCustomView().findViewById(R.id.tv_tab_layout);View vIndicator = tab.getCustomView().findViewById(R.id.v_indicator);vIndicator.setVisibility(INVISIBLE);tab_layout_text.setTextColor(mUnSelectColor);}}@Overridepublic void onTabReselected(Tab tab) {}});}public void setTitle(List<String> titles) {this.titles = titles;/*** 开始添加切换的Tab。*/for (String title : this.titles) {Tab tab = newTab();tab.setCustomView(R.layout.item_custom_tablayout);if (tab.getCustomView() != null) {TextView text = tab.getCustomView().findViewById(R.id.tv_tab_layout);text.setText(title);text.setTextColor(mUnSelectColor);}this.addTab(tab);}}
}

相关属性

styleable 

    <declare-styleable name="CustomTabLayout"><attr name="select_color" format="color"/><attr name="unselect_color" format="color"/></declare-styleable>

item_custom_tablayout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="vertical"android:paddingBottom="@dimen/dimen_5"android:gravity="center_horizontal"><TextViewandroid:id="@+id/tv_tab_layout"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textStyle="bold"android:textColor="@color/c_80ffffff"android:textSize="@dimen/textsize_16"/><Viewandroid:id="@+id/v_indicator"android:layout_width="@dimen/dimen_30"android:layout_height="@dimen/dimen_3"android:visibility="invisible"android:layout_marginTop="@dimen/dimen_6"android:background="@color/white"/></LinearLayout>

使用方法

List<String> titles = new ArrayList<>();
titles.add("待签收");
titles.add("已签收");List<Fragment> mFragments = initFragments();
adapter = new ViewPaperAdapter(getSupportFragmentManager(), mFragments, titles);
mViewPager.setAdapter(adapter);mTabLayout.setTitle(titles);//Tablayout自定义view绑定ViewPager
mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTabLayout));
mTabLayout.addOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(mViewPager));

总结

如果对你有所帮助的话，不妨 点赞收藏
如果你有什么疑问的话，不妨 评论私信
青山不改，绿水长流 ，有缘江湖再见 ~