在 Android 应用程序中，底部标签页是非常常见的 UI 设计，它能够在不同的标签页之间切换，方便用户进行浏览和操作。在 Material Design 中，BottomNavigationView 是实现底部标签页的推荐控件。它是一个灵活的控件，能够满足不同应用的需求。同时，ViewPager2 是 AndroidX 中用于支持页面滑动的控件，可以和 BottomNavigationView 配合使用实现底部标签页的效果。
BottomNavigationView
BottomNavigationView 是 Android Material Design 中提供的底部标签页控件，它不仅简单易用，而且功能强大。BottomNavigationView 可以设置多个导航项，每个导航项可以设置图标和标签文本。用户点击导航项时，可以触发相应事件，比如切换到相应的页面。
设置 BottomNavigationView
创建 BottomNavigationView 最简单的方法，是在 XML 布局文件中添加一个 BottomNavigationView 控件。设置 BottomNavigationView 的方式非常简单，可以在 XML 中设置相应属性，比如菜单项、选中项等。
在 XML 中添加 BottomNavigationView：
-- -------------------- ---- -------
------------------------------------------------------------------
----------------------------------------
-----------------------------------
------------------------------------
-------------------------------
--------------------------------
---------------------------------
--------------------------------------------------
---------------------------------------------------
----------------------------------------------- --其中：
app:menu：设置底部导航栏菜单资源文件，比如@menu/bottom_nav_menu。app:labelVisibilityMode：设置标签的显示模式，有三种模式：labeled、selected和auto。app:itemIconTint：设置图标颜色，可以传入一个 drawable 对象或者颜色值。app:itemTextColor：设置标签文本颜色，同样可以传入一个 drawable 对象或者颜色值。
监听 BottomNavigationView
BottomNavigationView 可以通过设置 OnNavigationItemSelectedListener 接口监听导航项的选择。当导航项被选择时，可以执行相应的操作。例如，在 onNavigationItemSelected() 方法中切换页面：
-- -------------------- ---- -------
-------------------------------------------------------- -
---- ----------- -
---------- -- -
--------------------- - -
----
-
---------- -- -
--------------------- - -
----
-
---------- -- -
--------------------- - -
----
-
---- -- -----
-
-ViewPager2
ViewPager2 是 AndroidX 中用于支持页面滑动的控件，它继承自 RecyclerView，具有 RecyclerView 的所有优点，比如可扩展性强、可定制化等。ViewPager2 支持多种类型的 Adapter，可以轻松地实现不同布局类型的页面滑动。
设置 ViewPager2
使用 ViewPager2 需要先在 XML 中添加一个 ViewPager2 控件，然后创建相应的 Adapter，并设置到 ViewPager2 中。在 Adapter 中，可以设置页面的布局和更新数据。下面是使用 ViewPager2 的一个简单示例：
在 XML 中添加 ViewPager2：
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="@id/bottom_navigation_view"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />创建一个 FragmentAdapter，将 Fragment 添加到 ViewPager2 中：
-- -------------------- ---- -------
----- ------------------- ---------------- ---------- ---------- - ------------------------ ---------- -
------- --- ------------ - ---------------------
-------- --- --------------- --- -
------ -----------------
-
-------- --- ------------------------ ----- -------- -
------ ----------------------
-
--- --------------------- --------- -
--------------------------
-
-在 Activity 中，将 Fragment 添加到 Adapter 中，并将 Adapter 设置到 ViewPager2 中：
val adapter = FragmentAdapter(supportFragmentManager, lifecycle) adapter.addFragment(FirstFragment()) adapter.addFragment(SecondFragment()) adapter.addFragment(ThirdFragment()) viewPager.adapter = adapter
监听 ViewPager2
可以监听 ViewPager2 的滑动事件，根据滑动的距离、速度等信息，实现一些交互效果。例如，在 addOnPageChangeCallback() 方法中监听页面滑动事件：
viewPager.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
override fun onPageSelected(position: Int) {
super.onPageSelected(position)
// 切换底部标签页状态
bottomNavigationView.menu.getItem(position).isChecked = true
}
})BottomNavigationView 和 ViewPager2 结合使用
在 Activity 或者 Fragment 中，需要设置 BottomNavigationView 和 ViewPager2 的联动。例如，当用户点击底部标签页时，ViewPager2 显示相应的页面；当用户滑动 ViewPager2 时，底部标签页的状态也要随之更新。
-- -------------------- ---- -------
-- ------------
-------------------------------------------------------- -
---- ----------- -
---------- -- -
--------------------- - -
----
-
---------- -- -
--------------------- - -
----
-
---------- -- -
--------------------- - -
----
-
---- -- -----
-
-
-- -- ---------- -----
--------------------------------------------- - --------------------------------- -
-------- --- ------------------------ ---- -
------------------------------
-- ---------
----------------------------------------------------- - ----
-
--示例代码
下面是一个完整的示例代码，包含了 BottomNavigationView 和 ViewPager2 的联动实现：
-- -------------------- ---- -------
----- ------------ - ------------------- -
------- -------- --- --------------------- --------------------
------- -------- --- ---------- ----------
-------- --- ---------------------------- -------- -
----------------------------------
--------------------------------------
----------
-
------- --- ---------- -
--------- - ----------------------------------------
-------------------- - -------------------------------------------------------------
--- ------- - --------------------------------------- ----------
------------------------------------
-------------------------------------
------------------------------------
----------------- - -------
-------------------------------------------------------- -
---- ----------- -
---------- -- -
--------------------- - -
----
-
---------- -- -
--------------------- - -
----
-
---------- -- -
--------------------- - -
----
-
---- -- -----
-
-
--------------------------------------------- - --------------------------------- -
-------- --- ------------------------ ---- -
------------------------------
----------------------------------------------------- - ----
-
--
-
----- ------------------- ---------------- ---------- ---------- - ------------------------ ---------- -
------- --- ------------ - ---------------------
-------- --- --------------- --- -
------ -----------------
-
-------- --- ------------------------ ----- -------- -
------ ----------------------
-
--- --------------------- --------- -
--------------------------
-
-
-其中，FragmentAdapter 是一个自定义的 Adapter，用来添加 Fragment 到 ViewPager2 中。FragmentAdapter 的实现非常简单，只需要在构造函数中传入 FragmentManager 和 Lifecycle，然后在 createFragment() 方法中返回相应的 Fragment 就可以了。另外，使用 ViewPager2 必须要使用 FragmentStateAdapter 或者 FragmentPagerAdapter，这两个 Adapter 都是专用于 ViewPager2 的 Adapter。
同时在代码中，需要实现 Fragment 中的 UI 布局和相应的操作。例如，如果你希望实现页面滑动，就需要在相应的 Fragment 中，添加 ViewPager2 中的 View，并设置相应的操作和数据刷新。在创建 Fragment 的过程中，一定要注意其生命周期的设置，从而保证相应的操作在正确的时间进行。
结论
在 Material Design 中，BottomNavigationView 和 ViewPager2 是实现底部标签页的推荐控件。使用 BottomNavigationView + ViewPager2 可以轻松创建底部标签页效果，并能够实现完美的交互体验。在实现底部标签页的过程中，需要注意相应的布局和样式问题，同时需要确保相应的操作和事件的正确实现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67130d41ad1e889fe20a1c16