TabLayout用法详解及自定义样式

项目中常见的 TabLayout 控件是 Android Design Support Library 中的 TabLayout，它可以让我们轻松地实现标签页切换，特别适合用于一些包含多个页面的 App 中。本文将介绍 TabLayout 的用法及自定义样式的实现。

TabLayout 简介

TabLayout 是一个可滚动标签页的控件，和 ViewPager 一起使用可以实现页面切换。TabLayout 支持滚动、图标、文本、吸顶以及与 ViewPager 的联动等功能。

TabLayout 用法

1. 导入 TabLayout

首先需在 build.gradle 中导入 TabLayout 的库：

implementation 'com.android.support:design:28.0.0'

2. 在布局文件中添加 TabLayout

在布局文件中添加 TabLayout 控件，可以设置 id 和一些常用的布局属性，如下所示：

<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    app:tabMode="scrollable"
    app:tabGravity="fill"/>

3. 在 Activity 或 Fragment 中设置 TabLayout

TabLayout tabLayout = findViewById(R.id.tab_layout);
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
...

以上代码中，我们通过调用 TabLayout 的 addTab() 方法添加了两个标签页，这两个标签页都设置了文本，若需要添加其它属性，则可以通过 TabLayout.Tab 的 setCustomView() 方法进行设置。

4. 监听 TabLayout 的切换

我们可以给 TabLayout 设置 addOnTabSelectedListener() 方法来监听切换标签页的事件，也可以给 ViewPager 设置 addOnPageChangeListener() 方法来监听滑动事件，这两者的区别在于，前者的效果是点击即切换，后者是滑动到标签页才进行切换。

示例一：使用 TabLayout 与 ViewPager 实现 Fragment 切换

public class MainActivity extends AppCompatActivity {
    private ViewPager viewPager;
    private TabLayout tabLayout;
    private List<Fragment> fragmentList = new ArrayList<>();

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

        initView();
    }

    private void initView() {
        tabLayout = findViewById(R.id.tab_layout);
        viewPager = findViewById(R.id.view_pager);

        // 添加 Fragment
        fragmentList.add(new Fragment1());
        fragmentList.add(new Fragment2());
        fragmentList.add(new Fragment3());

        // 添加 TabLayout 标签页文本
        tabLayout.addTab(tabLayout.newTab().setText("Fragment 1"));
        tabLayout.addTab(tabLayout.newTab().setText("Fragment 2"));
        tabLayout.addTab(tabLayout.newTab().setText("Fragment 3"));

        // 创建 Fragment 管理器
        FragmentManager fragmentManager = getSupportFragmentManager();

        // 创建适配器
        PagerAdapter pagerAdapter = new PagerAdapter(fragmentManager, fragmentList);

        // 绑定适配器与 TabLayout
        viewPager.setAdapter(pagerAdapter);
        tabLayout.setupWithViewPager(viewPager);
    }
}

以上代码中，我们通过 ViewPager 和 FragmentPagerAdapter 组合的方式实现了 Fragment 的切换效果。

示例二：使用自定义布局实现 TabLayout 的样式

<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    app:tabMode="scrollable"
    app:tabGravity="fill"
    app:tabIndicatorHeight="0dp"
    app:tabTextAppearance="@style/TabLayoutTextStyle"
    app:tabBackground="@drawable/tab_layout_bg"/>

以上代码中，tabIndicatorHeight 设置底部横条高度为 0，app:tabTextAppearance 设置文本样式，app:tabBackground 则设置了背景图，本例中自定义了 Drawable 类型的 tab_layout_bg。

综上，我们通过以上示例实现了 TabLayout 的用法及自定义样式的实现。