关于Android改变TabLayout 下划线(Indicator)宽度实践总结

最新推荐文章于 2025-09-06 07:30:00 发布
原创 最新推荐文章于 2025-09-06 07:30:00 发布 · 1.0k 阅读 · 12 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#android
本文介绍了如何通过两种方法自定义TabLayout以改变TabIndicator（下划线）的宽度。首先展示了一种通过反射设置Indicator宽度的方法，但限制为Tab内容的宽度。接着介绍了一个通用的解决方案，通过设置自定义View，允许设定固定宽度的Indicator，详细阐述了布局、代码实现和状态处理。最后提到了第三方开源库的选择。

上代码：

public static void setTabWidth(final TabLayout tabLayout, final int padding){
tabLayout.post(new Runnable() {
@Override
public void run() {
try {
//拿到tabLayout的mTabStrip属性
LinearLayout mTabStrip = (LinearLayout) tabLayout.getChildAt(0);

for (int i = 0; i < mTabStrip.getChildCount(); i++) {
View tabView = mTabStrip.getChildAt(i);

//拿到tabView的mTextView属性 tab的字数不固定一定用反射取mTextView
Field mTextViewField = tabView.getClass().getDeclaredField(“mTextView”);
mTextViewField.setAccessible(true);

TextView mTextView = (TextView) mTextViewField.get(tabView);

tabView.setPadding(0, 0, 0, 0);

//因为我想要的效果是 字多宽线就多宽，所以测量mTextView的宽度
int width = 0;
width = mTextView.getWidth();
if (width == 0) {
mTextView.measure(0, 0);
width = mTextView.getMeasuredWidth();
}

//设置tab左右间距 注意这里不能使用Padding 因为源码中线的宽度是根据 tabView的宽度来设置的
LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) tabView.getLayoutParams();
params.width = width ;
params.leftMargin = padding;
params.rightMargin = padding;
tabView.setLayoutParams(params);

tabView.invalidate();
}

} catch (NoSuchFieldException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
}
}
});

}

效果图如下：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

提醒：这种方式改变Indicator最短也就Tab内容的宽度，如果设置很短，Tab内容就显示不下,如下图：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

二、通过TabLayout setCustomView 的方式

第一种通过反射的方式设置Indicator宽度，最短只能Tab内容的宽度，如果设计师要所有选中的Tab下的Indicator都设置一个指定的宽度，这种就不行了。TabLayout可以设置自定义View，可以通过这种方法来达到目的。

1, 将TabLayout 的tabIndicatorHeight 设置为0
2,通过TabLayout 的setCustomView方式添加Tab
3, 在onTabSelected 回调种，处理Tab选中和未选中的状态；
4，为了方便使用，封装成一个通用的View

首先看布局： enhance_tab_layout.xml:

<?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.TabLayout
android:id=“@+id/enhance_tab_view”
android:layout_width=“match_parent”
android:layout_height=“wrap_content”
app:tabIndicatorHeight=“0dp”

</android.support.design.widget.TabLayout>

Tab item 布局：tab_item_layout.xml

<?xml version="1.0" encoding="utf-8"?>



如上，TextView显示Tab内容，下面的View就是Tab下面的Indicator（下划线）。 自己定义的View,宽度随便你改。

添加Tab的时候使用setCustomView 方法：

/**

  • 添加tab
  • @param tab
    */
    public void addTab(String tab){
    mTabList.add(tab);
    View customView = getTabView(getContext(),tab,mIndicatorWidth,mIndicatorHeight,mTabTextSize);
    mCustomViewList.add(customView);
    mTabLayout.addTab(mTabLayout.newTab().setCustomView(customView));
    }

/**

  • 获取Tab 显示的内容
  • @param context
  • @param
  • @return
    */
    public static View getTabView(Context context,String text,int indicatorWidth,int indicatorHeight,int textSize) {
    View view = LayoutInflater.from(context).inflate(R.layout.tab_item_layout, null);
    TextView tabText = (TextView) view.findViewById(R.id.tab_item_text);
    if(indicatorWidth>0){
    View indicator = view.findViewById(R.id.tab_item_indicator);
    ViewGroup.LayoutParams layoutParams = indicator.getLayoutParams();
    layoutParams.width = indicatorWidth;
    layoutParams.height = indicatorHeight;
    indicator.setLayoutParams(layoutParams);
    }
    tabText.setTextSize(textSize);
    tabText.setText(text);
    return view;
    }

