Android中如何按索引修改TabLayout指示器颜色实现类进度条效果

实现方案 #

你原有代码存在两个可优化点：

1. 在onConfigureTab中重复添加OnTabSelectedListener，会导致同一事件多次触发，需要将监听逻辑移出
2. 布局中TabLayout的layout_height设为2dp会无法显示tab文字，属于笔误，需调整

步骤1：修改TabLayout布局

关闭系统默认指示器，调整布局参数：

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabMode="fixed"
    app:tabIndicator="@null" /> <!-- 关闭系统默认指示器 -->
<androidx.viewpager2.widget.ViewPager2
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/vpager"/>

步骤2：自定义TabItem布局

新建layout/tab_item.xml，每个tab自带独立指示器：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center">
    <TextView
        android:id="@+id/tv_tab_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginVertical="8dp"
        android:textSize="14sp"/>
    <!-- 自定义指示器 -->
    <View
        android:id="@+id/tab_indicator"
        android:layout_width="match_parent"
        android:layout_height="2dp"/>
</LinearLayout>

步骤3：代码逻辑实现

首先定义全局变量存储访问状态：

// 记录已访问的最大tab索引，默认第一个已访问
private int maxVisitedPosition = 0;
// 替换为你自己的tab标题列表
private final String[] tabTitles = {"步骤1", "步骤2", "步骤3", "步骤4"};

绑定TabLayout和ViewPager2：

new TabLayoutMediator(tabLayout, vpager, (tab, position) -> {
    // 加载自定义tab布局
    View tabView = LayoutInflater.from(this).inflate(R.layout.tab_item, null);
    TextView title = tabView.findViewById(R.id.tv_tab_title);
    title.setText(tabTitles[position]);
    tab.setCustomView(tabView);
    // 初始化指示器颜色
    View indicator = tabView.findViewById(R.id.tab_indicator);
    if (position <= maxVisitedPosition) {
        indicator.setBackgroundColor(getResources().getColor(R.color.colorPrimary));
    } else {
        indicator.setBackgroundColor(getResources().getColor(R.color.gray));
    }
}).attach();

添加ViewPager2页面切换监听，动态更新指示器颜色：

vpager.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
    @Override
    public void onPageSelected(int position) {
        super.onPageSelected(position);
        // 仅前进时更新最大已访问索引，回退不修改
        if (position > maxVisitedPosition) {
            maxVisitedPosition = position;
        }
        // 遍历所有tab更新指示器颜色
        for (int i = 0; i < tabLayout.getTabCount(); i++) {
            TabLayout.Tab currentTab = tabLayout.getTabAt(i);
            if (currentTab == null || currentTab.getCustomView() == null) continue;
            View indicator = currentTab.getCustomView().findViewById(R.id.tab_indicator);
            if (i <= maxVisitedPosition) {
                indicator.setBackgroundColor(getResources().getColor(R.color.colorPrimary));
            } else {
                indicator.setBackgroundColor(getResources().getColor(R.color.gray));
            }
        }
    }
});

如果需要按索引手动修改已访问状态，直接修改maxVisitedPosition后重新遍历更新所有tab的指示器颜色即可。

内容的提问来源于stack exchange，提问作者Malo