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 页中的内容，如下所示：
-- -------------------- ---- -------
-------------------------------------------
----------------------------
-----------------------------------
------------------------------------
-------------------
-----------------------
------------------------------------
----------------------------
-----------------------------------
--------------------------------------在这个布局文件中，TabLayout 的 app:tabMode 和 app:tabGravity 属性用于设置 TabLayout 的展示方式，这里设置了 fixed 和 fill。fixed 表示 Tab 宽度固定，fill 表示 Tab 填充整个 TabLayout。
3. 设置 TabLayout 样式
为了让 TabLayout 与应用程序的风格相一致，我们需要对 TabLayout 进行适当的样式设置，比如设置背景颜色、文字大小、文本样式等等。这些样式可以在 XML 文件中设置，也可以在代码中设置。下面是设置 TabLayout 样式的示例代码：
-- -------------------- ---- -------
-------------------------------------------
----------------------------
-----------------------------------
------------------------------------
----------------------------------------
---------------------------------------
-----------------------
--------------------------
----------------------------------
-------------------------------
----------------------------
--------------------------------
-------------------
-----------------------在这个布局文件中，我们设置了 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，实现如下：
-- -------------------- ---- -------
----- -------------- ------- -------------------- -
------ ----------------------- --------------- --- --- --------- -
--------- ----------
-
--------
---------
------ -------- ----------- --------- -
-- --------- --------
------ ---------- -
---- --
------ --- ------------
---- --
------ --- ------------
---- --
------ --- ------------
--------
------ -----
-
-
---------
------ --- ---------- -
-- -- -------- ---
------ --
-
---------
---------
------ ------------ ---------------- --------- -
-- --------- --- --
------ ---------- -
---- --
------ -------
---- --
------ -------
---- --
------ -------
--------
------ -----
-
-
-在适配器中，我们根据 position 返回对应的 Fragment，同时还根据 position 返回对应的 Tab 标题。这样，就能够实现 Tab 标签和内容的切换。
5. 给 TabLayout 添加自定义布局
有时候，我们希望给 TabLayout 添加自定义的布局，比如添加一个小红点或者是一个数字，来标识新消息或提醒用户执行某项任务。下面是给 TabLayout 添加数字的示例代码：
-- -------------------- ---- -------
------- ---- ------------------- --------- --- ------- -
-- ----- -------
------------- --- - -----------------------------
-- ---- -- ----- -
-------
-
-- -- --- ----------
---- --------- - --------------------
-- ---------- -- ----- -
-------- ------- - --------------------------------------
-- -------- -- ----- -
---------------------------- -- - - --------- - --------------
----------------------------------------
-
-
-在这段代码中，我们通过 TabLayout 的 getTabAt 方法获取对应索引的 TabView，并在里面设置数字。这个数字布局可以在 XML 中定义，如下所示：
-- -------------------- ---- -------
---------
--------------------------
-----------------------------------
------------------------------------
-------------------------------
---------------------------------------
---------------------------
-----------------------
------------------------
-------------------------
--------------------------
---------------------------
---------------------------在这个布局文件中，我们定义了一个文本框，用于展示数字，同时使用了一个背景和颜色。如果需要修改样式，可以根据需要进行调整。
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