Material Design 中的 BottomNavigationView 详细解析-JavaScript中文网-JavaScript教程资源分享门户

介绍

BottomNavigationView 是 Material Design 中的一个 UI 组件，用于在底部呈现应用程序导航选项。该组件可用于展示 3~5 个应用程序的导航选项，以方便用户通过应用程序。BottomNavigationView 适用于 Android 应用程序。

BottomNavigationView 可以通过设置菜单资源中的项目以及关联的操作，在应用程序的底部呈现导航选项。每个选项显示为一个图标和一段文本。

BottomNavigationView 还可以与 ViewPager 和 Fragment 一起使用，以在选择底部导航选项时自动转换 Fragment。

使用

引入

在 app/build.gradle 文件中添加以下依赖项：

implementation 'com.google.android.material:material:1.2.0'

布局

在 XML 布局文件中添加 BottomNavigationView：

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/nav_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    app:menu="@menu/bottom_nav_menu" />

在上面的布局中，设置了 BottomNavigationView 的 Id 为 "nav_view"，宽度为 match_parent，高度为 wrap_content，位置在底部，并指定了菜单资源 “@mune/bottom_nav_menu”。

菜单

BottomNavigationView 菜单需要定义在 /res/menu 目录下，例如 “bottom_nav_menu.xml”：

-- -------------------- ---- -------
----- -----------------------------------------------------------

    -----
        ---------------------------------
        -------------------------------------------
        ---------------------------------- --

    -----
        --------------------------------------
        ------------------------------------------------
        --------------------------------------- --

    -----
        ------------------------------------------
        ----------------------------------------------------
        ------------------------------------------- --

-------

在该菜单中，定义了三个导航项。每个项中有一个图标和一段文本。

事件

在代码中设置 BottomNavigationView 时，需要设置 OnNavigationItemSelectedListener，以响应导航项的点击事件。

-- -------------------- ---- -------
-------------------- ------- - ----------------------------
----------------------------------------------- ------------------------------------------------------- -
    ---------
    ------ ------- --------------------------------- -------- ----- -
        ------ ------------------ -
            ---- ---------------------
                -- -----
                ------ -----
            ---- --------------------------
                -- -----
                ------ -----
            ---- ------------------------------
                -- -----
                ------ -----
        -
        ------ ------
    -
---

在上面的代码中，OnClickListener 对象使用了一个 switch 语句，以检查哪个导航项被点击。在每个分支中，可以执行相应的操作。

基本样式

在默认样式下，BottomNavigationView 的选项显示为图标和文本。如果应用程序有很多导航选项，则可能需要使用 Tablets 或和一般的 Navigation Drawer 相同的不带文本标签的按钮。可以通过样式定义来替换默认选项样式。

下面是一些常见的 BottomNavigationView 样式：

基本样式

<style name="Widget.BottomNavigationView" parent="Widget.Design.BottomNavigationView">
    <item name="itemIconTint">@color/bottom_nav_item_color_state_list</item>
    <item name="itemTextColor">@color/bottom_nav_item_color_state_list</item>
</style>

可以通过以下方式使用这些样式：

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/navigation"
    style="@style/Widget.BottomNavigationView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:menu="@menu/bottom_navigation_menu" />

不带文本标签

<style name="NoAnimationBottomNavigationStyle" parent="Widget.Design.BottomNavigationView">
    <item name="labelVisibilityMode">unlabeled</item>
</style>

可以通过以下方式使用这些样式：

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/nav_view"
    style="@style/NoAnimationBottomNavigationStyle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:menu="@menu/bottom_nav_menu" />

另一种风格

<style name="AlternativeBottomNavigationStyle" parent="Widget.Design.BottomNavigationView">
    <item name="labelVisibilityMode">selected</item>
    <item name="itemIconTint">@color/bottom_nav_color_state_list</item>
    <item name="itemTextColor">@color/bottom_nav_color_state_list</item>
    <item name="android:background">@drawable/background_bottom_nav_view</item>
</style>

可以通过以下方式使用这些样式：

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/nav_view"
    style="@style/AlternativeBottomNavigationStyle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:itemBackground="@drawable/background_bottom_nav_item"
    app:itemIconSize="24dp"
    app:menu="@menu/bottom_nav_menu" />

结论

在本文中，我们了解了 Material Design 中的 BottomNavigationView 的用法和基本样式。BottomNavigationView 是一个很棒的 UI 组件，用于在底部呈现应用程序导航选项。需要注意的是，在实现 BottomNavigationView 时，需要根据应用程序的需求选择适当的样式。

如果您想了解更多关于 Material Design 的内容，可以访问 Material Design 官网（https://material.io/design/）。

示例代码：

GitHub 链接：https://github.com/Droid-Max/BottomNavigationView-Demo

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/674bd16fd657e1f70dc00da5