Material Design 是 Google 推出的一种设计语言，旨在统一应用程序的设计风格，提升用户体验。在移动应用开发中，如何实现多个 Fragment 的切换并保持统一的设计风格变得至关重要。本文将介绍如何使用 Navigation 和 ViewPager2 实现多个 Fragment 的切换效果，并为读者提供详细的示例代码。
Navigation
Navigation 是 Android Jetpack 中的一个组件，旨在为应用程序提供标准化、一致性的导航体验。Navigation 帮助开发者轻松地管理 Fragment 和 Activity 的导航，并为应用程序的转换提供一致的动画效果。
1. 导入 Navigation 组件
要使用 Navigation 组件，需要在 build.gradle 文件中添加以下依赖项：
-- -------------------- ---- -------
------------ -
---
--- ----------- - -------
-- ----------
-------------- ------------------------------------------------------
-------------- ------------------------------------------------
---
-2. 设计导航
Navigation 使用 XML 文档来定义应用程序的导航结构。可以使用 Android Studio 的可视化编辑器来创建和修改 Navigation XML 文件。以下代码展示了一个基本的 Navigation XML 文件：
-- -------------------- ---- -------
----- ------------- ------------------
-----------
----------------------------------------------------------
---------------------------------------------------
----------------------------------------
---------
------------------------------
-------------------------------------------
--------------------
------------------------------------ --
---------
-------------------------------
--------------------------------------------
---------------------
------------------------------------- --
---- ---- -------- ---
-------------在 Navigation XML 文件中，通过 <navigation> 标签定义整个导航结构，app:startDestination 属性指定导航的起始点。在每个 <fragment> 标签中，定义 Fragment 的 ID、类名、标签和布局。
3. 导航控制器
导航控制器（NavController）是 Navigation 的核心类，负责管理应用程序中的导航。要获取 NavController 实例，可以在 Activity 或 Fragment 中使用 NavHostFragment.findNavController() 方法。
以下示例代码展示了如何通过 NavHostFragment 获取 NavController 实例：
-- -------------------- ---- -------
----- ------------ - ------------------- -
-------- --- ---------------------------- -------- -
----------------------------------
--------------------------------------
--- --------------- - --------------------------------------------------------------- -- ---------------
--- ------------- - -----------------------------
-
-在上述代码中，supportFragmentManager.findFragmentById(R.id.nav_host_fragment) 获取 NavHostFragment 实例，再通过 navHostFragment.navController 获取 NavController 实例。
4. 导航到目标 Fragment
当用户点击应用程序中的导航项时，可以使用 NavController.navigate() 方法导航到目标 Fragment。以下示例代码展示了如何使用 NavController.navigate() 导航到目标 Fragment：
button.setOnClickListener {
findNavController().navigate(R.id.aboutFragment)
}在上述代码中，点击按钮时，通过 findNavController().navigate(R.id.aboutFragment) 导航到 ID 为 aboutFragment 的 Fragment。
ViewPager2
ViewPager2 是 AndroidX 库中的新版本 ViewPager，比原来的 ViewPager 更加灵活、可扩展和易用。ViewPager2 支持纵向和横向滑动、Fragment 的滑动和向导滑动效果等多种特性。
1. 导入 ViewPager2 组件
要使用 ViewPager2，需要在 build.gradle 文件中添加以下依赖项：
dependencies {
...
def viewPager2_version = "1.0.0"
// ViewPager2
implementation "androidx.viewpager2:viewpager2:$viewPager2_version"
...
}2. 设计 ViewPager2
ViewPager2 在设计时需要一个适配器（Adapter），用于管理 Fragment。可以使用 FragmentStateAdapter 或 FragmentPagerAdapter 实现适配器。
以下示例代码展示了如何使用 FragmentStateAdapter 创建 ViewPager2：
-- -------------------- ---- -------
----- -------------------------------- ----------------- - -------------------------------------- -
-------- --- --------------- --- -
------ - -- ---------- - -------- ---
-
-------- --- ------------------------ ----- -------- -
------ ---- ---------- -
- -- --------------
- -- ---------------
---- -- --------------
-
-
-在上述代码中，通过继承 FragmentStateAdapter 创建适配器，getItemCount() 方法定义 ViewPager2 中 Fragment 的个数，createFragment() 方法返回 Fragment 对象。
3. 初始化 ViewPager2
以下示例代码展示了如何初始化 ViewPager2：
-- -------------------- ---- -------
----- ------------ - ------------------- -
------- -------- --- ----------- ----------
-------- --- ---------------------------- -------- -
----------------------------------
--------------------------------------
-- -- ---------- --
---------- - -----------------------------
-- -- ---------- ----
------------------ - --------------------
-
-在上述代码中，通过 findViewById() 获取 ViewPager2 控件，再通过 adapter = MyPagerAdapter(this) 实例化适配器。
4. 使用 ViewPager2 切换 Fragment
在创建好 ViewPager2 后，就可以使用 ViewPager2 切换 Fragment 了。以下示例代码展示了如何使用 ViewPager2 切换 Fragment：
button.setOnClickListener {
viewPager2.currentItem = 1
}在上述代码中，点击按钮时，通过 viewPager2.currentItem = 1 切换到第 2 个 Fragment。
Navigation 和 ViewPager2 的整合
Navigation 和 ViewPager2 的整合，可以在多个 Fragment 间切换，并保持统一的设计风格。以下示例代码展示了 Navigation 和 ViewPager2 的整合：
1. Navigation XML 文件
-- -------------------- ---- -------
----- ------------- ------------------
-----------
----------------------------------------------------------
---------------------------------------------------
----------------------------------------
---------
------------------------------
-------------------------------------------
--------------------
------------------------------------ --
---------
-------------------------------
--------------------------------------------
---------------------
------------------------------------- --
---- ---- -------- ---
-------------2. 主布局文件
-- -------------------- ---- -------
--------------------------------------------------
-----------------------------------
-------------------------------------
--------------------------------------
----------------------------
--------------------------
---------------------------
---------------------------------------------------------------
-----------------------------------------
---------------------------------------------
-------------------------------------------
------------------------------------------------------------------
--------------------------------------
--------------------------
------------------------------------
---------------------------------
---------------------------------
-------------------------------------------------------------
--------------------------------------------------------------
---------------------------------------
-----------------------------------------------
-----------------------------------------
-----------------------------------------------
----------------------------------------------------3. 适配器类
-- -------------------- ---- -------
----- ---------------------------------- ----------------- - -------------------------------------- -
-------- --- --------------- --- -
------ - -- ---------- - -------- ---
-
-------- --- ------------------------ ----- -------- -
------ ---- ---------- -
- -- --------------
- -- ---------------
---- -- --------------
-
-
-4. Activity 中使用 Navigation 和 ViewPager2
-- -------------------- ---- -------
----- ------------ - ------------------- -
------- -------- --- ----------- ----------
------- -------- --- --------------------- --------------------
------- -------- --- -------------- -------------
-------- --- ---------------------------- -------- -
----------------------------------
--------------------------------------
-- -- ---------- - -------------------- --
---------- - -----------------------------
-------------------- - ---------------------------------------
-- -- ---------- ----
------------------ - ----------------------
-- -- ------------- --
--- --------------- - --------------------------------------------------------------- -- ---------------
------------- - -----------------------------
-- -- -------------------- - -------------
--- ------------------- - -------------------------------------------- --------------------
---------------------------------------------- --------------------
----------------------------------------------------------
-- -- ---------- ------- -------------------- - ------------- --
---------------------------------------------- - --------------------------------- -
-------- --- ------------------------ ---- -
---- ---------- -
- -- -----------------------------------------
- -- ------------------------------------------
-
-
--
-
-------- --- ---------------------- ------- -
-- -- ---------- ----
------ -------------------------- -- ---------------------------
-
-在上述代码中，通过 viewPager2.adapter = MainPagerAdapter(this) 创建 ViewPager2 的适配器，通过 navController = navHostFragment.navController 获取 NavController 实例。接着，通过 setupActionBarWithNavController(navController, appBarConfiguration) 和 bottomNavigationView.setupWithNavController(navController) 配置 BottomNavigationView 和 NavController。
最后，通过 viewPager2.registerOnPageChangeCallback() 监听 ViewPager2 的页面状态，并在 onPageSelected() 方法中使用 navController.navigate() 导航到目标 Fragment。
总结
本文介绍了如何使用 Navigation 和 ViewPager2 实现多个 Fragment 切换效果。Navigation 提供了一致性的导航体验，ViewPager2 提供了滑动特性和灵活性，两者的整合可以为应用程序的转换提供一致的动画效果并保持统一的设计风格。本文提供了详细的示例代码，供读者参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d077fab5eee0b52576c4cc