Material Design 风格的 TabLayout 使用指南

TabLayout 是 Android 设计库中的一个组件，它可以用来实现标签切换的效果。在使用 TabLayout 时，我们可以根据需要添加自定义的图标和文字，在用户选择不同的标签时，应用程序可以自动加载相应的内容。Material Design 风格的 TabLayout 更加美观，是 Android 开发中常见的组件之一，本文将详细介绍 Material Design 风格的 TabLayout 的使用方法。

1. 添加依赖

在工程的 build.gradle 中添加依赖：

implementation 'com.google.android.material:material:1.3.0'

2. 布局文件中添加 TabLayout

在布局文件中添加 TabLayout 和 ViewPager，ViewPager 用于展示 Tab 页中的内容，如下所示：

<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:tabGravity="fill"/>

<androidx.viewpager.widget.ViewPager
    android:id="@+id/view_pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

在这个布局文件中，TabLayout 的 app:tabMode 和 app:tabGravity 属性用于设置 TabLayout 的展示方式，这里设置了 fixed 和 fill。fixed 表示 Tab 宽度固定，fill 表示 Tab 填充整个 TabLayout。

3. 设置 TabLayout 样式

为了让 TabLayout 与应用程序的风格相一致，我们需要对 TabLayout 进行适当的样式设置，比如设置背景颜色、文字大小、文本样式等等。这些样式可以在 XML 文件中设置，也可以在代码中设置。下面是设置 TabLayout 样式的示例代码：

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    android:minHeight="?attr/actionBarSize"
    android:textSize="14sp"
    app:tabTextColor="#ffffff"
    app:tabSelectedTextColor="#ffffff"
    app:tabIndicatorColor="#ffffff"
    app:tabIndicatorHeight="2dp"
    app:tabIndicatorFullWidth="true"
    app:tabMode="fixed"
    app:tabGravity="fill"/>

在这个布局文件中，我们设置了 TabLayout 的背景颜色、最小高度、文字大小、文字颜色、选中文字颜色、指示器颜色、指示器高度、指示器是否填充整个 TabLayout 等属性。如果需要修改样式，可以根据需要进行调整。

4. 添加 TabLayout 和 ViewPager 的关联

在代码中，我们需要将 TabLayout 和 ViewPager 关联起来，以实现 Tab 的切换和内容的展示。在 MainActivity 的 onCreate 方法中，添加如下代码：

TabLayout tabLayout = findViewById(R.id.tab_layout);
ViewPager viewPager = findViewById(R.id.view_pager);
viewPager.setAdapter(new MyPagerAdapter(getSupportFragmentManager(), FragmentPagerAdapter.BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT));
tabLayout.setupWithViewPager(viewPager);

在这个代码中，我们创建了 TabLayout 和 ViewPager 对象，并将 ViewPager 设置给了 TabLayout。同时，我们还实现了一个适配器 MyPagerAdapter，它用于向 ViewPager 中添加 Tab 对应的 Fragment，实现如下：

class MyPagerAdapter extends FragmentPagerAdapter {

    public MyPagerAdapter(@NonNull FragmentManager fm, int behavior) {
        super(fm, behavior);
    }

    @NonNull
    @Override
    public Fragment getItem(int position) {
        // 根据索引返回对应的 fragment
        switch (position) {
            case 0:
                return new Fragment1();
            case 1:
                return new Fragment2();
            case 2:
                return new Fragment3();
            default:
                return null;
        }
    }

    @Override
    public int getCount() {
        // 返回 fragment 的个数
        return 3;
    }

    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        // 根据索引返回对应的 tab 标题
        switch (position) {
            case 0:
                return "Tab1";
            case 1:
                return "Tab2";
            case 2:
                return "Tab3";
            default:
                return null;
        }
    }
}

在适配器中，我们根据 position 返回对应的 Fragment，同时还根据 position 返回对应的 Tab 标题。这样，就能够实现 Tab 标签和内容的切换。

5. 给 TabLayout 添加自定义布局

有时候，我们希望给 TabLayout 添加自定义的布局，比如添加一个小红点或者是一个数字，来标识新消息或提醒用户执行某项任务。下面是给 TabLayout 添加数字的示例代码：

private void setTabViewBadge(int position, int number) {
  // 获取对应的 TabView
  TabLayout.Tab tab = tabLayout.getTabAt(position);
  if (tab == null) {
    return;
  }
  // 取出 tab 内部的布局并设置数字
  View tabLayout = tab.getCustomView();
  if (tabLayout != null) {
    TextView tvBadge = tabLayout.findViewById(R.id.tv_badge);
    if (tvBadge != null) {
      tvBadge.setVisibility(number == 0 ? View.GONE : View.VISIBLE);
      tvBadge.setText(String.valueOf(number));
    }
  }
}

在这段代码中，我们通过 TabLayout 的 getTabAt 方法获取对应索引的 TabView，并在里面设置数字。这个数字布局可以在 XML 中定义，如下所示：

<TextView
    android:id="@+id/tv_badge"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:background="@drawable/bg_badge"
    android:textColor="#ffffff"
    android:textSize="10sp"
    android:paddingTop="1dp"
    android:paddingLeft="4dp"
    android:paddingRight="4dp"
    android:paddingBottom="1dp"
    android:visibility="gone"/>

在这个布局文件中，我们定义了一个文本框，用于展示数字，同时使用了一个背景和颜色。如果需要修改样式，可以根据需要进行调整。

6. 总结

本文介绍了 Material Design 风格的 TabLayout 的使用方法。首先，我们需要添加依赖，然后在布局文件中添加 TabLayout 和 ViewPager，然后进行样式设置。接着，我们需要将 TabLayout 和 ViewPager 关联起来，在适配器中添加对应的 Fragment 和 Tab 标题。最后，我们介绍了如何给 TabLayout 添加自定义布局。

TabLayout 是 Android 中常见的组件之一，它能够方便地实现标签切换的效果，同时，Material Design 风格的 TabLayout 还能够为应用程序增添更多的美感。希望本文对您对使用 Material Design 风格的 TabLayout 有所帮助。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b71cbbadd4f0e0fffb5351