Android 开发 TabLayout 自定义指示器长度

前言

原生 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() {

            @Override
            public 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);

                }
            }

            @Override
            public 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);

                }
            }

            @Override
            public 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">

    <TextView
        android: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"/>

    <View
        android: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));

总结

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