底部导航视图图标更改不起作用
Bottom Navigation view icon change not working
我想在切换项目时更改为底部导航视图的图标。
我选择的项目有浅蓝色图标和深蓝色图标。
我正在为每个导航项使用可绘制的选择器,但我看到像下面这样的图像,灰色为非活动状态,蓝色为活动状态
这是我的代码
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>
Activity代码
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)
我在这里做错了什么?请帮忙...
编辑:
我正在使用以下可绘制对象
这只是一个大胆的猜测,但也许这里的这一行是:
app:itemIconTint="@drawable/bottom_navigation_color_selector"
是否干扰了可绘制对象的颜色?如果您的可绘制对象具有正确的颜色(浅色 blue/dark 蓝色),它们应该可以与您当前的选择器一起使用。
或者,检查您是否没有通过其他方式(例如通过主题或编程)为底部导航设置 app:itemIconTint
!
您可以像@Chris 所说的那样使用选择器来实现此目的,或者您可以使用 setOnNavigationItemSelectedListener{}
动态地完成此操作
更新 - 要更改图标,您可以通过将当前 item.icon
更改为已填充图标并将其他图标更改为未填充图标来暴力破解,请参阅 here 了解其要点(不要复制它用于 tabLayout)。
navView.setOnNavigationItemSelectedListener { item ->
// change the icon to filled icon
true
}
看来 listner 贬值了所以参考
这个问题的原因是app:itemIconTint
总是有一个值,即使不使用,它也采用primary/accent种颜色的默认值。
因此,要解决您的问题,您需要通过以下方式明确禁用此功能:
val btmNav = findViewById<BottomNavigationView>(R.id.nav_view)
navView.itemIconTintList = null
虽然我推荐另一件事:
这些图标在 checked/unchecked 状态下已经是相同的图标,但具有不同的色调。如果这些图标是矢量,那么您可以使用 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
菜单中的 ID 与 bottomNavView
片段的 navGraph
中的相应 ID 相匹配。
如果您不对 bottomNavView
片段使用 navGraph
,则不能使用 navView.setupWithNavController(navController)
这是你的可绘制图标
我想在切换项目时更改为底部导航视图的图标。
我选择的项目有浅蓝色图标和深蓝色图标。 我正在为每个导航项使用可绘制的选择器,但我看到像下面这样的图像,灰色为非活动状态,蓝色为活动状态
这是我的代码
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>
Activity代码
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)
我在这里做错了什么?请帮忙...
编辑: 我正在使用以下可绘制对象
这只是一个大胆的猜测,但也许这里的这一行是:
app:itemIconTint="@drawable/bottom_navigation_color_selector"
是否干扰了可绘制对象的颜色?如果您的可绘制对象具有正确的颜色(浅色 blue/dark 蓝色),它们应该可以与您当前的选择器一起使用。
或者,检查您是否没有通过其他方式(例如通过主题或编程)为底部导航设置 app:itemIconTint
!
您可以像@Chris 所说的那样使用选择器来实现此目的,或者您可以使用 setOnNavigationItemSelectedListener{}
更新 - 要更改图标,您可以通过将当前 item.icon
更改为已填充图标并将其他图标更改为未填充图标来暴力破解,请参阅 here 了解其要点(不要复制它用于 tabLayout)。
navView.setOnNavigationItemSelectedListener { item ->
// change the icon to filled icon
true
}
看来 listner 贬值了所以参考
这个问题的原因是app:itemIconTint
总是有一个值,即使不使用,它也采用primary/accent种颜色的默认值。
因此,要解决您的问题,您需要通过以下方式明确禁用此功能:
val btmNav = findViewById<BottomNavigationView>(R.id.nav_view)
navView.itemIconTintList = null
虽然我推荐另一件事:
这些图标在 checked/unchecked 状态下已经是相同的图标,但具有不同的色调。如果这些图标是矢量,那么您可以使用 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
菜单中的 ID 与 bottomNavView
片段的 navGraph
中的相应 ID 相匹配。
如果您不对 bottomNavView
片段使用 navGraph
,则不能使用 navView.setupWithNavController(navController)
这是你的可绘制图标