在 Material Design 中，BottomNavigationView 是一种常用的导航栏控件。它可以方便地实现一个带有标记的底部导航菜单，让用户能够快速切换不同的页面。
本文将介绍如何在 Material Design 中使用 BottomNavigationView 实现带标记的导航栏。通过实例代码和详细指导，让初学者能够轻松了解如何使用这个控件。
简介
BottomNavigationView 是一个 Android 原生控件，用于实现带有标记的底部导航菜单。它具有以下特点：
- 可以包含 2 到 5 个导航项；
- 每个导航项都有一个图标和一个文本标签；
- 可以通过选中项的颜色和未选中项的颜色来区分导航项；
- 可以通过设置监听器来处理导航项的点击事件。
BottomNavigationView 最适合用于 Android 应用的底部导航栏。下面是一个简单示例：
使用方法
要使用 BottomNavigationView，需要在建立布局时在 XML 文件中添加控件。例如：
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/navigation_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:itemIconTint="@drawable/navigation_icon_color"
app:itemTextColor="@drawable/navigation_text_color"
app:layout_constraintBottom_toBottomOf="parent"
app:menu="@menu/navigation_menu" />其中，app:itemIconTint 和 app:itemTextColor 属性用于设置未选中项和选中项的颜色。示例中的 @drawable/navigation_icon_color 和 @drawable/navigation_text_color 分别为定义的颜色资源。
app:menu 属性则用于设置导航菜单的布局文件。例如，上述代码中使用的是 @menu/navigation_menu，在该菜单中定义了 BottomNavigationView 的导航项。
下面是一份示例菜单文件 navigation_menu.xml：
-- -------------------- ---- -------
----- -----------------------------------------------------------
-----
---------------------------------
--------------------------------
---------------------------- --
-----
--------------------------------------
-------------------------------------
--------------------------------- --
-----
------------------------------------------
-----------------------------------------
------------------------------------- --
-------在示例菜单中，有三个导航项，分别对应“首页”、“仪表盘”和“通知”三个页面。每个导航项都定义了一个图标和一个文本标签。
最后，需要在代码中为 BottomNavigationView 设置监听器，处理导航项的点击事件。例如：
-- -------------------- ---- -------
--- -------------------- - --------------------------------------------------------
-------------------------------------------------------- - ---- --
---- ------------- -
-------------------- -- ------
------------------------- -- ------
----------------------------- -- ------
-
----
-其中，setOnNavigationItemSelectedListener 方法用于设置监听器。在监听器中，使用 when 语句来判断选中的导航项，并处理相应的点击事件。注意，最后需要返回 true，表示已处理导航项的点击事件。
实例代码
下面是一个完整的示例代码。在该示例中，实现了在 BottomNavigationView 中显示带有标记的导航项：
-- -------------------- ---- -------
----- ------------ - ------------------- -
------- -------- --- --------------------- --------------------
-------- --- ---------------------------- -------- -
----------------------------------
--------------------------------------
-------------------- - --------------------------------------------------------
-------------------------------------------------------- - ---- --
---- ------------- -
-------------------- -- -
-------------------------------------------
----
-
------------------------- -- -
------------------------------------------------
----
-
----------------------------- -- -
----------------------------------------------------
----
-
---- -- -----
-
-
-- ----
---------------------------------------------------------------------------- --
-
-- -- --------
------- --- ------------------------- --------- -
-----------------------------------------
--------------------------------- ---------
---------
-
-- -------
------- --- --------------- --------- ------ ---- -
--- ------------- - --------------------------
-------------------- - -----
-------------------------- - ---------------------
----------------------------- - ---------------------------- --------------------
------------------------------
--------------------------------------------- ----- -----
-
-在该示例中，replaceFragment 方法用于替换 Fragment。showBadge 方法则用于显示标记。该方法使用了 BadgeDrawable，在标记中显示了一个数字和背景颜色。通过 BadgeUtils.attachBadgeDrawable 方法将标记附着到导航项上。
总结
使用 BottomNavigationView 实现带标记的导航栏非常简单。只需在 XML 文件中添加控件和菜单，并在代码中设置监听器即可。
BottomNavigationView 具有非常灵活的布局和样式，可以根据应用需求进行自定义。希望本文能够帮助初学者了解 BottomNavigationView 的使用方法，从而更好地应用到实际项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6520027b95b1f8cacd78b7ca