按下时将NavigationView背景更改为圆形无法正常工作 [英] Changing NavigationView background to round shape not working when pressed

问题描述

我正在使用布局中的 app:itemBackground 设置导航项背景

 < android.support.design.widget.NavigationViewandroid:id ="@ + id/nav_view"android:layout_width ="wrap_content"android:layout_height ="match_parent"android:layout_gravity ="start"android:fitsSystemWindows ="true"app:itemBackground ="@ drawable/nav_selector_background"app:headerLayout ="@ layout/nav_header_main"app:menu ="@ menu/activity_main_drawer"/> 

这是 nav_selector_background.xml

 <涟漪xmlns:android ="http://schemas.android.com/apk/res/android" android:color ="@ color/colorNavItemSelected">< item android:id ="@ android:id/mask">< color android:color =#000"/><！-任何颜色都可以-></item><项目android:right ="8dp"><选择器>< item android:state_pressed ="true" android:drawable ="@ drawable/nav_item_background_round"/>< item android:state_focused ="true" android:drawable ="@ drawable/nav_item_background_round"/>< item android:state_checked ="true" android:drawable ="@ drawable/nav_item_background_round"/>< item android:state_activated ="true" android:drawable ="@ drawable/nav_item_background_round"/>< item android:state_active ="true" android:drawable ="@ drawable/nav_item_background_round"/>< item android:state_hovered ="true" android:drawable ="@ drawable/nav_item_background_round"/>< item android:state_drag_hovered ="true" android:drawable ="@ drawable/nav_item_background_round"/>< item android:drawable ="@ android:color/transparent"/></selector></item> 

还有 nav_item_background_round :

 <?xml version ="1.0" encoding ="UTF-8"?>< layer-list xmlns:android ="http://schemas.android.com/apk/res/android">< item><形状>< solid android:color ="@ color/colorNavItemSelected"/>< corners android:bottomRightRadius ="32dp"android:topRightRadius ="32dp"/></形状></item></layer-list> 

问题是，当我按该项目时，整个背景都会突出显示，如屏幕截图所示.我只希望红色部分突出显示.

如果有人对编译和运行该应用程序感兴趣，我将样本上传到

I am setting navigation item background using app:itemBackground in layout:

<android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:itemBackground="@drawable/nav_selector_background"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer"/>

Here is nav_selector_background.xml

<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@color/colorNavItemSelected">
<item android:id="@android:id/mask">
    <color android:color="#000"/> <!-- any color will do -->
</item>

<item
        android:right="8dp">
    <selector>
        <item android:state_pressed="true" android:drawable="@drawable/nav_item_background_round"/>
        <item android:state_focused="true" android:drawable="@drawable/nav_item_background_round"/>
        <item android:state_checked="true" android:drawable="@drawable/nav_item_background_round"/>
        <item android:state_activated="true" android:drawable="@drawable/nav_item_background_round"/>
        <item android:state_active="true" android:drawable="@drawable/nav_item_background_round" />
        <item android:state_hovered="true" android:drawable="@drawable/nav_item_background_round" />
        <item android:state_drag_hovered="true" android:drawable="@drawable/nav_item_background_round" />
        <item android:drawable="@android:color/transparent"/>
    </selector>

</item>

And nav_item_background_round:

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <solid android:color="@color/colorNavItemSelected"/>
            <corners android:bottomRightRadius="32dp"
                     android:topRightRadius="32dp"/>
        </shape>
    </item>
</layer-list>

Problem is when I press on the item the whole background is highlighted as seen in the screenshot. I only want the red part highlighted.

I uploaded the sample on Github if anybody is interested in compiling and running the app.

解决方案

With the NavigationView in the MaterialComponents libarry you can use:

• app:itemShapeAppearanceOverlay attribute to define a custom shape for the each item
• app:itemShapeFillColor attribute to define the color used to fill the shape

Something like:

  <com.google.android.material.navigation.NavigationView
      app:itemShapeFillColor="@color/selector_menu"
      app:itemShapeAppearanceOverlay="@style/ShapeAppearanceOverlay.Nav"
      android:theme="@style/ThemeOverlay.NavigationView"
      ../>

where the selector is something like:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:alpha="0.50" android:color="@color/primaryColor" android:state_pressed="true"/>
  <item android:alpha="0.12" android:color="@color/primaryColor" android:state_activated="true"/>
  <item android:alpha="0.12" android:color="@color/primaryColor" android:state_checked="true"/>
  <item android:color="@android:color/transparent"/>
</selector>

and the shape is defined by:

  <style name="ShapeAppearanceOverlay.Nav" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSizeTopRight">50%</item>
    <item name="cornerSizeBottomRight">50%</item>
    <item name="cornerSizeBottomLeft">0dp</item>
    <item name="cornerSizeTopLeft">0dp</item>
  </style>

Also use the android:theme to override the color used by the ripple.

  <style name="ThemeOverlay.NavigationView" parent="">
    <item name="android:colorControlHighlight">@android:color/transparent</item>
  </style>

这篇关于按下时将NavigationView背景更改为圆形无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！