如何在 Android 底部导航栏中只为图标添加背景？

2024-03-06 13:20:55

如何只为 Android 底部导航栏中的图标添加背景

作为一名资深的 Android 开发人员，我经常需要定制应用程序的用户界面。最近，我遇到了一个看似简单却让我百思不得其解的问题：如何在底部导航栏中只为图标添加背景，而不是所有项目。

问题

我想要的是一个像下面这样，只有图标有背景的底部导航栏：

[图片底部导航栏，只有图标有背景，文字没有背景]

然而，当我尝试使用 app:itemBackground 属性时，它会填充整个项目，包括图标和文本。

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottom_navigation_main"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/surface_container_lowest"
    app:itemTextAppearanceActive="@style/Theme.FarmKeep.TextAppearance.SemiBold.LabelSmallProminent"
    app:itemTextAppearanceInactive="@style/Theme.FarmKeep.TextAppearance.Regular.LabelSmall"
    app:itemTextColor="@color/on_surface"
    app:labelVisibilityMode="labeled"
    app:itemBackground="@drawable/selector_bottom_nav_background"
    app:menu="@menu/menu_main"/>

解决方案

经过一番研究，我找到了一个优雅的方法来解决这个问题，那就是使用自定义 XML 背景选择器和图标背景。

步骤 1：创建自定义 XML 背景选择器

创建一个名为 your_icon_background_selector.xml 的 XML 文件，内容如下：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/your_icon_background_pressed" />
    <item android:state_enabled="true" android:drawable="@drawable/your_icon_background_normal" />
</selector>

其中 your_icon_background_pressed 和 your_icon_background_normal 是您自定义的图标背景资源。

步骤 2：将自定义选择器应用到 BottomNavigationView

将 app:itemIconBackground 属性应用到 BottomNavigationView，并将其值设置为您创建的 XML 选择器：

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottom_navigation_main"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/surface_container_lowest"
    app:itemTextAppearanceActive="@style/Theme.FarmKeep.TextAppearance.SemiBold.LabelSmallProminent"
    app:itemTextAppearanceInactive="@style/Theme.FarmKeep.TextAppearance.Regular.LabelSmall"
    app:itemTextColor="@color/on_surface"
    app:labelVisibilityMode="labeled"
    app:itemIconBackground="@drawable/your_icon_background_selector"
    app:menu="@menu/menu_main"/>

步骤 3：定义图标背景

在您的 Drawable 资源文件中，创建一个名为 your_icon_background.xml 的 XML 文件，内容如下：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/your_icon_background_color" />
    <corners android:radius="@dimen/icon_background_radius" />
</shape>

其中 @color/your_icon_background_color 是您图标背景的颜色，@dimen/icon_background_radius 是图标背景的圆角半径。

步骤 4：调整图标大小以填充背景

为了让图标填满图标背景，请将 app:itemIconSize 属性应用到 BottomNavigationView 并设置一个适当的值：

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottom_navigation_main"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/surface_container_lowest"
    app:itemTextAppearanceActive="@style/Theme.FarmKeep.TextAppearance.SemiBold.LabelSmallProminent"
    app:itemTextAppearanceInactive="@style/Theme.FarmKeep.TextAppearance.Regular.LabelSmall"
    app:itemTextColor="@color/on_surface"
    app:labelVisibilityMode="labeled"
    app:itemIconTint="@color/on_surface"
    app:itemIconSize="24dp"
    app:menu="@menu/menu_main"/>