当前位置：首页 > news >正文

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

news 2025/8/20 14:55:29

前言

原生 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);}}
}

使用方法

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));