单击按钮时如何在按钮上制作圆形波纹？
How to make a circular ripple on a button when it's being clicked?
背景
在 Android 的拨号器应用程序中，当您开始搜索某些内容并单击 EditText 左侧的箭头按钮时，您会在其上获得圆形波纹效果：
问题
我也试过，但是我得到了一个长方形的：
<ImageButton
android:id="@+id/navButton"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="center_vertical"
android:layout_marginLeft="8dp"
android:background="?android:attr/selectableItemBackground"
android:src="@drawable/search_ic_back_arrow"/>
问题
如何让按钮在点击时出现圆形波纹效果？我是否必须创建一个新的可绘制对象，或者是否有内置的方法？
创建一个波纹可绘制对象并将其设置为背景。像这样的东西。
<?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>
如果您使用的是 AppCompat 主题，那么您可以将视图的背景设置为：
android:background="?selectableItemBackgroundBorderless"
这将在 21 及以上添加圆形波纹，在 21 以下添加方形背景。
您可以使用 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）。
Work on Android 5.0 and above.
又一个带有圆形波纹效果的属性，专用于动作条：
android:background="?actionBarItemBackground"
UPD: 波纹颜色可以通过这个属性改变:
<!--somewhere in styles-->
<item name="colorControlHighlight">your_color_here</item>
但请记住，此属性适用于所有默认连锁反应。
如果您已经有背景图片，这里有一个看起来接近 selectableItemBackgroundBorderless 的波纹示例：
<ImageButton
android:id="@+id/btn_show_filter_dialog"
android:layout_width="24dp"
android:layout_height="24dp"
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>
如果您想要更通用的 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"
只需将此背景添加到您的视图中
android:background=?android:attr/actionBarItemBackground
尝试：
android:background="@android:color/transparent"
android:clickable="true"
android:focusable="true"
android:foreground="?actionBarItemBackground"
只需将此项添加到您的 activity xml
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="?android:attr/actionBarItemBackground"
app:srcCompat="@drawable/ic_arrow_drop_down_black_24dp" />
如果你想要不跨越圆圈边界的波纹效果，你可以查看这个代码。它对我很有用。请记住，您必须在 ripple_blue.xml
中提供 id=@android:id/mask
<ImageButton
android:id="@+id/send_password_to_mail_image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
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>
在 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
}
我也在我的一个项目中解决了这个问题。 android:foreground="?attr/selectableItemBackgroundBorderless" 负责涟漪效应，这就是为什么将其设置在前台的原因，android:clipToPadding="false" 将防止涟漪效应被切断并使其成为 rectangular.It 将使你的涟漪效应保持循环。
<ImageButton
android:id="@+id/navButton"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="center_vertical"
android:layout_marginLeft="8dp"
android:foreground="?attr/selectableItemBackgroundBorderless"
android:clipToPadding="false"
android:src="@drawable/search_ic_back_arrow"/>
2021 年更新：
您需要为 background
使用 actionBarItemBackground
android:background="?android:attr/actionBarItemBackground"
示例：
<androidx.appcompat.widget.AppCompatImageButton
android:layout_width="56dp"
android:layout_height="56dp"
android:background="?android:attr/actionBarItemBackground"
android:src="@drawable/ic_copy" />
背景
在 Android 的拨号器应用程序中，当您开始搜索某些内容并单击 EditText 左侧的箭头按钮时，您会在其上获得圆形波纹效果：
问题
我也试过，但是我得到了一个长方形的：
<ImageButton
android:id="@+id/navButton"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="center_vertical"
android:layout_marginLeft="8dp"
android:background="?android:attr/selectableItemBackground"
android:src="@drawable/search_ic_back_arrow"/>
问题
如何让按钮在点击时出现圆形波纹效果？我是否必须创建一个新的可绘制对象，或者是否有内置的方法？
创建一个波纹可绘制对象并将其设置为背景。像这样的东西。
<?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>
如果您使用的是 AppCompat 主题，那么您可以将视图的背景设置为：
android:background="?selectableItemBackgroundBorderless"
这将在 21 及以上添加圆形波纹，在 21 以下添加方形背景。
您可以使用 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）。
Work on Android 5.0 and above.
又一个带有圆形波纹效果的属性，专用于动作条：
android:background="?actionBarItemBackground"
UPD: 波纹颜色可以通过这个属性改变:
<!--somewhere in styles-->
<item name="colorControlHighlight">your_color_here</item>
但请记住，此属性适用于所有默认连锁反应。
如果您已经有背景图片，这里有一个看起来接近 selectableItemBackgroundBorderless 的波纹示例：
<ImageButton
android:id="@+id/btn_show_filter_dialog"
android:layout_width="24dp"
android:layout_height="24dp"
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>
如果您想要更通用的 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"
只需将此背景添加到您的视图中
android:background=?android:attr/actionBarItemBackground
尝试：
android:background="@android:color/transparent"
android:clickable="true"
android:focusable="true"
android:foreground="?actionBarItemBackground"
只需将此项添加到您的 activity xml
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="?android:attr/actionBarItemBackground"
app:srcCompat="@drawable/ic_arrow_drop_down_black_24dp" />
如果你想要不跨越圆圈边界的波纹效果，你可以查看这个代码。它对我很有用。请记住，您必须在 ripple_blue.xml
中提供 id=@android:id/mask<ImageButton
android:id="@+id/send_password_to_mail_image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
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>
在 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
}
我也在我的一个项目中解决了这个问题。 android:foreground="?attr/selectableItemBackgroundBorderless" 负责涟漪效应，这就是为什么将其设置在前台的原因，android:clipToPadding="false" 将防止涟漪效应被切断并使其成为 rectangular.It 将使你的涟漪效应保持循环。
<ImageButton
android:id="@+id/navButton"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="center_vertical"
android:layout_marginLeft="8dp"
android:foreground="?attr/selectableItemBackgroundBorderless"
android:clipToPadding="false"
android:src="@drawable/search_ic_back_arrow"/>
2021 年更新：
您需要为 background
使用 actionBarItemBackgroundandroid:background="?android:attr/actionBarItemBackground"
示例：
<androidx.appcompat.widget.AppCompatImageButton
android:layout_width="56dp"
android:layout_height="56dp"
android:background="?android:attr/actionBarItemBackground"
android:src="@drawable/ic_copy" />