将 Material Design Touch Ripple 应用于 ImageButton？

Posted 2023-02-22

【中文标题】将 Material Design Touch Ripple 应用于 ImageButton？

【英文标题】：Apply Material Design Touch Ripple to ImageButton?

【发布时间】：2015-09-06 16:53:39

【问题描述】：

我有一个图像按钮，当它被点击时，它不会响应触摸动画，因为它是一个静态图像，不像棒棒糖上的常规按钮，它带有内置的波纹效果。我想为图像添加材料设计波纹触摸效果，但似乎找不到实现它的方法。我可以在图像上设置一个滤色器，但这不是涟漪效应。我正在尝试做的一个示例是，当您在 Google Play 音乐中拿着专辑封面图片时，阴影波纹在图片上移动。

【参考方案1】：

您可以像这样为 ImageButton 添加背景：

<ImageButton
    android:layout_
    android:layout_
    android:src="@android:drawable/btn_dialog"
    android:background="?android:attr/selectableItemBackground" />

【讨论】：

使用 android:foreground="?attr/selectableItemBackgroundBorderless"

@MFQ 与 ?android:attr/selectableItemBackground 有何不同

@killer selectableItemBackgroundBorderless = 给出一个没有边界的圆形波纹，就像您单击工具栏中的图标一样，但是 selectableItemBackground 给出矩形波纹，如果您长时间单击实现的图标，您会看到差异这个画带

【参考方案2】：

为了更好的结果：

<ImageButton
    android:layout_
    android:layout_
    android:src="@android:drawable/ic_button"
    android:background="?attr/selectableItemBackgroundBorderless"
/>

【讨论】：

这是更好的答案 - 提供圆形感觉以及涟漪效应，谢谢。

这也适用于彩色绘图吗？对我来说，尽管应用了背景，但没有可见的触摸效果。我的主题是从 Theme.AppCompat.Light.DarkActionBar 扩展而来的，这可能是个问题吗？

而不是背景使用它的前景，它工作正常的所有视图。

有没有人找到办法做到这一点并改变背景颜色？更改 BackgroundTint 不起作用并将 Foreground 设置为“?attr/selectableItemBackgroundBorderless”会在按钮上产生令人讨厌的填充。

一定很喜欢我翻阅了大量 Google 文档但从未见过的方式...风格信息令人难以置信地难以发现。

【参考方案3】：

我从 i.shadrin (here) 和 Nicolars (here) 得到了很好的答案。

他们的答案之间的区别在于?attr/selectableItemBackgroundBorderless 可以给你一个android.view.InflateException，所以?android:attr/selectableItemBackground 是解决方案。

FWIW，我不知道为什么会发生异常，因为第一个答案在我所有的旧项目中都运行良好，但在我最近的项目中却不行（可能是因为应用程序主题 = android:Theme.Material？）。

发生的奇怪事情是，虽然显示了涟漪效果，但它超出了 ImageButton 的范围，因此解决方案是：

使用android:foreground="?android:attr/selectableItemBackgroundBorderless" 代替android:background="?android:attr/selectableItemBackgroundBorderless"

如果您面临同样的问题，希望对您有所帮助。

【参考方案4】：

如果你已经有背景并且不想改变它，使用前景；

<ImageButton
    android:layout_
    android:layout_
    android:background="@drawable/preview_in_4k_background"
    android:src="@drawable/ic_full_screen_24px"
    android:layout_marginLeft="5dp"
    android:foreground="?attr/selectableItemBackgroundBorderless"
    android:layout_column="2"/>

【讨论】：

不错的解决方案，但如果你有圆角背景，那么波纹会超出它。

【参考方案5】：

您可以使用具有此属性的 MaterialButton (com.google.android.material.button.MaterialButton) 代替 ImageButton。 如果您使用材料组件。

 <style name="IconOnlyButton">
    <item name="iconPadding">0dp</item>
    <item name="iconGravity">textStart</item>
 </style>

<com.google.android.material.button.MaterialButton
    style="@style/IconOnlyButton"
    app:icon="@drawable/ic_refresh"/>