在 ImageButton 之外实现波纹效果

Posted 2023-04-14

【中文标题】在 ImageButton 之外实现波纹效果

【英文标题】：Implementing Ripple effect outside ImageButton

【发布时间】：2015-02-08 05:06:53

【问题描述】：

我正在尝试为 ImageButton 实现波纹效果。我在背景中设置了波纹，并在 src 中为它设置了可绘制图像。

android:background="@drawable/myripplexml"
android:src="@drawable/myimagepath"

它在按钮布局中产生了很好的涟漪效果。但我希望波纹效果也扩展到按钮布局之外。另一种方法是使用：

 android:background="?android:attr/selectableItemBackgroundBorderless"

但它使用默认颜色和样式。如何自定义它的颜色、形状和大小？

【问题讨论】：

没搞懂你，你到底想做什么？

@MurtazaHussain 我想要类似 selectableItemBackground BorderLess 但颜色不同的效果。

创建无边框的drawable。

不行。 selectableItemBackgroundBorderless 用于超出视图的波纹。来源：developer.android.com/training/material/animations.html

您可以通过简单地不向<ripple> 元素添加子元素来创建无边界波纹。 RippleDrawable 文档中有一个示例。

【参考方案1】：

我遇到了这个问题，我的问题是“selectableItemBackgroundBorderless”创建了一个矩形，而我的按钮是圆形的。我不确定这是否回答了原始问题，但这是我发现的：在 drawable-v21 中将背景设置为此

<ripple
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="?android:colorControlHighlight">
    <item android:id="@android:id/mask">
        <shape android:shape="oval">
            <solid android:color="?android:colorAccent" />
        </shape>
    </item>
</ripple>

和较低 api 级别的 @null （假设您使用选择器作为实际图像按钮 src）。在按钮的填充中最明显的波纹。如果根本没有遮罩层波纹是不受约束的，有点占据了整个屏幕。如果不是圆形，您可以使用任何您想要的形状。

【讨论】：

看来不是无国界的。它对我来说似乎是一个日食形状。它在视图的边界内

如果您为视图设置了边距，它可能会这样做

【参考方案2】：

如果您像我一样懒惰，请使用默认的波纹，忘记向后兼容性。基本上有两种类型的背景波纹你可以添加到你的视图中：

 ?android:selectableItemBackground // Ripple within view
 ?android:selectableItemBackgroundBorderless //Ripple outside view

不幸的是，这些涟漪始终是灰色的。要根据您的主题调整这些，请转到您的父主题并更改 colorControlHighlight。

在您应用的主题中：

<item name="colorControlHighlight">#1bff3a</item>

这个值会改变默认波纹的颜色。

注意： 在 21 岁以下的设备上，波纹会变成与您设置的颜色相同的正常选择器。

【讨论】：

您提到了 2 种背景波纹，但您列出了 2 种同名？

这些是如何工作的？有没有更好的方法来定制它们（大小和颜色）？

@androiddeveloper 我们只能改变这些涟漪的颜色。我找不到任何可以自定义的尺寸属性。

@amalBit 有什么方法可以复制它的代码？也许那里，有drawable的大小......

@androiddeveloper 你可以试试自定义波纹guides.codepath.com/android/ripple-animation

【参考方案3】：

就像@alan 在他的评论中提到的那样。如果您创建一个没有遮罩和子项的波纹项并将其添加为视图背景，则波纹将绘制在第一个可用父项的顶部，并可能扩展视图边界。 This is mentioned in the doc

<!-- An unbounded red ripple. --/>
<ripple android:color="#ffff0000" />

【讨论】：

这行得通！您可能还想在波纹上设置 android:radius。