在前端开发中，Tab Layout 是一个经常使用的控件。它可以让用户轻松地切换不同的页面。Material Design 标准中提供了一种滑动式的 TabLayout，它更加美观，并且能够适配不同的屏幕尺寸。本文将会详细介绍 Material Design 中使用滑动式 TabLayout 的制作方法，并提供示例代码。
前置技术
在开发 Material Design 中的滑动式 TabLayout 之前，我们需要掌握一些前置技术。其中主要包括：
- Android Studio 的使用
- Java 语言的基础知识
- Android 开发基础知识
制作方法
1. 引入依赖
首先，我们需要在 build.gradle 文件中引入依赖：
implementation 'com.google.android.material:material:1.3.0'
2. 布局文件
在布局文件中添加 TabLayout 和 ViewPager：
-- -------------------- ---- -------
-------------------------------------------
---------------------------
-----------------------------------
------------------------------------
------------------------
----------------------- --
------------------------------------
---------------------------
-----------------------------------
------------------------------------ --其中 tabMode 设置为 scrollable 表示可以滚动，tabGravity 设置为 center 表示居中对齐。
3. 创建 Fragment
在创建 Fragment 时，需要实现 FragmentPagerAdapter 并重写以下方法：
-- -------------------- ---- -------
------ ----- -------------- ------- -------------------- -
------- ------ ----- --- --------- - --
-- -----------
------ ------------------------------ ---------------- -
-----------------------
-
---------
------ -------- ----------- --------- -
------ ---------- -
---- --
------ --- ------------
---- --
------ --- ------------
---- --
------ --- ------------
--------
------ -----
-
-
---------
------ --- ---------- -
------ ----------
-
---------
------ ------------ ---------------- --------- -
------ ---------- -
---- --
------ ---- ---
---- --
------ ---- ---
---- --
------ ---- ---
--------
------ ---
-
-
-其中 NUM_PAGES 表示页面个数，Fragment1、Fragment2、Fragment3 分别表示三个页面。getPageTitle 方法返回每个页面的标题。
4. 初始化 TabLayout 和 ViewPager
在 MainActivity 中初始化 TabLayout 和 ViewPager：
-- -------------------- ---- -------
------ ----- ------------ ------- ----------------- -
------- --------- ----------
------- --------- ----------
---------
--------- ---- --------------- ------------------- -
-----------------------------------
---------------------------------------
--------- - -----------------------------
--------- - -----------------------------
-------------- ------------ - --- --------------------------------------------
-----------------------------------
----------------------------------------
-
-在上述代码中，我们将 TabLayout 和 ViewPager 绑定在一起，并将 FragmentPagerAdapter 对象设置到 ViewPager 中。最后，我们将 ViewPager 传递到 TabLayout，以便它们同步工作。
5. 样式
如果需要对 Tab 的样式进行自定义，可以在 styles.xml 文件中添加以下代码：
<style name="AppTabLayoutStyle" parent="Widget.MaterialComponents.TabLayout">
<item name="android:textColor">@android:color/black</item>
<item name="tabIndicatorColor">@android:color/white</item>
<item name="tabSelectedTextColor">@android:color/white</item>
</style>最后，在 TabLayout 的 XML 中添加 style 属性即可使用自定义的样式。
示例代码
下面给出一个使用滑动式 TabLayout 的完整的示例代码：
-- -------------------- ---- -------
------ ----- ------------ ------- ----------------- -
------- --------- ----------
------- --------- ----------
---------
--------- ---- --------------- ------------------- -
-----------------------------------
---------------------------------------
--------- - -----------------------------
--------- - -----------------------------
-------------- ------------ - --- --------------------------------------------
-----------------------------------
----------------------------------------
-
------ ----- -------------- ------- -------------------- -
------- ------ ----- --- --------- - --
-- -----------
------ ------------------------------ ---------------- -
-----------------------
-
---------
------ -------- ----------- --------- -
------ ---------- -
---- --
------ --- --------------
---- --
------ --- ----------------
---- --
------ --- ---------------
--------
------ -----
-
-
---------
------ --- ---------- -
------ ----------
-
---------
------ ------------ ---------------- --------- -
------ ---------- -
---- --
------ ------
---- --
------ --------
---- --
------ -------
--------
------ ---
-
-
-
------ ------ ----- ----------- ------- -------- -
---------
------ ---- --------------------------- ---------
--------- ---------- ------ ------------------- -
---- -------- - -----------------
-------------------------- ---------- -------
------ ---------
-
-
------ ------ ----- ------------- ------- -------- -
---------
------ ---- --------------------------- ---------
--------- ---------- ------ ------------------- -
---- -------- - -----------------
---------------------------- ---------- -------
------ ---------
-
-
------ ------ ----- ------------ ------- -------- -
---------
------ ---- --------------------------- ---------
--------- ---------- ------ ------------------- -
---- -------- - -----------------
--------------------------- ---------- -------
------ ---------
-
-
-总结
在本文中，我们讲解了 Material Design 中使用滑动式 TabLayout 的制作方法，并给出了示例代码。希望本文对您有所帮助，也祝愿您在前端开发中能够得心应手。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6484104248841e989433eb0a