TabLayout 是 Material Design 风格中常见的导航组件，可以让用户轻松地在应用的不同部分之间切换。在本文中，将详细介绍 TabLayout 的使用方法，并给出示例代码。
1. 导入 TabLayout
在 Gradle 文件中添加以下行：
implementation 'com.google.android.material:material:1.2.0'
2. 在布局文件中添加 TabLayout
在布局文件中添加以下代码：
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable"
app:tabGravity="fill" />其中，tabMode 属性指定了选项卡模式。可选的值有 fixed（固定宽度，适用于不多于 5 个选项卡），scrollable（可滚动，适用于多于 5 个选项卡）。tabGravity 属性指定了选项卡对其方式。可选的值有 center（居中），fill（填充）。
3. 创建 Fragment
在本例中，假设有三个 Fragment 分别显示不同的内容。可以通过以下方式创建 Fragment：
-- -------------------- ---- -------
------ ----- --------- ------- -------- -
------ ----------- --
---------
------ ---- --------------------------- --------- --------- ----------
------ ------------------- -
------ ------------------------------------ ---------- -------
-
-
------ ----- --------- ------- -------- -
------ ----------- --
---------
------ ---- --------------------------- --------- --------- ----------
------ ------------------- -
------ ------------------------------------ ---------- -------
-
-
------ ----- --------- ------- -------- -
------ ----------- --
---------
------ ---- --------------------------- --------- --------- ----------
------ ------------------- -
------ ------------------------------------ ---------- -------
-
-4. 在 Activity 中设置 TabLayout
在 Activity 中设置 TabLayout，并将 Fragment 添加到 ViewPager 中，如下所示：
-- -------------------- ---- -------
------ ----- ------------ ------- ----------------- -
------- --------- ----------
------- --------- ----------
---------
--------- ---- --------------- ------------------- -
-----------------------------------
---------------------------------------
--------- - ------------------------------
--------- - ------------------------
-- -- --------
--------- --------- - --- ------------
--------- --------- - --- ------------
--------- --------- - --- ------------
-- - -------- --- --------- -
-------------- ------- - --- --------------------------------------------
------------------------------ ---- ----
------------------------------ ---- ----
------------------------------ ---- ----
------------------------------
-- - --------- - --------- --
----------------------------------------
-
------- ------ ----- -------------- ------- -------------------- -
------- ----- -------------- ------------ - --- --------------
------- ----- ------------ ----------------- - --- --------------
------ ----------------------- --------------- --- --- --------- -
--------- ----------
-
------ ----------------------- --------------- --- -
----------
-
--------
---------
------ -------- ----------- --------- -
------ ---------------------------
-
---------
------ --- ---------- -
------ --------------------
-
------ ---- -------------------- --------- ------ ------ -
---------------------------
-----------------------------
-
---------
---------
------ ------------ ---------------- --------- -
------ --------------------------------
-
-
-示例代码
以下是一个完整的 TabLayout 示例代码：
activity_main.xml:
-- -------------------- ---- -------
----- ------------- ------------------
---------------
----------------------------------------------------------
---------------------------------------------------
---------------------------
-----------------------------------
-------------------------------------
-------------------------------------------
----------------------
-----------------------------------
------------------------------------
------------------------
--------------------- --
------------------------------------
----------------------------
-------------------------------
-----------------------------------
------------------------------------ --
-----------------fragment1.xml:
<?xml version="1.0" encoding="utf-8"?>
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/text_view1"
android:text="Fragment 1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center" />fragment2.xml:
<?xml version="1.0" encoding="utf-8"?>
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/text_view2"
android:text="Fragment 2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center" />fragment3.xml:
<?xml version="1.0" encoding="utf-8"?>
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/text_view3"
android:text="Fragment 3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center" />MainActivity.java:
-- -------------------- ---- -------
------ -----------------------------------------
------ -------------------------------
------ --------------------------------------
------ -------------------------------------------
------ ------------------------------------
------ ------------------
------ -------------------------------------------
------ --------------------
------ ---------------
------ ----- ------------ ------- ----------------- -
------- --------- ----------
------- --------- ----------
---------
--------- ---- --------------- ------------------- -
-----------------------------------
---------------------------------------
--------- - ------------------------------
--------- - ------------------------
-- -- --------
--------- --------- - --- ------------
--------- --------- - --- ------------
--------- --------- - --- ------------
-- - -------- --- --------- -
-------------- ------- - --- --------------------------------------------
------------------------------ ---- ----
------------------------------ ---- ----
------------------------------ ---- ----
------------------------------
-- - --------- - --------- --
----------------------------------------
-
------- ------ ----- -------------- ------- -------------------- -
------- ----- -------------- ------------ - --- --------------
------- ----- ------------ ----------------- - --- --------------
------ ----------------------- --------------- --- --- --------- -
--------- ----------
-
------ ----------------------- --------------- --- -
----------
-
--------
---------
------ -------- ----------- --------- -
------ ---------------------------
-
---------
------ --- ---------- -
------ --------------------
-
------ ---- -------------------- --------- ------ ------ -
---------------------------
-----------------------------
-
---------
---------
------ ------------ ---------------- --------- -
------ --------------------------------
-
-
-总结
TabLayout 是一个非常方便的导航组件，在 Android Material Design 中广泛使用。本文中详细介绍了 TabLayout 的使用方法，并给出了示例代码。希望对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c20bb283d39b488162b637