android - 更改导航抽屉中选中菜单项的颜色

Question

我正在使用新的 Android 设计支持库在我的应用程序中实现导航抽屉。

我不知道如何更改所选项目的颜色！

这是菜单的xml：

<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
    <item
        android:id="@+id/navigation_item_1"
        android:icon="@drawable/ic_1"
        android:title="@string/navigation_item_1"/>

    <item
        android:id="@+id/navigation_item_2"
        android:icon="@drawable/ic_2"
        android:title="@string/navigation_item_2"/>
</group>

这是位于 a 中的导航视图 xml android.support.v4.widget.DrawerLayout：

<android.support.design.widget.NavigationView
    android:id="@+id/activity_main_navigationview"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    app:headerLayout="@layout/drawer_header"
    app:itemIconTint="@color/black"
    app:itemTextColor="@color/primary_text"
    app:menu="@menu/menu_drawer">

    <TextView
        android:id="@+id/main_activity_version"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_marginBottom="@dimen/activity_vertical_margin"
        android:layout_marginLeft="@dimen/activity_horizontal_margin"
        android:textColor="@color/primary_text" />

</android.support.design.widget.NavigationView>

谢谢您的帮助！

[编辑] 我已经看过这样的解决方案：更改 android 菜单的背景颜色。

这似乎是一个 hack，我认为使用新的设计支持库，会引入一些更清洁的东西吗？

score 266 · Accepted Answer

那么您可以使用Color State Resource来实现这一点。如果你注意到NavigationView你正在使用

app:itemIconTint="@color/black"
app:itemTextColor="@color/primary_text"

这里不要使用@color/blackor @color/primary_test，而是使用Color State List Resource. 为此，首先在目录内（应该在目录内）创建一个新的xml（例如，drawer_item.xml）。如果您还没有一个已命名的目录，请创建一个。colorrescolor

现在在里面drawer_item.xml做这样的事情

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="checked state color" android:state_checked="true" />
    <item android:color="your default color" />
</selector>

最后一步是改变你的NavigationView

<android.support.design.widget.NavigationView
    android:id="@+id/activity_main_navigationview"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    app:headerLayout="@layout/drawer_header"
    app:itemIconTint="@color/drawer_item"  // notice here
    app:itemTextColor="@color/drawer_item" // and here
    app:itemBackground="@android:color/transparent"// and here for setting the background color to tranparent
    app:menu="@menu/menu_drawer">

IconTint像这样，您可以为、ItemTextColor、使用单独的颜色状态列表资源ItemBackground。

现在，当您将项目设置为已选中（在xml或以编程方式）时，特定项目将具有与未选中项目不同的颜色。

score 78 · Accepted Answer

我相信app:itemBackground期待一个drawable。所以请按照以下步骤操作：

highlight_color.xml制作一个包含以下内容的可绘制文件：

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
     <solid android:color="YOUR HIGHLIGHT COLOR"/>
</shape>

nav_item_drawable.xml使用以下内容制作另一个可绘制文件：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:drawable="@drawable/highlight_color" android:state_checked="true"/>
</selector>

最后app:itemBackground在 NavView 中添加标签：

<android.support.design.widget.NavigationView
android:id="@+id/activity_main_navigationview"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/drawer_header"
app:itemIconTint="@color/black"
app:itemTextColor="@color/primary_text"
app:itemBackground="@drawable/nav_item_drawable"
app:menu="@menu/menu_drawer">

这里的 highlight_color.xml 文件为背景定义了一个可绘制的纯色。稍后将此颜色可绘制对象分配给 nav_item_drawable.xml 选择器。

这对我有用。希望这会有所帮助。

************************************************ 已更新 *** *******************************************

虽然上面提到的答案让您可以很好地控制某些属性，但我将要描述的方式感觉更可靠并且有点酷。

所以你可以做的是，你可以像这样在 NavigationView 中定义一个ThemeOverlaystyles.xml：

    <style name="ThemeOverlay.AppCompat.navTheme">

        <!-- Color of text and icon when SELECTED -->
        <item name="colorPrimary">@color/color_of_your_choice</item> 

        <!-- Background color when SELECTED -->
        <item name="colorControlHighlight">@color/color_of_your_choice</item> 

    </style>

现在将此 ThemeOverlay 应用于app:themeNavigationView 的属性，如下所示：

<android.support.design.widget.NavigationView
android:id="@+id/activity_main_navigationview"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:theme="@style/ThemeOverlay.AppCompat.navTheme"
app:headerLayout="@layout/drawer_header"
app:menu="@menu/menu_drawer">

我希望这将有所帮助。

score 5 · Accepted Answer

