单击按钮时如何在按钮上产生圆形波纹？

Posted 2023-02-22

【中文标题】单击按钮时如何在按钮上产生圆形波纹？

【英文标题】：How to make a circular ripple on a button when it's being clicked?

【发布时间】：2015-11-03 16:15:48

【问题描述】：

背景

在 android 的拨号器应用中，当您开始搜索某个内容时，单击 EditText 左侧的箭头按钮，您会在其上获得圆形波纹效果：

问题

我也试过了，但我得到了一个长方形的：

    <ImageButton
        android:id="@+id/navButton"
        android:layout_
        android:layout_
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="8dp"
        android:background="?android:attr/selectableItemBackground"
        android:src="@drawable/search_ic_back_arrow"/>

问题

如何使按钮在被点击时产生圆形波纹效果？我必须创建一个新的可绘制对象，还是有内置的方法？

【问题讨论】：

github.com/traex/RippleEffect 试试这个

可能的答案在这里***.com/questions/33477025/…

考虑将您选择的答案更改为投票最多的答案，因为它实际上解决了问题

@JeffBarger 为什么？两者都工作正常。他们之间没有比这更好的了。

【参考方案1】：

如果您使用的是 AppCompat 主题，那么您可以将视图的背景设置为：

android:background="?selectableItemBackgroundBorderless"

这将在 21 及以上添加圆形波纹，并在 21 以下添加方形背景。

【讨论】：

不错。我也可以设置它的颜色吗？

在 API 23 中，与 selectbleItemBackgroundBorderless 相比，“向上”背景的大小似乎只有一半

@androiddeveloper，可以通过在你的styles.xml中设置colorControlHighlight来设置颜色#F00

如果您在其他布局中使用它，您可能还需要在布局中使用android:clipChildren="false" 以允许动画传播。

Android 9 中的 ImageView 不是圆形的。它是方形的

【参考方案2】：

另一个具有圆形波纹效果的属性，专门用于操作栏：

android:background="?actionBarItemBackground"

UPD：波纹颜色可以通过这个属性改变：

<!--somewhere in styles-->
<item name="colorControlHighlight">your_color_here</item>

但请记住，此属性适用于所有默认的涟漪效果。

【讨论】：

有什么方法可以自定义吗？比如颜色？也许有一些风格？或者更具体地说是在视图 XML 标记本身中？

我不知道，今天我解决了这个问题，上面的答案没有按我的需要工作。我假设可以在样式中自定义颜色，但绝对不能在视图中。

这正是我正在寻找的正确效果。对了，能不能提一下在哪里可以找到这个属性，好像没有文档记录。

回答 OP 问题。应标记为最佳答案。 +1

@MeysamHadigheh ? 是?attr/ 的快捷方式

【参考方案3】：

创建并设置一个可绘制的波纹作为背景。像这样的东西。

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/grey_15">
    <item android:id="@android:id/mask">
        <shape android:shape="oval">
            <solid android:color="?android:colorPrimary"/>
        </shape>
        <color android:color="@color/white"/>
    </item>
</ripple>

【讨论】：

这是我代码中的内容。你可以使用你的颜色:)

如果默认选择器在棒棒糖之前，我将如何使用它？另外，它使用的颜色是否与拨号器上的颜色相同？

您可以将波纹drawable放在您的drawables-v21文件夹中。并且对于 pre L 使用一个简单的状态drawable。使用相同的文件名并将其放入可绘制（默认）文件夹中。

您也可以创建样式。在 values-v21 文件夹中创建一个新样式并将可绘制的波纹设置为背景。对于pre L，即在您的值文件夹styles.xml中，将相同样式的“selectableItemBackground”属性作为背景。

如果您想要与应用中使用的其他默认波纹效果相同的波纹颜色，请使用“?attr/colorControlHighlight”作为颜色。

【参考方案4】：

只需将此背景添加到您的视图中

android:background=?android:attr/actionBarItemBackground

【讨论】：

不错的答案，我之前没听说过

【参考方案5】：

如果您已经有背景图片，下面是一个看起来接近 selectableItemBackgroundBorderless 的波纹示例：

            <ImageButton
                android:id="@+id/btn_show_filter_dialog"
                android:layout_
                android:layout_
                android:background="@drawable/ic_filter_state"/>

ic_filter_state.xml：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_pressed="true"
        android:state_enabled="true"
        android:drawable="@drawable/state_pressed_ripple"/>
    <item
        android:state_enabled="true"
        android:drawable="@drawable/ic_filter" />
</selector>

