如何在选择器的视图范围内保持涟漪效果？

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>

这是我正在处理的drawable：

<?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>

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

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

在阅读之后，第二次尝试来自这个链接，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>

而结果根本不是这张图片中所期望的：

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

我还尝试了以下其他 StackOverflow 问题的提示：

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”属性，确保其值与按钮背景中的圆角半径相同。