然后在onTabSelected中处理状态：

@Override
public void onTabSelected(TabLayout.Tab tab) {
mViewPager.setCurrentItem(tab.getPosition());
EnhanceTabLayout mTabLayout = mTabLayoutRef.get();
if(mTabLayoutRef!=null){
List customViewList = mTabLayout.getCustomViewList();
if(customViewList == null || customViewList.size() ==0){
return;
}
for (int i=0;i<customViewList.size();i++){
View view = customViewList.get(i);
if(view == null){
return;
}
TextView text = (TextView) view.findViewById(R.id.tab_item_text);
View indicator = view.findViewById(R.id.tab_item_indicator);
if(i == tab.getPosition()){ // 选中状态
text.setTextColor(mTabLayout.mSelectTextColor);
indicator.setBackgroundColor(mTabLayout.mSelectIndicatorColor);
indicator.setVisibility(View.VISIBLE);
}else{// 未选中状态
text.setTextColor(mTabLayout.mUnSelectTextColor);
indicator.setVisibility(View.INVISIBLE);
}
}
}

}

代码其实挺简单的，但是如果项目中多处使用到，都这样来处理的话，就显得麻烦，因此，我们通过自定义View的方式将这些代码疯转成1个通用的TabLayoutView。如下：

EnhanceTabLayout.java

/**

  • 对 support Design 包中的TabLayout包装
  • 主要实现功能：更改indicator 的长度
  • Created by zhouwei on 2018/5/18.
    */

public class EnhanceTabLayout extends FrameLayout {
private TabLayout mTabLayout;
private List mTabList;
private List mCustomViewList;
private int mSelectIndicatorColor;
private int mSelectTextColor;
private int mUnSelectTextColor;
private int mIndicatorHeight;
private int mIndicatorWidth;
private int mTabMode;
private int mTabTextSize;

public EnhanceTabLayout(@NonNull Context context) {
super(context);
init(context,null);
}

public EnhanceTabLayout(@NonNull Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init(context,attrs);
}

public EnhanceTabLayout(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context,attrs);
}

@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
public EnhanceTabLayout(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
init(context,attrs);
}

private void readAttr(Context context,AttributeSet attrs){
TypedArray typedArray = context.obtainStyledAttributes(attrs,R.styleable.EnhanceTabLayout);
mSelectIndicatorColor = typedArray.getColor(R.styleable.EnhanceTabLayout_tabIndicatorColor,context.getResources().getColor(R.color.colorAccent));
mUnSelectTextColor = typedArray.getColor(R.styleable.EnhanceTabLayout_tabTextColor, Color.parseColor(“#666666”));
mSelectTextColor = typedArray.getColor(R.styleable.EnhanceTabLayout_tabSelectTextColor,context.getResources().getColor(R.color.colorAccent));
mIndicatorHeight = typedArray.getDimensionPixelSize(R.styleable.EnhanceTabLayout_tabIndicatorHeight,1);
mIndicatorWidth = typedArray.getDimensionPixelSize(R.styleable.EnhanceTabLayout_tabIndicatorWidth,0);
mTabTextSize = typedArray.getDimensionPixelSize(R.styleable.EnhanceTabLayout_tabTextSize,13);
mTabMode = typedArray.getInt(R.styleable.EnhanceTabLayout_tab_Mode,2);
typedArray.recycle();
}

private void init(Context context,AttributeSet attrs){
readAttr(context,attrs);

mTabList = new ArrayList<>();
mCustomViewList = new ArrayList<>();
View view = LayoutInflater.from(getContext()).inflate(R.layout.enhance_tab_layout,this,true);
mTabLayout = view.findViewById(R.id.enhance_tab_view);

// 添加属性
mTabLayout.setTabMode(mTabMode == 1 ? TabLayout.MODE_FIXED:TabLayout.MODE_SCROLLABLE);
mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
// onTabItemSelected(tab.getPosition());
// Tab 选中之后，改变各个Tab的状态
for (int i=0;i<mTabLayout.getTabCount();i++){
View view = mTabLayout.getTabAt(i).getCustomView();
if(view == null){
return;
}
TextView text = (TextView) view.findViewById(R.id.tab_item_text);
View indicator = view.findViewById(R.id.tab_item_indicator);
if(i == tab.getPosition()){ // 选中状态
text.setTextColor(mSelectTextColor);
indicator.setBackgroundColor(mSelectIndicatorColor);
indicator.setVisibility(View.VISIBLE);
}else{// 未选中状态
text.setTextColor(mUnSelectTextColor);
indicator.setVisibility(View.INVISIBLE);
}
}

}

@Override
public void onTabUnselected(TabLayout.Tab tab) {

}

@Override
public void onTabReselected(TabLayout.Tab tab) {

}
});
}

