在移动应用程序的设计中，标签页是一种常见的用户界面元素。 Material Design 动态风格的 TabLayout 控件使得应用程序的用户界面更加美观和易于使用。本文将介绍使用 TabLayout 在 Android 应用程序中创建多标签页的方法。
1. TabLayout 控件
TabLayout 控件是 Material Design 的控件之一。 它可以让你快速自定义多个选项卡，并且可以根据不同的状态显示不同的图标和文本实现多标签页的显示和管理。
在 Android 中，TabLayout 控件需要和 ViewPager 控件一起使用来实现多标签页的切换和滑动。主要考虑到多标签页的切换是通过 ViewPager 来实现的。
2. 创建 TabLayout 控件
首先，需要在在 XML 布局文件中创建 TabLayout 控件。可以通过以下方式实现：
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable"
app:tabGravity="fill"/>其中，tabMode表示 Tab 的模式，可以使用 fixed 或 scrollable 两种模式。fixed 表示所有 Tab 都会在屏幕内显示，而 scrollable 表示 Tab 可以滚动。tabGravity表示 Tab 的对齐方式，可以使用 fill、center 或者 fill_horizontal 。
3. 创建 ViewPager 控件
接下来，需要在相同的布局文件中创建 ViewPager 控件，这可以通过以下方式实现：
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>请注意，ViewPager 的高度设置了 wrap_content ，因为 TabLayout 将使用实际高度为 ViewPager 排列 Tab。
4. 创建 Fragment
Tab 的内容通常是由 Fragment 组成的。因此，需要创建 Fragment 以在 Tab 中显示内容。可以使用 android.support.v4.app.FragmentPagerAdapter 或者 android.support.v4.app.FragmentStatePagerAdapter 来管理 Fragment。
首先，需要创建一个 Fragment 类：
-- -------------------- ---- -------
------ ----- ---------- ------- -------- -
------ ------ ---------- ------------------ ------ -
---------- ---------- - --- -------------
------ ---- - --- ---------
----------------------- -------
------------------------------
------ -----------
-
---------
------ ---- --------------------------- --------- --------- ---------- ------ ------------------- -
-------- -------- - --- -----------------------
----------------------------------------------------
------ ---------
-
-这个 Fragment 可以根据其地图的标题设置文本。
5. 向 TabLayout 中添加标签页
最后，需要在代码中添加标签页。
-- -------------------- ---- -------
--------- --------- - ----------- ------------------------------
--------- --------- - ----------- ------------------------------
--- ---- - - -- - -- -- ---- -
------ ----- - ---- - - --
----------------------------------------------------
-
------------------------ --------------------------------------------
----------------------------------------在这个片段中，我们先创建一个包含标题的 Tab ，然后使用 addTab() 方法将其添加到 TabLayout 中。接下来，使用 setupWithViewPager() 方法将 TabLayout 和 ViewPager 关联起来。
示例代码
下面是一个完整的 TabLayout 使用的示例：
-- -------------------- ---- -------
------ ----- ------------ ------- ----------------- -
---------
--------- ---- ------------------ ------ ------------------- -
-----------------------------------
---------------------------------------
--------- --------- - ----------- ------------------------------
--------- --------- - ----------- ------------------------------
--- ---- - - -- - -- -- ---- -
------ ----- - ---- - - --
----------------------------------------------------
-
------------------------ --------------------------------------------
----------------------------------------
-
------- ----- ------------- ------- -------------------- -
------ ----------------------------- --- -
----------
-
---------
------ -------- ----------- --------- -
------ ----- - ---- - - --------- - ---
------ ------------------------------
-
---------
------ --- ---------- -
------ --
-
---------
------ ------------ ---------------- --------- -
------ ---- - - --------- - ---
-
-
------ ------ ----- ---------- ------- -------- -
------ ------ ---------- ------------------ ------ -
---------- ---------- - --- -------------
------ ---- - --- ---------
----------------------- -------
------------------------------
------ -----------
-
---------
------ ---- --------------------------- --------- --------- ---------- ------ ------------------- -
-------- -------- - --- -----------------------
----------------------------------------------------
------ ---------
-
-
-在这个例子中，我们使用了 TabLayout 来创建 5 个 Tab 。接下来，使用 FragmentPagerAdapter 在每个 Tab 中放置一个新的 Fragment 。Tab 的标题设置为“Tab [i]”。
总结
以上就是使用 TabLayout 来实现多标签页的方法总结。在实际开发中，我们可以根据实际需求来自定义 TabLayout 的样式和行为。这个例子可以用来快速入门。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647eeff148841e9894e9f18a