在现代应用程序中，TabLayout 是一个非常流行的 UI 元素，它可以帮助用户轻松地在不同的屏幕之间切换，并提供更好的用户体验。在 Android 应用程序中，TabLayout 是一个非常好的选择，因为它与 Fragment 和 ViewPager 集成得非常好。在本篇文章中，我们将一步步学习如何使用 TabLayout、Fragment 和 ViewPager 实现 Tab 滑动切换，以及如何在其中添加内容。
1. TabLayout
TabLayout 是一个 Android 支持库中的 UI 元素，它可以用于创建一个带有选项卡的视图。TabLayout 可以实现以下功能：
- 在不同的屏幕之间切换
- 提供更好的用户体验
- 实现选项卡的样式和布局
TabLayout 可以作为一个独立的视图或作为 ViewPager 的一部分使用。在这篇文章中，我们将看到如何将 TabLayout 与 Fragment 和 ViewPager 集成，以实现 Tab 滑动切换。
2. Fragment
Fragment 是 Android 中的一个重要概念，它代表应用程序界面的一个部分。Fragment 可以嵌套在 Activity 中，也可以在多个 Activity 中重复使用。Fragment 可以帮助我们实现以下功能：
- 将应用程序的界面分成多个部分
- 重复使用同一个 Fragment
- 管理 Fragment 的生命周期
在这篇文章中，我们将使用 Fragment 来创建 TabLayout 的选项卡内容。
3. ViewPager
ViewPager 是一个 Android 支持库中的 UI 元素，它可以用于创建一个可以左右滑动的视图。ViewPager 可以实现以下功能：
- 在不同的屏幕之间滑动
- 提供更好的用户体验
- 实现滑动的样式和布局
在这篇文章中，我们将使用 ViewPager 来实现 Tab 滑动切换。
4. TabLayout、Fragment 和 ViewPager 的联动
现在我们已经了解了 TabLayout、Fragment 和 ViewPager 的基本概念，下面我们将看到如何将它们联动起来，以实现 Tab 滑动切换。
4.1 创建 TabLayout
首先，我们需要创建一个 TabLayout，用于显示选项卡。可以在 XML 布局文件中添加以下代码：
<com.google.android.material.tabs.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable"
app:tabGravity="fill"/>在这个布局中，我们指定了一个 TabLayout 的高度为 wrap_content，并将选项卡的模式设置为可滚动的（scrollable），并将选项卡的重心设置为填充（fill）。
4.2 创建 ViewPager
接下来，我们需要创建一个 ViewPager，用于显示选项卡内容。可以在 XML 布局文件中添加以下代码：
<androidx.viewpager.widget.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>在这个布局中，我们指定了 ViewPager 的高度和宽度都为 match_parent。
4.3 创建 Fragment
现在，我们需要创建 Fragment，用于显示选项卡的内容。可以创建一个空的 Fragment，并在其中添加需要显示的内容。
-- -------------------- ---- -------
------ ----- ---------- ------- -------- -
------ ------------ -
-- -------- ----- ------ -----------
-
---------
------ ---- --------------------------- --------- --------- ----------
------ ------------------- -
-- ------- --- ------ --- ---- --------
------ -------------------------------------- ---------- -------
-
-在这个 Fragment 中，我们只是返回了一个布局文件（fragment_my.xml），以便在 ViewPager 中显示。
4.4 创建 FragmentPagerAdapter
接下来，我们需要创建一个 FragmentPagerAdapter，用于管理 Fragment。可以创建一个新的类，并继承 FragmentPagerAdapter。
-- -------------------- ---- -------
------ ----- -------------- ------- -------------------- -
------- -------------- --------- - --- --------------
------- ------------ ------ - --- --------------
------ ----------------------- --------------- --- -
----------
-
------ ---- -------------------- --------- ------ ------ -
------------------------
------------------
-
--------
---------
------ -------- ----------- --------- -
------ ------------------------
-
---------
------ --- ---------- -
------ -----------------
-
---------
---------
------ ------------ ---------------- --------- -
------ ---------------------
-
-在这个适配器中，我们使用了一个 List 来存储 Fragment 和它们的标题，并实现了必要的方法。
4.5 绑定 TabLayout 和 ViewPager
现在我们已经创建了 TabLayout、ViewPager、Fragment 和 FragmentPagerAdapter，接下来我们需要将它们绑定起来。
-- -------------------- ---- ------- --------- --------- - ------------------------------ --------- --------- - ------------------------------ -------------- ------- - --- -------------------------------------------- ----------------------- ------------- ---- ---- ----------------------- ------------- ---- ---- ----------------------- ------------- ---- ---- ------------------------------ ----------------------------------------
在这个代码中，我们创建了 TabLayout 和 ViewPager 的实例，并创建了一个 MyPagerAdapter 的实例，并添加了三个 Fragment 和它们的标题。然后，我们将适配器设置给 ViewPager，并使用 setupWithViewPager() 方法将 TabLayout 与 ViewPager 绑定起来。这个方法会自动创建选项卡，并使用适配器中的标题来设置选项卡的文本。
5. 示例代码
最后，我们来看一下完整的示例代码：
-- -------------------- ---- -------
-------------------------------------------
----------------------------
-----------------------------------
------------------------------------
------------------------
-----------------------
------------------------------------
----------------------------
-----------------------------------
---------------------------------------- -------------------- ---- ------- --------- --------- - ------------------------------ --------- --------- - ------------------------------ -------------- ------- - --- -------------------------------------------- ----------------------- ------------- ---- ---- ----------------------- ------------- ---- ---- ----------------------- ------------- ---- ---- ------------------------------ ----------------------------------------
-- -------------------- ---- -------
------ ----- ---------- ------- -------- -
------ ------------ -
-- -------- ----- ------ -----------
-
---------
------ ---- --------------------------- --------- --------- ----------
------ ------------------- -
-- ------- --- ------ --- ---- --------
------ -------------------------------------- ---------- -------
-
--- -------------------- ---- -------
------ ----- -------------- ------- -------------------- -
------- -------------- --------- - --- --------------
------- ------------ ------ - --- --------------
------ ----------------------- --------------- --- -
----------
-
------ ---- -------------------- --------- ------ ------ -
------------------------
------------------
-
--------
---------
------ -------- ----------- --------- -
------ ------------------------
-
---------
------ --- ---------- -
------ -----------------
-
---------
---------
------ ------------ ---------------- --------- -
------ ---------------------
-
-在这个示例代码中，我们创建了一个带有三个选项卡的 TabLayout，并将其与一个 ViewPager 绑定起来。每个选项卡都显示了一个空的 Fragment。我们还创建了一个 FragmentPagerAdapter，并将其添加到 ViewPager 中。最后，我们将适配器设置为 ViewPager，并使用 setupWithViewPager() 方法将 TabLayout 与 ViewPager 绑定起来。
6. 总结
在本篇文章中，我们学习了如何使用 TabLayout、Fragment 和 ViewPager 实现 Tab 滑动切换。我们了解了 TabLayout、Fragment 和 ViewPager 的基本概念，并学习了如何将它们联动起来。我们还创建了一个示例代码，并详细讲解了每个部分的代码。希望本篇文章能够对你有所帮助，如果你有任何问题或建议，请在评论区留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66024185d10417a222db801d