如何在选择器的视图范围内保持连锁反应？

Question

我想弄清楚为什么我的涟漪效果不符合我放置它的形状。下面是我使用的代码：

这是我设置为 ImageViews 背景的多功能按钮

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

    <!-- Enabled, Not Clicked -->
    <item
        android:state_enabled="true"
        android:state_pressed="false"
        android:drawable="@drawable/some_drawable_1"
        android:color="@color/Black"
        />

    <!-- Not Enabled, Not Clicked -->
    <item
        android:state_enabled="false"
        android:state_pressed="false"
        android:drawable="@drawable/some_drawable_1"
        android:color="@color/LightGrey"
        />

    <!-- Not Enabled, Clicked -->
    <item
        android:state_enabled="false"
        android:state_pressed="true"
        android:drawable="@drawable/some_drawable_1"
        android:color="@color/LightGrey"
        />

    <!-- Enabled, Clicked -->
    <item
        android:state_enabled="true"
        android:state_pressed="true"
        android:drawable="@drawable/the_drawable_I_am_working_on"
        android:color="@color/White"
        />
</selector>

这是我正在处理的可绘制对象：

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Ripple 1 -->
    <!-- Button -->
    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle">
            <solid
                android:color="@color/colorPrimary" />
            <stroke
                android:width="1dp"
                android:color="@color/black" />
            <corners
                android:bottomLeftRadius="8dp"
                android:bottomRightRadius="8dp"
                android:topLeftRadius="8dp"
                android:topRightRadius="8dp" />

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

上面的这段代码产生了这样的效果：

如你所见，它做了两件奇怪的事情，首先，当波纹完成时它不会停留在按钮的边界内（它忽略了圆角，这是我试图修复的关键)，其次，由于某种原因，第一次点击永远无法正常工作。

阅读完之后，第二次尝试来自 link、Material effect on button with background color，我将 drawable 更改为：

<?xml version="1.0" encoding="utf-8"?>
<!-- Ripple 2 -->
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="@color/colorPrimaryDarkest">
    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle">
            <solid
                android:color="@color/colorPrimary" />
            <stroke
                android:width="1dp"
                android:color="@color/black" />
            <corners
                android:bottomLeftRadius="8dp"
                android:bottomRightRadius="8dp"
                android:topLeftRadius="8dp"
                android:topRightRadius="8dp" />

        </shape>
    </item>
</ripple>

上面的这段代码产生了这样的效果：

如你所见，这个版本虽然修复了现在在范围内的问题，但不再保持涟漪效果；它只是缓慢地将背景颜色转换为第二种颜色，而不是产生实际的波纹效果。

此外，为了清楚起见，我也尝试将形状移动到它自己的可绘制文件（名为 testing2）中，然后像这样引用它：

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

它做同样的事情。

最后，我尝试使用此代码的掩码：

<?xml version="1.0" encoding="utf-8"?>
<!-- Ripple 2 -->
<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/colorPrimaryDarkest">
    <item
        android:id="@android:id/mask"
        android:drawable="@drawable/testing2" />
</ripple>

结果根本不是我们想要的，如图所示：

它不仅不是波纹效果，而且现在是完全不同的颜色（可能是两者的混合）

我还尝试了有关以下其他 Whosebug 问题的提示：

1) How to add a ripple effect on a layout with rounded corners?

2) How to create ripple effect in simple layout

3) Custom circle button

我的问题是，为了使波纹像第一张图像一样可绘制，但在形状范围内工作，我缺少什么？

谢谢大家

Answer 1

我终于明白了：

我使用了这个库：https://github.com/balysv/material-ripple。

选择您想要圆角波纹角的按钮（或任何视图），并在 XML 中用 "com.balysv.materialripple.MaterialRippleLayout" 包裹它，然后确保添加 rippleRoundedCorners 和 rippleOverlay 属性那个 XML 包装器。它看起来像这样：

<com.balysv.materialripple.MaterialRippleLayout
    android:id="@+id/ripple"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:mrl_rippleOverlay="true"
    app:mrl_rippleRoundedCorners="18dp">
    <!-- Make sure the mrl_rippleRoundedCorners value is the same as the button's background's corner radius -->

<Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:text="Button inside a ripple"
    android:background="@drawable/rounded_background"/>

</com.balysv.materialripple.MaterialRippleLayout>

对于包装器中的 "mrl_rippleRoundedCorners" 属性，请确保其值与按钮背景中的圆角半径相同。

如何在选择器的视图范围内保持连锁反应？

How do I keep a ripple effect within a view's bounds in a selector?

android

android-drawable

android-button

rippledrawable

android-shape