Android 中的协调器 TabLayout

在 Android 应用程序中，TabLayout 是一种非常常见的 UI 组件。作为一个协调器，TabLayout 可以协调与之关联的 ViewPager，并且可以通过设置一些属性来定义其自身的外观和行为。本文将介绍如何使用 TabLayout 来创建选项卡式的 UI 界面，以及如何使用 ViewPager 和 Fragment 来显示不同的内容。

1. 如何使用 TabLayout

要在应用程序中使用 TabLayout，首先需要添加以下依赖项到您的 build.gradle 文件中：

implementation 'com.google.android.material:material:<version>'

然后在布局文件中添加一个 TabLayout 组件：

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

接下来，您需要在您的 Activity 或 Fragment 中设置 TabLayout 的属性并与 ViewPager 或其他可滑动组件协调：

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

ViewPager viewPager = findViewById(R.id.view_pager);
viewPager.setAdapter(new MyPagerAdapter(getSupportFragmentManager()));

// 关联 TabLayout 和 ViewPager
tabLayout.setupWithViewPager(viewPager);

这里，MyPagerAdapter 是一个实现 FragmentPagerAdapter 的自定义适配器类。MyPagerAdapter 的实现类应该返回一个有多个 Fragment 的集合，并为每个 Fragment 返回一个标题字符串。

class MyPagerAdapter extends FragmentPagerAdapter {
    private String[] titles = {"Tab 1", "Tab 2", "Tab 3"};

    MyPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        switch (position) {
            case 0:
                return new Fragment1();
            case 1:
                return new Fragment2();
            case 2:
                return new Fragment3();
            default:
                return null;
        }
    }

    @Override
    public int getCount() {
        return titles.length;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return titles[position];
    }
}

现在您就可以在您的应用程序中使用 TabLayout 了。在运行您的应用程序时，您应该会看到一个带有选项卡的 UI 界面，并且当您滑动以切换不同的选项卡时，与之关联的内容会相应地切换。

2. 设置 TabLayout 的外观和行为

在默认情况下，TabLayout 的外观和行为是与您在上面的实现相同的：选项卡以纯文本形式呈现，并且可以滑动和点击以导航到相关内容。但是，您可以通过设置一些属性来定义其外观和行为。

2.1. 显示图标

如果您想在选项卡中包含图标，可以在 TabLayout 中设置 Tab 对象的自定义布局：

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

for (int i = 0; i < tabLayout.getTabCount(); i++) {
    TabLayout.Tab tab = tabLayout.getTabAt(i);

    if (tab != null) {
        tab.setCustomView(R.layout.tab_with_icon);

        ImageView iconView = Objects.requireNonNull(tab.getCustomView()).findViewById(R.id.tab_icon);
        iconView.setImageResource(R.drawable.ic_tab);
    }
}

这里，R.layout.tab_with_icon 是一个包含图标的自定义布局。您需要在自定义布局中提供一个 ImageView，并在运行时获取和设置图像资源。

2.2. 设置 TabLayout 的样式

您可以通过设置 style 属性来更改 TabLayout 的样式。例如，您可以创建一个样式文件 style.xml：

<style name="MyTabLayout" parent="Widget.Design.TabLayout">
    <item name="android:background">@color/colorPrimary</item>
    <item name="tabIndicatorColor">@android:color/white</item>
    <item name="tabTextColor">@android:color/white</item>
</style>

这里，我们创建了一个名为 "MyTabLayout" 的样式，继承自 Widget.Design.TabLayout。它定义了一个 android:background 属性，可以设置选项卡的背景颜色，以及 tabIndicatorColor 和 tabTextColor 属性，可以设置指示器和文本的颜色。

然后，您可以将样式应用于您的 TabLayout：

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    style="@style/MyTabLayout"/>

2.3. 定义图标和文本的位置

默认情况下，TabLayout 显示文本标签，并将它们放置在图标的上面。您可以通过设置 tabGravity 和 tabMode 属性来更改此行为。

例如，如果您想在选项卡中垂直居中文本并将图标放置在文本的上面，可以将 tabGravity 设置为 center，并将 tabMode 设置为 fixed：

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabGravity="center"
    app:tabMode="fixed"/>

结论

TabLayout 是 Android 中常见的协调器之一，它可以帮助您创建选项卡式的 UI 界面，并协调与之关联的 ViewPager 和 Fragment。您可以通过设置一些属性来更改 TabLayout 的外观和行为，例如显示图标、更改样式、定义图标和文本的位置等。希望您可以在实际应用程序中使用 TabLayout，并为您的应用程序创建更好的用户体验。