底部导航栏图标更改无效。

Question

我想要在切换项目时更改底部导航视图的图标。

我有浅蓝色和深蓝色的图标用于选中的项目。 对于每个导航项，我使用选择器drawable，但是我看到像下面这样的灰色图像是不活动的，而蓝色图像是活动的。

这是我的代码

bottom_nav_menu

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/home_icon_selector"
        android:title="@string/title_home" />

    <item
        android:id="@+id/navigation_scheduler"
        android:icon="@drawable/schelduler_icon_selector"
        android:title="@string/title_scheduler" />

    <item
        android:id="@+id/navigation_favourites"
        android:icon="@drawable/favourites_icon_selector"
        android:title="@string/title_favourites" />


    <item
        android:id="@+id/navigation_settings"
        android:icon="@drawable/settings_icon_selector"
        android:title="@string/title_settings" />
</menu>

主页

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/nav_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="@dimen/margin_20"
    android:layout_marginLeft="@dimen/margin_20"
    android:layout_marginRight="@dimen/margin_20"
    android:layout_marginEnd="@dimen/margin_20"
    android:layout_marginBottom="@dimen/margin_8"
    android:background="@drawable/bottom_navigation_background"
    android:elevation="8dp"
    app:itemIconTint="@drawable/bottom_navigation_color_selector"
    app:labelVisibilityMode="unlabeled"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:menu="@menu/bottom_nav_menu" />

和选择器

调度程序选择器

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/qa_scheduler_inactive" android:state_checked="false"/>
    <item android:drawable="@drawable/ic_scheduler_blue" android:state_checked="true"/>
</selector>

设置选择器

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/qa_settings_inactive" android:state_checked="false"/>
    <item android:drawable="@drawable/ic_settings_blue" android:state_checked="true"/>
</selector>

收藏夹选择器

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/qa_favorites_inactive" android:state_checked="false"/>
    <item android:drawable="@drawable/ic_favourites_blue" android:state_checked="true"/>
</selector>

主页选择器

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/qa_home_inactive" android:state_checked="false"/>
    <item android:drawable="@drawable/ic_home" android:state_checked="true"/>
</selector>

活动代码

    val navView: BottomNavigationView = findViewById(R.id.nav_view)
    val navController = findNavController(R.id.nav_host_fragment)
    // Passing each menu ID as a set of Ids because each
    // menu should be considered as top level destinations.
    val appBarConfiguration = AppBarConfiguration(setOf(
            R.id.navigation_home, R.id.navigation_scheduler, R.id.navigation_favourites, R.id.navigation_settings))
    //  setupActionBarWithNavController(navController, appBarConfiguration)
    navView.setupWithNavController(navController)

我在这里做错了什么？请帮忙...

编辑： 我正在使用以下可绘制对象

输入链接说明

输入链接说明

- Sid

Answer 1

这个问题的原因是app:itemIconTint总是有一个值，即使它没有被使用，它也会取默认的主色/强调颜色的值。

因此，要解决这个问题，您需要显式地禁用它：

```xml app:itemIconTint="@null" ```

val btmNav = findViewById<BottomNavigationView>(R.id.nav_view)
navView.itemIconTintList = null

虽然我建议另一种方法：

这些图标已经具有相同的选中/未选中状态，但具有不同的色调颜色。如果这些图标是向量，则可以使用选择器在app:itemIconTint中进行颜色着色，并使用单个版本的图标而无需复制资源：

icon_color_selector.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#2596CD" android:state_checked="true" />
    <item android:color="#84D0F4" android:state_checked="false" />
</selector>

并应用它：

<com.google.android.material.bottomnavigation.BottomNavigationView
    ...
    app:itemIconTint="@drawable/icon_color_selector"

只保留带有图标的菜单项，而不是选择器，例如：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/home_icon"  //<<<<< icon not selector
        android:title="@string/title_home" />

    ....

</menu>

更新：

由于您正在使用导航架构组件，请确保在bottomNavView菜单中具有与navGraph中相应的ID匹配的ID，以便与bottomNavView片段相匹配。

如果您没有为bottomNavView片段使用navGraph ，则无法使用navView.setupWithNavController(navController)。

以下是您的可绘制图标

- Zain

---

@Sid 那么你可以使用 btmNav.itemIconTintList = null。 - Zain

我尝试了，但是选择的图标变成了白色，虽然默认的图标已经正确设置。 - Sid

@Sid 你使用哪种类型的图标.. 是XML可绘制对象吗？我仍然无法重现这个问题.. 请检查答案中的gif。 - Zain

@Sid，对于这个更新有什么想法吗？如果你还遇到问题，我很愿意继续帮助你。 - Zain

你好，很抱歉我两天没有工作。我没有得到答案，我不应该使用navView.setupWithNavController（navController）吗？那么底部导航如何与片段一起工作呢？ - Sid

Answer 2

这只是一个猜测，但也许是这里的这行代码：

app:itemIconTint="@drawable/bottom_navigation_color_selector"

你的可绘制对象的颜色出现了干扰吗？如果你的可绘制对象有正确的颜色（浅蓝色/深蓝色），它们应该能够与当前选择器一起工作。

或者，检查一下是否以其他方式（例如通过主题或编程方式）设置了app:itemIconTint来影响底部导航栏！

- Christos Christidis

---

我尝试删除了那行代码，现在所有的图标都显示为灰色，并且选中的图标为白色。 - Sid

Answer 3

你可以像 @Chris 所说的那样使用选择器来实现这一点，或者你可以通过使用 setOnNavigationItemSelectedListener{} 来动态地实现。

更新 - 如果要更改图标，你可以通过将当前的 item.icon 更改为填充状态，其他则更改为未填充状态来强制执行，参见 此处 以获取其概述（不要复制它，因为它是针对 tabLayout 的）。

navView.setOnNavigationItemSelectedListener { item -> 
            // change  the icon to filled icon
            true
        }

看起来listener已经过时了，请参考this

- Anshul

---

这里显示已弃用。如何更改其中的图标？ - Sid