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。

获取您想要具有圆角波纹角的按钮（或任何视图），并使用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”属性，请确保其值与按钮背景中的圆角半径相同。

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

1 个答案: