android - 如何在选择器的 View 范围内保持链式 react ？

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>

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

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

阅读完后，第二次尝试来自此链接，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 .

选择你想要圆形波纹角的按钮(或任何 View )，并在 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”属性，确保其值与按钮背景中的圆角半径相同。