public List getCustomViewList(){
return mCustomViewList;
}

public void addOnTabSelectedListener (TabLayout.OnTabSelectedListener onTabSelectedListener){
mTabLayout.addOnTabSelectedListener(onTabSelectedListener);
}

/**

  • 与TabLayout 联动
  • @param viewPager
    */
    public void setupWithViewPager(@Nullable ViewPager viewPager) {
    mTabLayout.addOnTabSelectedListener(new ViewPagerOnTabSelectedListener(viewPager,this));
    }

/**

  • retrive TabLayout Instance
  • @return
    */
    public TabLayout getTabLayout(){
    return mTabLayout;
    }

/**

  • 添加tab
  • @param tab
    */
    public void addTab(String tab){
    mTabList.add(tab);
    View customView = getTabView(getContext(),tab,mIndicatorWidth,mIndicatorHeight,mTabTextSize);
    mCustomViewList.add(customView);
    mTabLayout.addTab(mTabLayout.newTab().setCustomView(customView));
    }

public static class ViewPagerOnTabSelectedListener implements TabLayout.OnTabSelectedListener{

private final ViewPager mViewPager;
private final WeakReference mTabLayoutRef;

public ViewPagerOnTabSelectedListener(ViewPager viewPager,EnhanceTabLayout enhanceTabLayout) {
mViewPager = viewPager;
mTabLayoutRef = new WeakReference(enhanceTabLayout);
}

@Override
public void onTabSelected(TabLayout.Tab tab) {
mViewPager.setCurrentItem(tab.getPosition());
EnhanceTabLayout mTabLayout = mTabLayoutRef.get();
if(mTabLayoutRef!=null){
List customViewList = mTabLayout.getCustomViewList();
if(customViewList == null || customViewList.size() ==0){
return;
}
for (int i=0;i<customViewList.size();i++){
View view = customViewList.get(i);
if(view == null){
return;
}
TextView text = (TextView) view.findViewById(R.id.tab_item_text);
View indicator = view.findViewById(R.id.tab_item_indicator);
if(i == tab.getPosition()){ // 选中状态
text.setTextColor(mTabLayout.mSelectTextColor);
indicator.setBackgroundColor(mTabLayout.mSelectIndicatorColor);
indicator.setVisibility(View.VISIBLE);
}else{// 未选中状态
text.setTextColor(mTabLayout.mUnSelectTextColor);
indicator.setVisibility(View.INVISIBLE);
}
}
}

}

@Override
public void onTabUnselected(TabLayout.Tab tab) {
// No-op
}

@Override
public void onTabReselected(TabLayout.Tab tab) {
// No-op
}
}

/**

  • 获取Tab 显示的内容
  • @param context
  • @param
  • @return
    */
    public static View getTabView(Context context,String text,int indicatorWidth,int indicatorHeight,int textSize) {
    View view = LayoutInflater.from(context).inflate(R.layout.tab_item_layout, null);
    TextView tabText = (TextView) view.findViewById(R.id.tab_item_text);
    if(indicatorWidth>0){
    View indicator = view.findViewById(R.id.tab_item_indicator);
    ViewGroup.LayoutParams layoutParams = indicator.getLayoutParams();
    layoutParams.width = indicatorWidth;
    layoutParams.height = indicatorHeight;
    indicator.setLayoutParams(layoutParams);
    }
    tabText.setTextSize(textSize);
    tabText.setText(text);
    return view;
    }

暴露了一些常用方法和原生TabLayout 的几个重要属性，自定义属性如下：

<?xml version="1.0" encoding="utf-8"?>

好了，这样就封装了一个可以改变Indicator 宽度的TabLayout，看一下怎么用，xml布局如下：

<com.example.codoon.customtablayout.EnhanceTabLayout
android:id=“@+id/enhance_tab_layout”
android:layout_marginTop=“30dp”
android:layout_width=“match_parent”
android:layout_height=“wrap_content”
app:tabIndicatorHeight=“2dp”
app:tabIndicatorWidth=“30dp”
app:tabTextColor=“#999999”
app:tab_Mode=“mode_scrollable”
app:tabSelectTextColor=“@color/colorPrimary”
app:tabIndicatorColor=“@color/colorPrimary”
app:tabTextSize=“6sp”

