在NavigationView菜单项上使用选择器添加自定义形状波纹 [英] Add custom shape ripple with selector on navigationview menu item

问题描述

我想使用导航视图项选择器添加带有圆角矩形的波纹效果.但是它一直在添加灰色矩形波纹效果.

导航视图

 < android.support.design.widget.NavigationViewandroid:id ="@ + id/navigation_view"android:layout_width ="match_parent"android:layout_height ="wrap_content"android:layout_gravity ="bottom"android:layout_marginStart ="8dp"android:layout_marginTop ="8dp"android:layout_marginEnd ="8dp"app:itemIconTint ="@ color/drawer_item"app:itemTextColor ="@ color/drawer_item"app:itemBackground ="@ drawable/drawer_item_bg"app:layout_constraintEnd_toEndOf ="parent"app:layout_constraintStart_toStartOf ="parent"app:layout_constraintTop_toTopOf ="parent"app:menu ="@ menu/bottom_app_bar_menu"/> 

drawer_item_bg.xml

 <选择器xmlns:android ="http://schemas.android.com/apk/res/android">< item android:state_checked ="true" android:drawable ="@ drawable/drawer_selected_item_bg"/>< item android:state_checked ="false" android:drawable ="@ android:color/transparent"/>< item android:state_pressed ="true" android:drawable ="@ drawable/custom_ripple_navitem"/>< item android:state_selected ="true" android:drawable ="@ drawable/custom_ripple_navitem"/>< item android:state_focused ="true" android:drawable ="@ drawable/custom_ripple_navitem"/> 

custom_ripple_navitem.xml

 <波纹xmlns:android ="http://schemas.android.com/apk/res/android"android:color =#360074FF">< item android:id ="@ android:id/mask">< shape android:shape ="rectangle">< corners android:radius ="8dp"/></形状></item> 

结果是

解决方案

解决方案"

当我发现这个问题时，我就开始对波纹效应进行实验，一段时间后，我完成了这段代码./p>

注意:这不是真正的涟漪效应，只是伪造的.让我知道您是否会对其进行改进.

@ layout/your_layout.xml

 < android.support.design.widget.NavigationView...android:theme ="@ style/Widget_NavigationItem_NoRipple"app:itemBackground ="@ drawable/drawer_item_background"/> 

@ values/styles.xml

 < style name ="Widget_NavigationItem_NoRipple">< item name ="android:colorControlHighlight"> @android:color/transparent</item></style> 

@ drawable/drawer_item_background.xml

 <选择器xmlns:android ="http://schemas.android.com/apk/res/android">< item android:drawable ="@ drawable/drawer_item_shape" android:state_checked ="true"/>< item android:drawable ="@ drawable/drawer_item_ripple" android:state_pressed ="true"/>< item android:drawable ="@ android:color/transparent" android:state_pressed ="false"/></selector> 

@ drawable/drawer_item_shape

 <图层列表xmlns:android ="http://schemas.android.com/apk/res/android">< item>< shape android:shape ="rectangle">< corners android:radius ="8dp"/>< solid android:color ="@ color/selectedItemBackgroundColor"/></形状></item></layer-list> 

@ drawable/drawer_item_ripple

 <波纹xmlns:android ="http://schemas.android.com/apk/res/android"android:color ="@ android:color/transparent">< item>< shape android:shape ="rectangle">< corners android:radius ="8dp"/>< solid android:color =?attr/colorControlHighlight"/></形状></item></ripple> 

I want to add a ripple effect with rounded corners rectangle with a selector for navigation view item. But it keeps adding the gray rectangle ripple effect.

navigation view

<android.support.design.widget.NavigationView
    android:id="@+id/navigation_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    app:itemIconTint="@color/drawer_item"
    app:itemTextColor="@color/drawer_item"
    app:itemBackground="@drawable/drawer_item_bg"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:menu="@menu/bottom_app_bar_menu"/>

drawer_item_bg.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_checked="true" android:drawable="@drawable/drawer_selected_item_bg"/>
<item android:state_checked="false" android:drawable="@android:color/transparent"/>
<item android:state_pressed="true" android:drawable="@drawable/custom_ripple_navitem"/>
<item android:state_selected="true" android:drawable="@drawable/custom_ripple_navitem"/>
<item android:state_focused="true" android:drawable="@drawable/custom_ripple_navitem"/>

custom_ripple_navitem.xml

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#360074FF">
<item android:id="@android:id/mask">
    <shape android:shape="rectangle">
        <corners android:radius="8dp"/>
    </shape>
</item>

The result is

解决方案

"Solution"

I started experimenting with ripple effect when I found this question, and after some time I finished with this code.

Note: It is not real ripple effect, just a fake one. Let me know if you'll make an improved version of it.

@layout/your_layout.xml

<android.support.design.widget.NavigationView
    ...
    android:theme="@style/Widget_NavigationItem_NoRipple"
    app:itemBackground="@drawable/drawer_item_background"/>

@values/styles.xml

<style name="Widget_NavigationItem_NoRipple">
    <item name="android:colorControlHighlight">@android:color/transparent</item>
</style>

@drawable/drawer_item_background.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/drawer_item_shape" android:state_checked="true"/>
    <item android:drawable="@drawable/drawer_item_ripple" android:state_pressed="true"/>
    <item android:drawable="@android:color/transparent" android:state_pressed="false"/>
</selector>

@drawable/drawer_item_shape

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <corners android:radius="8dp"/>
            <solid android:color="@color/selectedItemBackgroundColor"/>
        </shape>
    </item>
</layer-list>

@drawable/drawer_item_ripple

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@android:color/transparent">
    <item>
        <shape android:shape="rectangle">
            <corners android:radius="8dp"/>
            <solid android:color="?attr/colorControlHighlight"/>
        </shape>
    </item>
</ripple>

这篇关于在NavigationView菜单项上使用选择器添加自定义形状波纹的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！