Android Material Design 中自定义 BottomNavigationView 实现选中图标变色的步骤-JavaScript中文网-JavaScript教程资源分享门户

前言

BottomNavigationView 是在 Android 应用中广泛使用的导航栏元素，它是 Material Design 中推荐的一种标准设计。它能够让应用程序的导航更加清晰和易于理解，并且能够提高整体的用户体验。默认的 BottomNavigationView 中，选中的图标只有文本会变色，而图标本身却没有变化。本文将介绍如何自定义 BottomNavigationView 实现选中图标变色。

步骤

在 xml 文件中引入自定义 BottomNavigationView 布局，并引入相应的资源文件

<your.package.name.BottomNavigationView
    android:id="@+id/navigation"
    android:layout_width="match_parent"
    android:layout_height="84dp"
    android:layout_gravity="bottom"
    app:itemIconTint="@drawable/bottom_nav_colors"
    app:itemTextColor="@drawable/bottom_nav_colors"
    app:menu="@menu/navigation" />

上述代码中，“your.package.name”应该替换为自己的包名。

创建 drawable 文件夹，并在其中创建 bottom_nav_colors.xml 文件。这个文件将用于指定 BottomNavigationView 中每个项目的颜色。

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/nav_item_color_selected" android:state_checked="true" />
    <item android:color="@color/nav_item_color_unselected" />
</selector>

在这里，我们创建了一个 selector 元素。它会随着项目的选中状态，选择显示其中的一个 item 子元素。我们可以在这里指定每个项目选中和未选中时的颜色。可以根据项目的需求修改任何特定的颜色。

创建一个 listener 并将其附加到 BottomNavigationView 中的每个项目上

在 onCreate 函数中，我们需要遍历 BottomNavigationView 中的每个项目，将统一的监听器附加到它们上面。下面是一段示例代码：

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

在这里，我们首先将 selectedItemIconTint 属性设为 null，这样 BottomNavigationView 中的图标才能真正变色。然后，我们创建一个循环来遍历每个菜单项，然后附加一个监听器，该监听器在项目被选中后将更改其颜色。

实现 updateNavigationBarState() 方法

    private void updateNavigationBarState(int actionId){
        Menu menu = mNavigationView.getMenu();
        for (int i = 0; i < menu.size(); i++) {
            MenuItem menuItem = menu.getItem(i);
            boolean isSelected = menuItem.getItemId() == actionId;
            menuItem.setChecked(isSelected);
        }
    }

在这里，我们创建了一个 updateNavigationBarState() 方法，该方法遍历 BottomNavigationView 中的每个菜单项，并将选中的菜单项与未选中的菜单项区分开来。当选中一个菜单项时，我们将 menuItem.setChecked(true) 调用到该菜单项上，这将导致它的图标和文本较为明亮，而未选中的菜单项则会变暗。

最后，在 colors.xml 中指定颜色

<color name="nav_item_color_selected">#0077e4</color>
<color name="nav_item_color_unselected">#b1b1b1</color>

以上就是本文介绍的自定义 BottomNavigationView 实现选中图标变色的全部步骤了。

总结

BottomNavigationView 是一个非常好的应用导航工具，使用自定义图标进行设计可以使它看起来更加生动、具有吸引力。希望本文中提供的步骤和示例代码对大家有所帮助。

完整代码：

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

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

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

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

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

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

<your.package.name.BottomNavigationView
    android:id="@+id/navigation"
    android:layout_width="match_parent"
    android:layout_height="84dp"
    android:layout_gravity="bottom"
    app:itemIconTint="@drawable/bottom_nav_colors"
    app:itemTextColor="@drawable/bottom_nav_colors"
    app:menu="@menu/navigation" />

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/nav_item_color_selected" android:state_checked="true" />
    <item android:color="@color/nav_item_color_unselected" />
</selector>

<resources>
    <color name="nav_item_color_selected">#0077e4</color>
    <color name="nav_item_color_unselected">#b1b1b1</color>
</resources>

Reference

本文参考以下资料：

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