</com.example.codoon.customtablayout.EnhanceTabLayout>

Activity中代码如下：

mEnhanceTabLayout = findViewById(R.id.enhance_tab_layout);
mEnhanceTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
Log.e(“log”,“onTabSelected”);
}

@Override
public void onTabUnselected(TabLayout.Tab tab) {

}

@Override
public void onTabReselected(TabLayout.Tab tab) {

}
});
for(int i=0;i<sTitle.length;i++){
mEnhanceTabLayout.addTab(sTitle[i]);
}
mEnhanceTabLayout.setupWithViewPager(mViewPager);
List fragments = new ArrayList<>();
for(int i=0;i<sTitle.length;i++){
fragments.add(ItemFragment.newInstance(sTitle[i]));
}

MyAdapter adapter = new MyAdapter(getSupportFragmentManager(),fragments, Arrays.asList(sTitle));
mViewPager.setAdapter(adapter);
mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mEnhanceTabLayout.getTabLayout()));
mEnhanceTabLayout.setupWithViewPager(mViewPager);

注意，如果是配合ViewPager使用，需要下面两行代码，单独使用则不需要：

mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mEnhanceTabLayout.getTabLayout()));
mEnhanceTabLayout.setupWithViewPager(mViewPager);

最后看一下效果：(图中第二个TabLayout)

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

三、第三方开源库

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则近万的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

img

img

img

img

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：Android）

文末

那么对于想坚持程序员这行的真的就一点希望都没有吗？
其实不然，在互联网的大浪淘沙之下，留下的永远是最优秀的，我们考虑的不是哪个行业差哪个行业难，就逃避掉这些，无论哪个行业，都会有他的问题，但是无论哪个行业都会有站在最顶端的那群人。我们要做的就是努力提升自己，让自己站在最顶端，学历不够那就去读，知识不够那就去学。人之所以为人，不就是有解决问题的能力吗？挡住自己的由于只有自己。
Android希望=技能+面试

  • 技能
  • 面试技巧+面试题
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门即可获取！

以扫码获取！！（备注：Android）**

文末

