以背景android的形状裁剪imageButton

Question

正如您在图片中看到的，ImageButton 具有“设置图标”的背景，但它被视为一个矩形。我希望它被裁剪成图标的形状，这样涟漪效果只会出现在图标本身上，并且不会在图标边界之外继续（如this tutorial（第四个 Ex），但使用自定义形状）。
（使用elevation 会出现同样的问题，这会使阴影变成矩形，而不是在背景周围）。
我怎样才能实现它？

我的代码：

  <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
  tools:context=".MainActivity">

  <ImageButton
        android:id="@+id/button"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_marginStart="30dp"
        android:layout_marginBottom="30dp"
        android:outlineProvider="background"

        android:background="@drawable/ic_settings_black_24dp"
        android:backgroundTint="#c0c0c0"
        app:layout_constraintBottom_toBottomOf="parent"
        android:foreground="?attr/selectableItemBackground"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

ic_settings_black_24dp.xml（来自 Vector Asset Studio）：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24"

        android:viewportHeight="24">
    <path
        android:fillColor="#fff"
        android:pathData="M19.1,12.9a2.8,2.8 0,0 0,0.1 -0.9,2.8 2.8,0 0,0 -0.1,-0.9l2.1,-1.6a0.7,0.7 0,0 0,0.1 -0.6L19.4,5.5a0.7,0.7 0,0 0,-0.6 -0.2l-2.4,1a6.5,6.5 0,0 0,-1.6 -0.9l-0.4,-2.6a0.5,0.5 0,0 0,-0.5 -0.4H10.1a0.5,0.5 0,0 0,-0.5 0.4L9.3,5.4a5.6,5.6 0,0 0,-1.7 0.9l-2.4,-1a0.4,0.4 0,0 0,-0.5 0.2l-2,3.4c-0.1,0.2 0,0.4 0.2,0.6l2,1.6a2.8,2.8 0,0 0,-0.1 0.9,2.8 2.8,0 0,0 0.1,0.9L2.8,14.5a0.7,0.7 0,0 0,-0.1 0.6l1.9,3.4a0.7,0.7 0,0 0,0.6 0.2l2.4,-1a6.5,6.5 0,0 0,1.6 0.9l0.4,2.6a0.5,0.5 0,0 0,0.5 0.4h3.8a0.5,0.5 0,0 0,0.5 -0.4l0.3,-2.6a5.6,5.6 0,0 0,1.7 -0.9l2.4,1a0.4,0.4 0,0 0,0.5 -0.2l2,-3.4c0.1,-0.2 0,-0.4 -0.2,-0.6ZM12,15.6A3.6,3.6 0,1 1,15.6 12,3.6 3.6,0 0,1 12,15.6Z"/>
</vector>

TIA

Answer 1

您可以将矢量设置为涟漪效应资源中的项目

ic_settings_black_24dp.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path
        android:fillColor="#c0c0c0"
        android:pathData="M19.1,12.9a2.8,2.8 0,0 0,0.1 -0.9,2.8 2.8,0 0,0 -0.1,-0.9l2.1,-1.6a0.7,0.7 0,0 0,0.1 -0.6L19.4,5.5a0.7,0.7 0,0 0,-0.6 -0.2l-2.4,1a6.5,6.5 0,0 0,-1.6 -0.9l-0.4,-2.6a0.5,0.5 0,0 0,-0.5 -0.4H10.1a0.5,0.5 0,0 0,-0.5 0.4L9.3,5.4a5.6,5.6 0,0 0,-1.7 0.9l-2.4,-1a0.4,0.4 0,0 0,-0.5 0.2l-2,3.4c-0.1,0.2 0,0.4 0.2,0.6l2,1.6a2.8,2.8 0,0 0,-0.1 0.9,2.8 2.8,0 0,0 0.1,0.9L2.8,14.5a0.7,0.7 0,0 0,-0.1 0.6l1.9,3.4a0.7,0.7 0,0 0,0.6 0.2l2.4,-1a6.5,6.5 0,0 0,1.6 0.9l0.4,2.6a0.5,0.5 0,0 0,0.5 0.4h3.8a0.5,0.5 0,0 0,0.5 -0.4l0.3,-2.6a5.6,5.6 0,0 0,1.7 -0.9l2.4,1a0.4,0.4 0,0 0,0.5 -0.2l2,-3.4c0.1,-0.2 0,-0.4 -0.2,-0.6ZM12,15.6A3.6,3.6 0,1 1,15.6 12,3.6 3.6,0 0,1 12,15.6Z"/>

</vector>

您可以在此处设置波纹效果颜色
ripple_settings.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#fff000" // set Color of ripple effect
    android:exitFadeDuration="500">
    <item android:drawable="@drawable/ic_settings_black_24dp" />
</ripple>

