Android TabLayout 自定义指示条实现教程

TabLayout是Android官方提供的一个用于实现标签页切换的控件，它可以快速实现标签页切换功能，同时还支持自定义指示条的样式和位置。

下面是实现自定义指示条的方法：

创建自定义指示条布局文件

在项目中新建一个布局文件，例如'tab_indicator.xml'，可以在其中添加自己想要的指示条样式，例如以下代码：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="4dp"
    android:background="@color/colorAccent"
    android:orientation="vertical" />

这里使用了一个线性布局作为指示条，高度为4dp，颜色为colorAccent。

实现TabLayout.OnTabSelectedListener接口

在Activity或Fragment中实现TabLayout.OnTabSelectedListener接口，重写其方法onTabSelected、onTabUnselected和onTabReselected，其中onTabSelected方法中可以通过调用setCustomView方法设置自定义的指示条布局文件。

例如：

public class MainActivity extends AppCompatActivity implements TabLayout.OnTabSelectedListener {

    private TabLayout mTabLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mTabLayout = findViewById(R.id.tab_layout);
        mTabLayout.addOnTabSelectedListener(this);

        // 添加Tab
        mTabLayout.addTab(mTabLayout.newTab().setText("Tab 1"));
        mTabLayout.addTab(mTabLayout.newTab().setText("Tab 2"));
        mTabLayout.addTab(mTabLayout.newTab().setText("Tab 3"));
    }

    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        // 选中Tab时设置自定义指示条布局文件
        View customView = LayoutInflater.from(this).inflate(R.layout.tab_indicator, null);
        tab.setCustomView(customView);
    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {
        // Tab被取消选中时清除自定义指示条布局文件
        tab.setCustomView(null);
    }

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

运行程序

此时运行程序，就可以看到自定义的指示条样式了。

注意事项：

自定义指示条布局文件的高度应该与TabLayout高度保持一致，否则可能会出现显示不完整的情况；
TabLayout的选中监听器中使用setCustomView方法设置自定义指示条布局文件时，需要注意每次调用setCustomView方法都会重新绘制指示条，因此如果频繁切换Tab，可能会导致性能问题。如果需要避免这个问题，可以在onCreate方法中先为每个Tab设置一个默认的指示条，然后在选中Tab时更新指示条的颜色或者隐藏/显示指示条。