那么对于想坚持程序员这行的真的就一点希望都没有吗？
其实不然，在互联网的大浪淘沙之下，留下的永远是最优秀的，我们考虑的不是哪个行业差哪个行业难，就逃避掉这些，无论哪个行业，都会有他的问题，但是无论哪个行业都会有站在最顶端的那群人。我们要做的就是努力提升自己，让自己站在最顶端，学历不够那就去读，知识不够那就去学。人之所以为人，不就是有解决问题的能力吗？挡住自己的由于只有自己。
Android希望=技能+面试

  • 技能
    [外链图片转存中…(img-AG0pYCoa-1712377591596)]
  • 面试技巧+面试题
    [外链图片转存中…(img-nQXRGAep-1712377591596)]
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门即可获取！
Android自定义Indicator指示器，可搭配ViewPager2使用
weixin_42249427的博客
10-26 2665
实现Android ViewPager2的自定义Indicator
TabLayout 之改变 Indicator 的宽度
天行健-君子以自强不息
01-05 3361
前言 默认情况下，TabLayout 中 Indicator 的宽度和该 Tab 的宽度相等。但是有时候我们需要自定义 Indicator 的宽度，所以本文将介绍改变 Indicator 的宽度的几种方法。 一、反射实现 第一种方法是通过反射的方式改变 Indicator 的宽度。 TabLayout 只提供了app:tabIndicatorHeight属性来设置 Indicator 的宽度，但没有提供设置宽度的 API。所以只能自己去修改了，先看下源码是怎么实现 Indicator 的。 ..
Android ViewPager+TabLayout下划线
weixin_58159075的博客
07-14 497
【代码】Android ViewPager+TabLayout下划线。
Android程序之Indicator介绍
03-26 737
Indicator确实是个老梗了... 有重写HorizontalScrollView的，有重写LinearLayout。 这个是重写LinearLayout的哦，往LinearLayout里add   TextView用作tab标签，在LinearLayout底部画一个矩形当作指示器。 ViewPager滚动的时候用简单的小学加减乘除混合运算来机选这个矩形位置，然后滚动就好了
android 之 indicatorView的实现分析
u011546675的博客
06-01 1097
android 之Viewpaper的indicatorViewindicator的实现 使用一个软件常注意到刚使用软件时会有一个导览页，也就是我们将要实现的indicator(指示器)，接来我们介绍在android 中如何实现？ indicator的实现 首先，我们需要了解indicator的组成，一般来说，它是由几个圆点组成，翻到对应页时，圆点颜色改变，有些indicator圆点还有字母或者数...
android 自定义indicator,Android实现自定义Indicator的导航控件
weixin_31234809的博客
05-25 1180
一 介绍：导航功能几乎是所有的APP都具备的基础功能之一，Android系统提供了TabLayout+ViewPager的组合来实现该功能。再使用之初，发现该组合真是无敌了，但是。。。总有一些UI设计师觉得原生TabLayout的下划线样式不符合用户的审美，比如说，下划线的宽度要跟文本的宽度一样，下划线的样式要换成图片等等。TabLayout在这些需求面前显得那么无助，程序员被迫搬砖。WeTabL...
Android 自定义 View 之 实现一个多功能的 IndicatorView
weixin_33882443的博客
05-23 276
Indicator (指示器) 可能大家都见的比较多了，在一个APP中，有很多场景都会用到Indicator，比如第一次安装APP 时的引导页，首页上面的广告Banner ，又或者是Tab下面的Indicator。Indicator 一般配合ViewPager 使用，它能很直观的反应出ViewPager 中一共有多少页，当前选中的是哪一页，用户能够很容易的看出是否还可以滑动，用户体验较好。那么本篇...
android indicator,android magicindicator 万能的指示栏框架学习
weixin_35748962的博客
05-27 1120
1.打造一个项目上要求实现的带圆角的，有图片的底部跳转tab:结合这2个框架里面的对象使用：CommonNavigator+ CommonPagerTitleView二话不说先上效果图。 xml布局：1.simple_pager_title_layout.xmlandroid:layout_width="match_parent"android:layout_height="match_paren...
android 自定义indicator,Android自定义Indicator
weixin_29800471的博客
05-25 660
最近利用空闲时间，通过贝塞尔曲线写了一个Indicator，效果如下(视频转换gif效果不好)完整代码传送门对于原点的绘制及变化，需要对贝塞尔曲线及通过三阶贝塞尔曲线绘制圆形有初步了解，请参考以下文章Bézier curve；Composite Bézier curve；Approximate a circle with cubic Bézier curves对于贝塞尔曲线理论，没有较为扎实的数学...
Android万能指示器IndicatorView
CHNE_TAO_EMSM的博客
11-09 501
问题：需要支持图片或颜色值的指示器。
TabLayout的Indicator自定义宽度
文韬武略的专栏
05-19 2334
方法一设置Indicator的宽度 <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:tools="http://schemas.android.com/tools" xmlns:android="http://schemas.android.com/apk/res/android"> <item android:width="10dp" android:hei.
Android设置TabLayout及下划线宽度
知道的越多，不知道的越多。
11-19 3047
不过，使用动态的话，如果不设置相关的属性，是不能达到两个选项各自占长度一半，还得给Tablayout加上下列属性。先是通过findviewbyid方法找到实例，之后调用tablayout的newTab方法来创建tab。最后根据 android:width=“40dp” 就可以设置指定的宽度，我这里是40dp。app:tabMaxWidth=“xxdp” 设置最大的tab宽度。app:tabMinWidth=“xxdp” 设置最小的tab宽度。app：tabMod 设置Tab模式。Tablayout的使用。
Android开之自定义Indicator指示器
最新发布
xiayiye5的博客
09-06 247
先看自定义view kotlin版本和Java版本。需要在viewpager2设置数据后绑定，否则指示器不出来。然后与viewpager2绑定指示器的关系即可(attrs.xml自定义属性文件。先看效果图(仅供学习使用)再看看activity。
Android 实践总结：自定义 TabLayout 下划线宽度
Byte_O_O的博客
09-15 578
默认情况下，TabLayout 在选中的标签下方会显示一条下划线，用于突出当前选中的标签。通过自定义的 CustomTabLayout 类，我们可以灵活地控制下划线的宽度，以满足不同的设计需求。要实现自定义下划线宽度，我们需要创建一个自定义的 TabLayout，继承自 TabLayout 类。获取 TabLayout 的测量宽度，然后根据标签数量计算出自定义宽度，这里示例中设定为总宽度的 60%。上述代码中，我们设置了 TabLayout 的一些基本属性，包括宽度、高度、标签模式、标签位置等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值