Android Tablayout 自定义Tab布局的使用案例

Tablayout是Android Material Design库中的一部分，它提供了一个用于展示多个页面的标签栏，很多应用程序都使用它来实现这个功能。默认情况下，Tablayout会使用系统提供的样式来展示标签。但是有时候我们可能需要自定义Tab布局，来满足一些特殊的需求。

本文将介绍如何使用Tablayout自定义Tab布局。

步骤一：添加依赖

在项目的build.gradle文件中加入以下依赖：

dependencies {
    implementation 'com.google.android.material:material:1.3.0'
}

步骤二：创建自定义Tab布局

创建一个XML布局文件作为自定义Tab布局，在这个布局文件里面添加自己需要的控件。例如下面的例子是一个带有图标和文本的Tab：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/tab_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />

    <TextView
        android:id="@+id/tab_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tab_icon"
        android:layout_centerHorizontal="true"
        android:textColor="@android:color/white" />

</RelativeLayout>

步骤三：初始化Tablayout

初始化Tablayout，然后设置自定义Tab布局：

TabLayout tabLayout = findViewById(R.id.tab_layout);
tabLayout.setupWithViewPager(viewPager);

for (int i = 0; i < tabLayout.getTabCount(); i++) {
    TabLayout.Tab tab = tabLayout.getTabAt(i);
    if (tab != null) {
        tab.setCustomView(R.layout.tab_layout_custom);
        ImageView tabIcon = tab.getCustomView().findViewById(R.id.tab_icon);
        TextView tabText = tab.getCustomView().findViewById(R.id.tab_text);

        tabIcon.setImageResource(ICON_RESID[i]);
        tabText.setText(TAB_TITLES[i]);
    }
}

在上面的代码中，我们首先调用了Tablayout的setupWithViewPager()方法将ViewPager与Tablayout绑定，接着遍历了每个Tab，为每个Tab设置了自定义布局，并且将自定义布局中的控件赋值。

示例一：自定义带Icon的Tab

下面的代码演示了一个自定义带有Icon的Tab的例子：

TabLayout tabLayout = findViewById(R.id.tab_layout);
tabLayout.setupWithViewPager(viewPager);

for (int i = 0; i < tabLayout.getTabCount(); i++) {
    TabLayout.Tab tab = tabLayout.getTabAt(i);
    if (tab != null) {
        tab.setCustomView(R.layout.tab_layout_icon);
        ImageView tabIcon = tab.getCustomView().findViewById(R.id.tab_icon);

        tabIcon.setImageResource(ICON_RESID[i]);
    }
}

在这个例子中，我们创建了一个自定义布局文件tab_layout_icon.xml，它只包含一个ImageView控件用于展示Icon。然后我们通过Tab对象获取到相应的ImageView控件，并为其设置图标。

示例二：自定义带Badge的Tab

下面的代码演示了一个自定义带有Badge的Tab的例子：

TabLayout tabLayout = findViewById(R.id.tab_layout);
tabLayout.setupWithViewPager(viewPager);

for (int i = 0; i < tabLayout.getTabCount(); i++) {
    TabLayout.Tab tab = tabLayout.getTabAt(i);
    if (tab != null) {
        tab.setCustomView(R.layout.tab_layout_custom);
        ImageView tabIcon = tab.getCustomView().findViewById(R.id.tab_icon);
        TextView tabText = tab.getCustomView().findViewById(R.id.tab_text);

        tabIcon.setImageResource(ICON_RESID[i]);
        tabText.setText(TAB_TITLES[i]);

        if (i == 2) { // 第三个Tab上添加Badge
            View badgeView = LayoutInflater.from(this).inflate(R.layout.badge_layout, tabIcon, false);
            ImageView badgeIcon = badgeView.findViewById(R.id.badge_icon);
            TextView badgeText = badgeView.findViewById(R.id.badge_text);
            badgeText.setText("99+");

            tabIcon.addView(badgeView);
        }
    }
}

在这个例子中，我们创建了一个自定义布局文件tab_layout_custom.xml，它包含了一个ImageView控件和一个TextView控件，用于同时展示图标和文本。然后我们为第三个Tab添加了一个Badge，这里我们创建了一个Badge布局文件badge_layout.xml，它包含了一个ImageView控件和一个TextView控件，用于展示红点和数字。最后我们通过Tab对象获取到第三个Tab对应的ImageView控件，将Badge布局添加到它的上面。

这样，我们就完成了一个自定义带Badge的Tab布局。

总结

通过以上的步骤和示例，我们就可以在Tablayout中自定义Tab布局并且添加各种效果，如、改变字体颜色、字体大小或者添加各类View控件扩展功能。这样可以增强我们应用界面的个性化，提升用户的使用体验和美观性。