随着移动设备的普及，Android Material Design 已经成为了众多移动应用设计的首选，其特有的扁平化风格以及丰富的动画效果，使得用户更容易参与操作，提高了用户体验。TabLayout 是一种常用的布局控件，本文将详细介绍如何使用TabLayout，包括其常用的属性、方法以及示例代码。
1. TabLayout 基础
TabLayout 是一个高度可定制的材料设计控件，它可为用户提供水平导航选项卡。 TabLayout 在 Android 设计支持库中，可以很方便的引用和使用。TabLayout 和 ViewPager 相结合使用的效果最佳。
使用 TabLayout，我们需要在布局中添加一个TabLayout控件和一个ViewPager控件，如下所示：
-- -------------------- ---- -------
-------------------------------------------------- ----------------------------------------------------------
---------------------------------------------------
-------------------------
-----------------------------------
-------------------------------------
-------------------------------------------
----------------------------
-----------------------------------
------------------------------------
---------------------
------------------- --
------------------------------------
----------------------------
-----------------------------------
---------------------------
---------------------------------------------------- --
----------------------------------------------------其中，TabLayout 的tabMode属性指定了选项卡的滚动模式：fixed（固定）和scrollable（可滚动），tabGravity属性指定了选项卡的对齐方式：fill（填充）和center（居中）。
2. TabLayout 的使用
2.1 添加选项卡
TabLayout 通过调用addTab方法添加选项卡，如下所示：
-- -------------------- ---- -------
--- ---------- --------- - -----------------------------
--- ---------- ---------- - -----------------------------
--- ------ - --------------------------- ------- -------
--- --------- - ------------------------ ------------ ------------
--------------------- - ------ ----- --
---------------------------------------------------
-
--- --------------- - --------------------- ----------
----------------- - ---------------
----------------------------------------- - ------------------------------- -
-------- --- ------------------ -------------- -
--- -------- - ------------
---------------------------------- -----
-
-------- --- -------------------- --------------- --
-------- --- -------------------- --------------- --
--上述代码中，我们定义了一个titles数组和fragments数组，用于存放选项卡标题和对应的页卡片片段。接着，我们通过循环的方式，添加选项卡并设置选项卡的标题文本。接下来，我们需要构建适配器FragmentAdapter，以便将选项卡与页面片段进行绑定。最后，通过addOnTabSelectedListener方法监听选项卡切换事件，在Tab被选中时，切换到与之对应的页面片段。
2.2 设置选项卡样式
TabLayout 可以通过以下方法自定义它的外观和感觉：
-- -------------------- ---- ------- -- ------- -------------------------------------------------- --------------------- -- -------- ------------------------------------------------------------------- ---------------------- -- -------- ---------------------------------------------------- -- -------- ---------------------------------------------------- -- -------- --------------------------- -- ------ --------------------------------------------------------- -- --------------------------------- ----------------------------------------------- -- ---------------------------------------------- -----------------------------------------------
2.3 自定义选项卡布局
在默认情况下，TabLayout 显示文本标题。但是，如果您想要更复杂的布局，则可以构建自定义视图并将其添加到 TabLayout 中。自定义选项卡布局如下所示：
-- -------------------- ---- -------
------------------------------------------- ----------------------------------------------------------
---------------------------------------------------
----------------------------
-----------------------------------
------------------------------------
----------------------------------------
---------------------
----------------------------
-------------------
----------------------------------
------------------------------------------------ --在 layout 文件中，我们定义了一个选项卡布局，主要是TextView组成，TextView设置好样式，即可使用：
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tab_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="14sp"
android:textColor="@color/colorPrimary"
android:textStyle="bold" />完整的示例代码：
-- -------------------- ---- -------
--- ---------- --------- - -----------------------------
--- ---------- ---------- - -----------------------------
--- ------ - --------------------------- ------- -------
--- --------- - ------------------------ ------------ ------------
--------------------- - ------ ----- --
--- --------- - ---------------------------------------------------- ----- -- --------
-------------- - -----
-------------------------------------------------------------
-
--- --------------- - --------------------- ----------
----------------- - ---------------
----------------------------------------- - ------------------------------- -
-------- --- ------------------ -------------- -
--- -------- - ------------
---------------------------------- -----
--- ---- - --------------
-- ----- -- --------- -
----------------------------------------------------------- ----------------------
-
-
-------- --- -------------------- --------------- -
--- ---- - ----------------
-- ----- -- --------- -
----------------------------------------------------------- --------------
-
-
-------- --- -------------------- --------------- --
--3. 总结
通过 TabLayout，我们可以轻松实现多页的导航结构，TabLayout 本身拥有很多自定义选项，可以满足各种布局和样式需求。本文详细介绍了 TabLayout 的使用方法和常用属性，希望读者可以通过本文掌握 TabLayout 的基础技能，更好地使用它来创建优秀的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64643709968c7c53b0518a80