每当单击项目时，都需要设置NavigateItem检查为真NavigateView

//listen for navigation events
NavigationView navigationView = (NavigationView)findViewById(R.id.navigation);
navigationView.setNavigationItemSelectedListener(this);
// select the correct nav menu item
navigationView.getMenu().findItem(mNavItemId).setChecked(true);

添加NavigationItemSelectedListener_NavigationView

  @Override
  public boolean onNavigationItemSelected(final MenuItem menuItem) {
    // update highlighted item in the navigation menu
    menuItem.setChecked(true);
    mNavItemId = menuItem.getItemId();

    // allow some time after closing the drawer before performing real navigation
    // so the user can see what is happening
    mDrawerLayout.closeDrawer(GravityCompat.START);
    mDrawerActionHandler.postDelayed(new Runnable() {
      @Override
      public void run() {
        navigate(menuItem.getItemId());
      }
    }, DRAWER_CLOSE_DELAY_MS);
    return true;
  }

score 3 · Accepted Answer

第 1 步： 构建一个选中/未选中的选择器：

选择器.xml

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

第 2 步： 使用小部件中的属性XML来选择文本颜色。app:itemTextColorNavigationView

<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    app:headerLayout="@layout/navigation_header_layout"
    app:itemTextColor="@drawable/selector"
    app:menu="@menu/navigation_menu" />

第 3 步和第 4 步：

第 3 步：使菜单图标可检查：将所有项目包装在 a<group>和 set中android:checkableBehavior="single"

第 4 步：更改图标颜色：将选择器设置为所有具有app:iconTint

<?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">
    
    <group android:checkableBehavior="single">
    
        <item
            android:id="@+id/nav_account"
            android:checked="true"
            android:icon="@drawable/ic_person_black_24dp"
            android:title="My Account"
            app:iconTint="@drawable/selector" />
        <item
            android:id="@+id/nav_settings"
            android:icon="@drawable/ic_settings_black_24dp"
            android:title="Settings"
            app:iconTint="@drawable/selector" />

        <item
            android:id="@+id/nav_logout"
            android:icon="@drawable/logout"
            android:title="Log Out"
            app:iconTint="@drawable/selector" />
    </group>

</menu>

步骤 5: : 确保onNavigationItemSelected()回调返回 true 以使用选择事件

navView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        drawerLayout.closeDrawer(GravityCompat.START);
        return true;
    }
});

结果：

边注：

如果设置android:checkableBehavior="single"不起作用，那么您可以通过手动检查所选项目并清除先前选择的项目来以编程方式处理此问题：

@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {

    int id = item.getItemId();
    
    // remove all colors of the items to the `unchecked` state of the selector
    removeColor(mNavigationView);
    
    // check the selected item to change its color set by the `checked` state of the selector
    item.setChecked(true);

    switch (item.getItemId()) {
      case R.id.dashboard:
          ...
    }

    drawerLayout.closeDrawer(GravityCompat.START);
    return true;
}

private void removeColor(NavigationView view) {
    for (int i = 0; i < view.getMenu().size(); i++) {
        MenuItem item = view.getMenu().getItem(i);
        item.setChecked(false);
    }
}

score 2 · Accepted Answer

这是实现此目的的另一种方法：

public boolean onOptionsItemSelected(MenuItem item) {

    int id = item.getItemId();

    item.setOnMenuItemClickListener(new MenuItem.OnMenuItemClickListener() {
        @Override
        public boolean onMenuItemClick(MenuItem item) {
            item.setEnabled(true);
            item.setTitle(Html.fromHtml("<font color='#ff3824'>Settings</font>"));
            return false;
            }
        });


    //noinspection SimplifiableIfStatement
    if (id == R.id.action_settings) {
        return true;
    }

    return super.onOptionsItemSelected(item);
}

}

score 1 · Accepted Answer

以下是在 Activity 的 onCreate 方法中执行此操作的方法：

NavigationView navigationView = findViewById(R.id.nav_view);
ColorStateList csl = new ColorStateList(
    new int[][] {
        new int[] {-android.R.attr.state_checked}, // unchecked
        new int[] { android.R.attr.state_checked}  // checked
    },
    new int[] {
        Color.BLACK,
        Color.RED
    }
);
navigationView.setItemTextColor(csl);
navigationView.setItemIconTintList(csl);

score 0 · Accepted Answer

如果要在材质 3 中保留所选项目的圆角，请使用 app:itemShapeFillColor="@color/main_navigation_view" 而不是 app:itemBackground="@color/main_navigation_view"

android - 更改导航抽屉中选中菜单项的颜色

7 回答 7

Related

Reference