实现工具栏菜单项单击涟漪效果

Question

我尝试用来padding增加按钮的触摸区域.我用

<ImageButton
    android:paddingRight="32dp"
    android:paddingEnd="32dp"
    android:id="@+id/confirm_image_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentEnd="true"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"
    android:background="?selectableItemBackgroundBorderless"
    android:src="?attr/confirmIcon" />

点击区域是放大的.但是,selectableItemBackgroundBorderless点击效果不再显示为完美的圆圈.

---

我尝试用duplicateParentState技术来克服.

<FrameLayout
    android:clickable="true"
    android:paddingRight="32dp"
    android:paddingEnd="32dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentEnd="true"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true">
    <ImageButton
        android:duplicateParentState="true"
        android:id="@+id/confirm_image_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="?selectableItemBackgroundBorderless"
        android:src="?attr/confirmIcon" />
</FrameLayout>

现在,

1. 点击区域被放大.
2. 该selectableItemBackgroundBorderless圆的效果是一个完美的圆.

但是,它似乎有一些奇怪的行为.单击实际区域时ImageButton,不显示圆按效果.

我可以知道为什么会这样,我怎么能克服它？我使用API​​ 26进行了测试.

注意,我试图避免使用TouchDelegate技术,除非我被迫,因为它使我们的代码更复杂.

---

附加信息

以下是按钮显示的正确行为Toolbar.

当点击区域位于按钮外时,会显示波纹效果

当点击区域在按钮内时,会显示波纹效果

但是,我不知道他们是如何实现这种行为的.

Answer 1

花了一些时间后,我终于找到了"工具栏神秘"的工作方式.它ActionMenuItemView就是显示在工具栏上.你可以看到,它已经应用于它的xml文件中style="?attr/actionButtonStyle".?attr/actionButtonStyle对应Widget.Material.ActionButton于我们可以看到的这种风格<item name="background">?attr/actionBarItemBackground</item>.

如果您想对您的相同效果应用ImageButton,那么您所要做的就是申请android:background="?attr/actionBarItemBackground"它.因此,具有以下xml布局:

<ImageButton
    android:id="@+id/confirm_image_button"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:background="?attr/actionBarItemBackground"
    android:src="@drawable/ic_check_black_24dp" />

你会收到这个输出:

^{打开"显示布局界限",这样的实际边界ImageButton可见}

如果你很好奇?attr/actionBarItemBackground实际代表什么,这就是它:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?attr/colorControlHighlight"
    android:radius="20dp" />

因此,您可以创建drawable并将其作为背景应用ImageButton.