在 Android 应用开发中，ViewPager 和 TabLayout 是非常常用的组件，它们可以很好地实现滑动切换页面和标签页的功能。而在 Material Design 设计语言中，ViewPager 和 TabLayout 的结合使用更是被推荐，因为它们可以提供更加优美和一致的用户体验。本文将介绍如何在 Android 应用中使用 ViewPager 和 TabLayout 实现 Material Design 风格的滑动切换页面和标签页的功能。
ViewPager 和 TabLayout 的基本使用
ViewPager 是一个用于滑动切换页面的组件，它可以嵌套在布局中，同时可以通过 FragmentPagerAdapter 或者 FragmentStatePagerAdapter 等适配器来管理页面。而 TabLayout 则是一个用于标签页的组件，它可以和 ViewPager 结合使用，实现滑动切换标签页的功能。
1. 在布局文件中添加 ViewPager 和 TabLayout
首先，我们需要在布局文件中添加 ViewPager 和 TabLayout，例如：
-- -------------------- ---- -------
----------------------------------------------------
-----------------------------------
-------------------------------------
------------------------------------------------
-----------------------------------
-------------------------------------
-------------------------------------------
----------------------------
-----------------------------------
------------------------------------
------------------------
-------------------------
--------------------------------------------------
------------------------------------
----------------------------
-----------------------------------
------------------------------------
--------------------------------------------------------------
------------------------------------------------------在这个布局文件中，我们首先使用了 CoordinatorLayout 布局来实现 AppBarLayout 和 ViewPager 的联动效果。其中，AppBarLayout 中添加了一个 TabLayout，用于显示标签页。而 ViewPager 则用于显示各个页面的内容。
2. 创建适配器并设置给 ViewPager
接下来，我们需要创建适配器并设置给 ViewPager，以便管理页面。例如：
-- -------------------- ---- -------
------ ----- -------------- ------- -------------------- -
------- ------------ --------
------- -------------- -----------
------ ------------------------------ --- ------------ ------- -------------- ---------- -
--------- ---------------------------------------
------- - -------
---------- - ----------
-
---------
------ -------- ----------- --------- -
------ -------------------------
-
---------
------ --- ---------- -
------ ------------------
-
---------
---------
------ ------------ ---------------- --------- -
------ ----------------------
-
-在这个适配器中，我们使用了 FragmentPagerAdapter 来管理页面，同时也可以使用 FragmentStatePagerAdapter 等其他适配器。在适配器的构造函数中，我们需要传入页面的标题和对应的 Fragment。在 getItem() 方法中，我们返回对应位置的 Fragment。在 getCount() 方法中，我们返回页面的数量。在 getPageTitle() 方法中，我们返回对应位置的页面标题。
然后，我们需要在 Activity 或者 Fragment 中获取 ViewPager，并设置适配器，例如：
-- -------------------- ---- ------- --------- --------- - ------------------------------ --------- --------- - ------------------------------ ------------ ------ - --- -------------- ---------------- ---- ---------------- ---- ---------------- ---- -------------- --------- - --- -------------- ----------------- -------------- ----------------- -------------- ----------------- -------------- -------------- ------- - --- ------------------------------------------- ------- ----------- ------------------------------ ----------------------------------------
在这个例子中，我们创建了三个页面，每个页面都是 MyFragment 的实例。然后，我们创建了一个适配器，并将页面的标题和 Fragment 传递给适配器。最后，我们将适配器设置给 ViewPager，并将 ViewPager 和 TabLayout 联动起来。
Material Design 风格的使用
在 Material Design 中，ViewPager 和 TabLayout 的组合使用更加注重用户体验和设计美感。因此，我们需要对它们进行一些改进，以实现更加优美和一致的效果。
1. 使用 Material Design 风格的 TabLayout
首先，我们需要将 TabLayout 改为 Material Design 风格的样式，例如：
<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="center"
style="@style/Widget.MaterialComponents.TabLayout"/>在这个 TabLayout 中，我们使用了 style 属性来设置 Material Design 的样式。这样可以使 TabLayout 的样式更加美观和一致。
2. 使用 Material Design 风格的 ViewPager
接下来，我们需要将 ViewPager 也改为 Material Design 风格的样式，例如：
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
style="@style/Widget.MaterialComponents.ViewPager2"/>在这个 ViewPager 中，我们同样使用了 style 属性来设置 Material Design 的样式。这样可以使 ViewPager 的样式更加美观和一致。同时，我们还将 ViewPager 的 orientation 属性设置为 horizontal，以实现水平滑动效果。
3. 使用 Material Design 风格的指示器
最后，我们还可以使用 Material Design 风格的指示器，以更加美观和一致地显示当前页面。例如：
-- -------------------- ---- -------
-------------------------------------------
----------------------------
-----------------------------------
------------------------------------
------------------------------------------
---------------------------------------------
------------------------
-----------------------
----------------------------------------------------
--------------------------------------
----------------------------
-----------------------------------
------------------------------------
--------------------------------
------------------------------------------------------------
-----------------------------------------------------
在这个例子中，我们使用了 app:tabIndicatorColor 和 app:tabSelectedTextColor 属性来设置指示器的颜色和选中页面的文字颜色。这样可以使 TabLayout 和 ViewPager 的样式更加一致，并提供更好的用户体验。
示例代码
最后，我们提供一个完整的示例代码，以便读者更好地理解和学习 ViewPager 和 TabLayout 的使用。
-- -------------------- ---- -------
------ ----- ------------ ------- ----------------- -
------- ---------- -----------
------- --------- -----------
---------
--------- ---- --------------- ------------------- -
-----------------------------------
---------------------------------------
---------- - ------------------------------
---------- - ------------------------------
------------ ------ - --- --------------
---------------- ----
---------------- ----
---------------- ----
-------------- --------- - --- --------------
----------------- --------------
----------------- --------------
----------------- --------------
-------------- ------- - --- -------------------- -----------
-------------------------------
--- ----------------------------- -----------
----- --------- -- --------------------------------------------
-
------- ------ ----- -------------- ------- -------------------- -
------- -------------- -----------
------ ----------------------- ---------------- ----------------- -------------- ---------- -
------------------------
---------- - ----------
-
--------
---------
------ -------- ------------------ --------- -
------ -------------------------
-
---------
------ --- -------------- -
------ ------------------
-
-
------ ------ ----- ---------- ------- -------- -
---------
---------
------ ---- --------------------- -------------- --------- --------- --------- ---------- --------- ------ ------------------- -
---- ---- - -------------------------------------- ---------- -------
-------- -------- - ----------------------------------
---------------------- -- - -----------
------ -----
-
-
-在这个示例代码中，我们首先创建了一个 MainActivity，并在其中获取了 ViewPager2 和 TabLayout。然后，我们创建了三个页面，并将它们添加到适配器中。接着，我们将适配器设置给 ViewPager2，并使用 TabLayoutMediator 将 TabLayout 和 ViewPager2 联动起来。最后，我们还创建了一个简单的 Fragment，并在其中显示了一段文字。
总结
ViewPager 和 TabLayout 是 Android 应用开发中非常常用的组件，它们可以很好地实现滑动切换页面和标签页的功能。而在 Material Design 设计语言中，ViewPager 和 TabLayout 的结合使用更是被推荐，因为它们可以提供更加优美和一致的用户体验。在本文中，我们介绍了如何在 Android 应用中使用 ViewPager 和 TabLayout 实现 Material Design 风格的滑动切换页面和标签页的功能，并提供了示例代码以供参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65151da795b1f8cacdd86a34