在 Android 开发中，TabLayout 控件是常用的 UI 控件之一。它能够快速地实现标签页的切换，而且还可以和 ViewPager 配合使用，实现更加复杂的界面效果。在 Material Design 风格下，TabLayout 控件也是非常重要的一部分，它能够让应用程序的界面更加美观、易用。本文将详细介绍 Android 平台下的 Material Design 风格 TabLayout 控件的使用方法，并提供示例代码。
TabLayout 控件的基本用法
首先，我们需要在布局文件中添加 TabLayout 控件。例如：
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabGravity="fill"/>其中，tabMode 属性表示标签页的模式，可以是 fixed 或 scrollable，分别表示固定模式和可滚动模式。tabGravity 属性表示标签页的对齐方式，可以是 fill 或 center，分别表示填充方式和居中方式。
接下来，我们需要在代码中设置 TabLayout 控件的标签页。例如：
TabLayout tabLayout = findViewById(R.id.tab_layout);
tabLayout.addTab(tabLayout.newTab().setText("标签页1"));
tabLayout.addTab(tabLayout.newTab().setText("标签页2"));
tabLayout.addTab(tabLayout.newTab().setText("标签页3"));这样就可以在 TabLayout 控件中添加三个标签页，分别为“标签页1”、“标签页2”、“标签页3”。在标签页被选中时，可以通过设置监听器来响应事件。例如：
-- -------------------- ---- -------
-------------------------------------- --------------------------------- -
---------
------ ---- --------------------------- ---- -
-- ----------
-
---------
------ ---- ----------------------------- ---- -
-- ------------
-
---------
------ ---- ----------------------------- ---- -
-- ------------
-
---TabLayout 控件与 ViewPager 的配合使用
TabLayout 控件不仅可以作为标签页的容器，还可以和 ViewPager 配合使用，实现更加复杂的界面效果。通过将 TabLayout 控件和 ViewPager 控件绑定在一起，就可以实现标签页的切换和页面的滑动联动。例如：
-- -------------------- ---- -------
----------------------------------------
----------------------------
-----------------------------------
------------------------------------
-------------------
-----------------------
----------------------------------
----------------------------
-----------------------------------
--------------------------------------在代码中，我们需要先创建适配器来管理 ViewPager 中的页面。例如：
-- -------------------- ---- -------
------ ----- -------------- ------- -------------------- -
------- -------------- -----------
------- ------------ --------
------ ------------------------------ --- -------------- ---------- ------------ ------- -
----------
---------- - ----------
------- - -------
-
---------
------ -------- ----------- --------- -
------ -------------------------
-
---------
------ --- ---------- -
------ ------------------
-
---------
------ ------------ ---------------- --------- -
------ ----------------------
-
-然后，我们需要在代码中设置 ViewPager 的页面和 TabLayout 控件的标签页。例如：
-- -------------------- ---- ------- --------- --------- - ------------------------------ --------- --------- - ------------------------------ -------------- --------- - --- -------------- ----------------- ------------- ----------------- ------------- ----------------- ------------- ------------ ------ - --- -------------- ------------------- ------------------- ------------------- -------------- ------- - --- ------------------------------------------- ---------- -------- ------------------------------ ----------------------------------------
这样就可以将 ViewPager 中的三个页面和 TabLayout 控件的三个标签页进行绑定，实现标签页的切换和页面的滑动联动。
TabLayout 控件的高级用法
除了基本用法和与 ViewPager 的配合使用，TabLayout 控件还有很多高级用法。例如，可以自定义标签页的样式，将图标和文字进行组合，实现更加丰富的界面效果。例如：
TabLayout tabLayout = findViewById(R.id.tab_layout);
tabLayout.addTab(tabLayout.newTab().setIcon(R.drawable.ic_tab1).setText("标签页1"));
tabLayout.addTab(tabLayout.newTab().setIcon(R.drawable.ic_tab2).setText("标签页2"));
tabLayout.addTab(tabLayout.newTab().setIcon(R.drawable.ic_tab3).setText("标签页3"));这样就可以将标签页的文字和图标进行组合，实现更加丰富的界面效果。
示例代码
下面是一个完整的示例代码，展示了 TabLayout 控件的基本用法和与 ViewPager 的配合使用，以及自定义标签页的样式。
-- -------------------- ---- -------
----------------------------------------
----------------------------
-----------------------------------
------------------------------------
-------------------
-----------------------
----------------------------------
----------------------------
-----------------------------------
--------------------------------------
------ ------------------ ---------------------------------
----- --------------------------------------------------
----- -----------------------------------------------------
----- ----------------------------------------------------------
--------
------ -------------------------- -----------------------------------
----- ---------------------------------------------------
--------
--------- --------- - ------------------------------
---------------------------------------------------------------------------------
---------------------------------------------------------------------------------
---------------------------------------------------------------------------------
------------------------------------------------
------------------------------------------------
------------------------------------------------------- ---------------------- ---------------------------- ----------------------
------------------------------------------------------------------- ----------------------
------------------------------------------------------------
--------- --------- - ------------------------------
-------------- --------- - --- --------------
----------------- -------------
----------------- -------------
----------------- -------------
------------ ------ - --- --------------
-------------------
-------------------
-------------------
-------------- ------- - --- ------------------------------------------- ---------- --------
------------------------------
----------------------------------------总结
本文介绍了 Android 平台下的 Material Design 风格 TabLayout 控件的基本用法和高级用法，包括标签页的添加、标签页的切换、与 ViewPager 的配合使用、自定义标签页的样式等。TabLayout 控件不仅可以实现标签页的切换，还可以和 ViewPager 配合使用，实现页面的滑动联动，为应用程序的界面效果提供了更加丰富的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f265aa2b3ccec22fafdfa3