Android 底部导航栏：选中项改变文本和图标颜色

Question

最近我探索了Android的BottomNavigationView组件。我有4个菜单项，当前我的BottomNavigationView配置如下：

<android.support.design.widget.BottomNavigationView
    android:id="@+id/activity_product_details_bottom_navigation_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    app:itemBackground="@color/colorPrimary"
    app:itemIconTint="@color/menu_select_deselect"
    app:itemTextColor="@color/menu_select_deselect"
    app:menu="@menu/menu_product_details"/>

我想要的是对所选元素和未选元素区分明显的颜色。我还创建了一个名为menu_select_deselect.xml的Color状态列表文件，将其放置在res / color目录中，如下所示：

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

    <item android:color="@color/white" android:state_checked="true"/>
    <item android:color="@color/tint_color_deselected"/>
</selector>

menu_product_details.xml如下：

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

<item
    android:id="@+id/menu_product_details_home"
    app:showAsAction="ifRoom"
    android:enabled="true"
    android:icon="@drawable/ic_home"
    android:title="@string/menu_product_details_home" />

<item
    android:id="@+id/menu_product_details_product_documents"
    app:showAsAction="ifRoom"
    android:enabled="true"
    android:icon="@drawable/ic_product_documents"
    android:title="@string/menu_product_details_product_documents" />

<item
    android:id="@+id/menu_product_details_product_part_list"
    app:showAsAction="ifRoom"
    android:enabled="true"
    android:icon="@drawable/ic_product_part_list"
    android:title="@string/menu_product_details_product_part_list" />

<item
    android:id="@+id/menu_product_details_product_service"
    app:showAsAction="ifRoom"
    android:enabled="true"
    android:icon="@drawable/ic_product_service"
    android:title="@string/menu_product_details_product_service" />
</menu>

有人可以帮我看看这个代码的问题吗？即使我点击其他三个项目，只有第一个元素会以白色显示。

- Sagar Mehta

---

menu_product_details.xml中的所有项目都是android:enabled="true"吗？换句话说，菜单中的所有项目都是启用状态吗？ - Ram

是的，所有项的属性都设置为true，如android:enabled="true"。 - Sagar Mehta

Answer 1

您可以通过添加代码更改选择/取消选择的图标和文本的色调颜色。

app:itemIconTint=""
app:itemTextColor=""

以下是BottomNavigationView的两个属性，您可以通过在xml中添加可绘制选择器来设置它们。

但是，如果您想要更改所选项目的图标而不仅仅是颜色，则我有另一种解决方案。移除原先的属性。

app:itemIconTint=""

从你的BottomNavigationView xml文件中复制以下代码，并将其添加到BottomNavigationView可用的类中:

bottomNavigationView.setItemIconTintList(null);

这将禁用所选项目图标的颜色渐变效果，并根据您的选择器绘制更改图标。

我也遇到了同样的问题。当 BottomNavigationView 的项目被选中/选定时，我添加了选择器绘制来更改其图标。每个项目的选择器绘制都在 BottomNavigationView 的菜单文件中作为图标添加。

- Kishan Solanki

Answer 2

回答我的问题，我代码中的错误是在onNavigationItemSelected()方法中替换了返回值。早些时候我返回了false，但是期望的是返回true，这可能会对某些人有所帮助。

 bottomNavigation.setOnNavigationItemSelectedListener(
new BottomNavigationView.OnNavigationItemSelectedListener() {
 @Override
 public boolean onNavigationItemSelected(@NonNull MenuItem item) {
  switch (item.getItemId()) {
   case R.id.menu_product_details_home:
    break;
   case R.id.menu_product_details_product_documents:
    break;
   case R.id.menu_product_details_product_part_list:
    break;
   case R.id.menu_product_details_product_service:
    break;
  }
  return true;
 }
});

- Sagar Mehta

Answer 3

将您的选择器文件更改为以下内容。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/white" android:state_enabled="true" />
    <item android:color="@color/colorPrimaryDark" android:state_enabled="false" />
</selector>

并且使用@drawable而不是@color进行引用。

- Deewankshi Sharma

---

这是错误的，应该是state_checked而不是state_enabled。 - Petr Kubáč

是的，谢谢@Deewankshi，它起作用了。FYI：正如Kubicko指出的那样，我将其更改为state_checked。 - Kenny Dabiri

Answer 4

在引用可绘制资源时，请使用@drawable而不是@color

<android.support.design.widget.BottomNavigationView
    android:id="@+id/activity_product_details_bottom_navigation_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    app:itemBackground="@color/colorPrimary"
    app:itemIconTint="@drawable/menu_select_deselect"
    app:itemTextColor="@drawable/menu_select_deselect"
    app:menu="@menu/menu_product_details"/>

- Ram

---

"@drawable"和"@color"对我来说都很好用。 - Sagar Mehta