activity_main.xml

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageButton
        android:id="@+id/button"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_marginStart="30dp"
        android:layout_marginBottom="30dp"
        android:background="@drawable/ic_settings_black_24dp"
        android:foreground="@drawable/ripple_settings"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Answer 2

经过一番尝试，我想我得到了你要求的效果。

首先，我们需要通过在可绘制目录中创建一个新文件来定义自定义波纹效果。我把它命名为ripple_ic_settings：

<?xml version="1.0" encoding="utf-8"?>
<!-- The color here is the color of the ripple effect. I set it to teal to see the effect better. -->
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/teal_700"
    android:exitFadeDuration="@android:integer/config_shortAnimTime">
    <!-- The drawable must be set to your vector icon. In this case the settings icon -->
    <item android:id="@android:id/mask" android:drawable="@drawable/ic_settings_black_24dp">
        <!-- The shape of the ripple effect -->
        <shape android:shape="oval">
            <corners android:radius="3dp"/>
            <solid android:color="@android:color/white"/>
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <!-- Color is set to transparent so we dont see the background -->
            <solid android:color="@android:color/transparent"/>
        </shape>
    </item>
</ripple>

在第一个item 条目中，我们将android:drawable 属性设置为可绘制的矢量图标。您可以将其设置为您喜欢的任何矢量图标，但请记住，您需要为要在应用中使用的每个图标创建此自定义波纹效果。

比我这样修改你的ic_settings_black_24dp.xml：

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"

    android:viewportHeight="24">
    <!-- fillColor is the color that you want for your icon -->
    <path
        android:fillColor="#c0c0c0"
        android:pathData="M19.1,12.9a2.8,2.8 0,0 0,0.1 -0.9,2.8 2.8,0 0,0 -0.1,-0.9l2.1,-1.6a0.7,0.7 0,0 0,0.1 -0.6L19.4,5.5a0.7,0.7 0,0 0,-0.6 -0.2l-2.4,1a6.5,6.5 0,0 0,-1.6 -0.9l-0.4,-2.6a0.5,0.5 0,0 0,-0.5 -0.4H10.1a0.5,0.5 0,0 0,-0.5 0.4L9.3,5.4a5.6,5.6 0,0 0,-1.7 0.9l-2.4,-1a0.4,0.4 0,0 0,-0.5 0.2l-2,3.4c-0.1,0.2 0,0.4 0.2,0.6l2,1.6a2.8,2.8 0,0 0,-0.1 0.9,2.8 2.8,0 0,0 0.1,0.9L2.8,14.5a0.7,0.7 0,0 0,-0.1 0.6l1.9,3.4a0.7,0.7 0,0 0,0.6 0.2l2.4,-1a6.5,6.5 0,0 0,1.6 0.9l0.4,2.6a0.5,0.5 0,0 0,0.5 0.4h3.8a0.5,0.5 0,0 0,0.5 -0.4l0.3,-2.6a5.6,5.6 0,0 0,1.7 -0.9l2.4,1a0.4,0.4 0,0 0,0.5 -0.2l2,-3.4c0.1,-0.2 0,-0.4 -0.2,-0.6ZM12,15.6A3.6,3.6 0,1 1,15.6 12,3.6 3.6,0 0,1 12,15.6Z"/>

</vector>

我只是将path 上的fillColor 属性更改为您在ImageButton 中设置backgroundTint 的颜色。

最后我将您布局中的ImageButton 更改为以下内容：

<ImageButton
        android:id="@+id/button"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_marginStart="30dp"
        android:layout_marginBottom="30dp"
        android:background="@drawable/ic_settings_black_24dp"
        android:foreground="@drawable/ripple_ic_settings"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

这里重要的是您将android:background 设置为您的图标（在本例中为@drawable/ic_settings_black_24dp）并将android:foreground 设置为自定义波纹效果（@drawable/ripple_ic_settings）。

Answer 3

您可以自定义按钮，在 drawables 文件夹中创建选择器。我的叫button.xml

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

您显然必须通过简单地更改设置按钮的颜色或透明度来创建按钮的不同实例，即您必须创建button_disabled.xml、button_pressed.xml 和button_enabled.xml。然后您可以将 button.xml 传递给您的 imageButton 背景属性

android:background="@drawable/button"

它应该可以工作。

然后有 lazy 选项 ;) 如果你真的喜欢按钮的背景阴影动画，但只是被它投射到的丑陋方块惹恼了，我建议你试试下面的代码你的按钮：

 <ImageButton
        android:id="@+id/button"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_marginStart="30dp"
        android:layout_marginBottom="30dp"
        android:src="@drawable/ic_settings_black_24dp"  //<---THIS IS KEY
        android:background="?attr/selectableItemBackgroundBorderless" //<-- THIS IS KEY
        android:backgroundTint="#c0c0c0"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent" />