state_pressed_ripple.xml：（白色背景上的不透明度设置为 10%）1AFFFFFF

 <?xml version="1.0" encoding="UTF-8"?>    
    <ripple xmlns:android="http://schemas.android.com/apk/res/android">
        <item>
            <shape android:shape="oval">
                <solid android:color="#1AFFFFFF"/>
            </shape>
            <color android:color="#FFF"/>
        </item>
    </ripple>

【讨论】：

如果是图层列表会怎样？

【参考方案6】：

您可以使用 xml 中的android:radius 属性创建可绘制的圆形波纹。

例子：

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="your_color"
    android:radius="your_radius" />

请注意，您的your_radius 应该小于您的视图宽度和高度。 例如：如果您有尺寸为60dp x 60dp 的视图，your_radius 应该靠近30dp（宽度/2 或高度/2）。

在 Android 5.0 及更高版本上工作。

【参考方案7】：

只需将此项目添加到您的活动 xml 中

           <ImageButton
                android:layout_
                android:layout_
                android:background="?android:attr/actionBarItemBackground"
                app:srcCompat="@drawable/ic_arrow_drop_down_black_24dp" />

【讨论】：

似乎与此相同：***.com/a/54440773/878126。

【参考方案8】：

2021 年更新：

你需要使用 actionBarItemBackground 作为背景

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

例子：

 <androidx.appcompat.widget.AppCompatImageButton
        android:layout_
        android:layout_
        android:background="?android:attr/actionBarItemBackground"
        android:src="@drawable/ic_copy" />

【参考方案9】：

如果你想要更通用的 XML 文件，我有两个文件：

1) btn_ripple_background 带代码：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:state_pressed="true"
    android:state_enabled="true"
    android:drawable="@drawable/ripple_circular_shape"/>
</selector>

2) ripple_circuler_shape 带代码：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/btn_state_pressed_text_color"
    android:shape="oval">
    <solid android:color="@color/btn_state_pressed_text_color" />
</shape>

最后的用法：android:foreground="@drawable/ripple_btn_background"

【参考方案10】：

如果你想要不会越过圆圈边界的涟漪效果，你可以检查这个代码。它完全适合我。请记住，您必须在ripple_blue.xml 中提供id=@android:id/mask

<ImageButton
    android:id="@+id/send_password_to_mail_image_view"
    android:layout_
    android:layout_
    android:background="@drawable/ripple_blue"
    android:src="@drawable/ic_filter" />

ripple_blue.xml

<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/colorRipple">

    <item android:id="@android:id/mask">

        <shape android:shape="oval">
            <solid android:color="@color/colorWindowBackground"/>
        </shape>

    </item>

    <item android:id="@android:id/background">

        <shape android:shape="oval">
            <solid android:color="@color/colorWindowBackground"/>
        </shape>

    </item>

</ripple>

color.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <color name="colorWindowBackground">#F2F5FC</color>
    <color name="colorRipple">#0288d1</color>
</resources>

【参考方案11】：

试试：

android:background="@android:color/transparent"
android:clickable="true"
android:focusable="true"
android:foreground="?actionBarItemBackground"

【讨论】：

请不要只发布代码作为答案，而是说明您的代码的作用以及它如何解决问题的问题。带有解释的答案通常质量更高，更有可能吸引投票。

比将 actionBarItemBackground 设置为背景更简单。但仍然与动作栏动画本身并不完全相同。

【参考方案12】：

在 Kotlin / Java 中，您可以执行以下操作

fun View.applyCircularRippleEffect() 
    val backgroundResId = context.getResource(android.R.attr.actionBarItemBackground)

    if (backgroundResId != 0) 
        setBackgroundResource(backgroundResId)
        isClickable = true
        isFocusable = true
    


// getResource extension
fun Context.getResource(resourceId: Int): Int 
    val out = TypedValue()
    theme.resolveAttribute(resourceId, out, true)

    return out.resourceId

【讨论】：

context.getResource 未找到

@RahulMandaliya 感谢您的评论。我的错，这是我的自定义扩展方法。将其添加到答案中

【参考方案13】：

我还在我的一个项目中解决了这个问题。 android:foreground="?attr/selectableItemBackgroundBorderless"负责波纹效果，这就是为什么它设置在前景中，android:clipToPadding="false"会防止波纹效果被切断并使其成为矩形。它将保持您的波纹效果圆形。

<ImageButton
        android:id="@+id/navButton"
        android:layout_
        android:layout_
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="8dp"
        android:foreground="?attr/selectableItemBackgroundBorderless"
        android:clipToPadding="false"
        android:src="@drawable/search_ic_back_arrow"/>

【讨论】：

不确定是否可以将 cmets 放入这种方式，即使这样，您也可能想将每个都放在上面。另外，不使用selectableItemBackgroundBorderless 是否意味着对于我展示的案例（在一个小区域）来说它会很大？无论如何，您如何以这种方式更改波纹的颜色？