选定状态覆盖的 Android 波纹效果

Posted 2023-04-14

【中文标题】选定状态覆盖的 Android 波纹效果

【英文标题】：Android Ripple Effect Overridden by Selected State

【发布时间】：2015-07-23 04:23:00

【问题描述】：

找了好久没找到答案……

我有一个回收站视图，其中的项目在选择时具有红色背景和白色文本（之前背景为白色，文本为黑色）。为此，我使用了一个选择器。

我最近尝试为此添加涟漪效果，但除非我长时间单击该项目，否则该项目的背景会直接变为红色而没有涟漪。我假设这是因为选择器状态 state_selected 覆盖了 sate_pressed 上的波纹？

有谁知道有没有办法解决这个问题？这是我使用的选择器代码：

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

    <item>
        <selector xmlns:android="http://schemas.android.com/apk/res/android" >
            <item
                android:drawable="@drawable/ripple"
                android:state_pressed="true"/>
            <item
                android:drawable="@android:color/holo_red_dark"
                android:state_selected="true"/>
            <item android:drawable="@android:color/white"/>
        </selector>
    </item>

</ripple>

提前致谢！

【参考方案1】：

要创建具有涟漪效果并显示选定状态的选择器背景，我执行以下操作：

首先定义你的高亮颜色，并带有一些透明度：

values/colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="selector_color">#660000ff</color>
</resources>

您可能希望在棒棒糖之前具有兼容性。在 drawable 文件夹中放置一个典型的老式选择器：

drawable/selector_background.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/selector_color" android:state_pressed="true"/>
    <item android:drawable="@color/selector_color" android:state_selected="true"/>
    <item android:drawable="@android:color/transparent"/>
</selector>

然后在drawable-v21文件夹中添加以下可绘制图层：

drawable-v21/selector_background.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <selector>
            <item android:state_selected="true"
                android:drawable="@color/selector_color" />
            <item android:drawable="@android:color/transparent" />
        </selector>
    </item>
    <item>
        <ripple android:color="@color/selector_color">
            <item android:id="@android:id/mask">
                <color android:color="@android:color/white" />
            </item>
        </ripple>
    </item>
</layer-list>

现在您可以使用@drawable/selector_background 作为您的选择器。

【讨论】：

对于其他人，当与按钮一起使用时，这种层列表方法有效，但您需要使用 state_activated

尽管涟漪效果完美，但列表项并未保持选中状态。

这很好用。涟漪效果的颜色和选中的颜色应该不同，这样用户在选择已经选中的item时可以看到涟漪效果。

非常好的解决方案，但正如@urSus 已经提到的，您需要使用：“state_activated”而不是“state_selected”。谢谢！

【参考方案2】：

所以我有另一种情况，我不得不为此使用选择器和图层列表

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true">
        <ripple xmlns:android="http://schemas.android.com/apk/res/android"
                android:color="@color/colorRipple">
            <item>
                <layer-list>
                    <item>
                        <shape android:shape="rectangle">
                            <solid android:color="@color/grey_very_light" />
                        </shape>
                    </item>
                    <!-- ripple color -->
                    <item android:bottom="1dp">
                        <shape android:shape="rectangle">
                            <solid android:color="@color/c_unread_notifications_item" />
                        </shape>
                    </item>

                </layer-list>
            </item>
        </ripple>

    </item>
    <item>
        <ripple xmlns:android="http://schemas.android.com/apk/res/android"
                android:color="@color/colorRipple">
            <item>
                <!-- ripple color -->
                <layer-list>

                    <item>
                        <shape android:shape="rectangle">
                            <solid android:color="@color/grey_very_light" />
                        </shape>
                    </item>

                    <item android:bottom="1dp">
                        <shape android:shape="rectangle">
                            <solid android:color="@color/white" />
                        </shape>
                    </item>

                </layer-list>
            </item>
        </ripple>
    </item>
</selector>

这很有效，如果您没有任何分层，您只需将波纹下的项目替换为您的项目形状即可。 希望这会有所帮助

【参考方案3】：

如果你把你的recyclerview item view包裹在FrameLayout中，并设置FrameLayout的android:background="?selectableItemBackground"和FrameLayout background="@drawable/background"的子布局会更好

背景.xml

<item android:drawable="@color/red" android:state_selected="true"/>
<item android:drawable="@color/red" android:state_focused="true"/>
<item android:drawable="@color/red" android:state_pressed="true"/>
<item android:drawable="@color/white"/>

然后子布局必须有属性 android:duplicateParentState="true"