如何在ImageButton选中时叠加另一张带透明区域的图片？

这需求很常见，完全可以通过Android原生的Drawable系统实现，不用写复杂的自定义View，给你最直接的XML+少量代码方案：

步骤1：创建层叠图标（LayerList） #

首先我们需要一个能同时显示原始图标和透明矩形的Drawable，用layer-list就能实现图层叠加。在res/drawable目录下新建ic_1_selected.xml：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 底层放你的原始按钮图标 -->
    <item android:drawable="@drawable/ic_1" />
    <!-- 上层放透明矩形图标，因为是透明的，会自动叠加在原始图标上 -->
    <item android:drawable="@drawable/your_rectangle_drawable" />
</layer-list>

注意：layer-list的顺序是从下到上，所以原始图标要放在前面，矩形图标在后面才能显示在上方。

步骤2：创建状态选择器（Selector） #

接下来我们需要一个能根据按钮状态切换图标的Drawable，新建res/drawable/button_selector.xml：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 按钮处于选中状态时，显示层叠后的图标 -->
    <item android:state_selected="true" android:drawable="@drawable/ic_1_selected" />
    <!-- 默认未选中状态，显示原始图标 -->
    <item android:drawable="@drawable/ic_1" />
</selector>

如果需要添加点击按下时的反馈，还可以加一个android:state_pressed="true"的item，比如也用层叠图标或者其他高亮效果。

步骤3：修改ImageButton的XML配置 #

把原来的ImageButton的android:src换成我们刚创建的状态选择器，同时确保按钮能响应选中状态（需要开启clickable和focusable）：

<ImageButton
    android:id="@+id/buttonNormal"
    android:background="@android:color/transparent"
    android:onClick="normal"
    android:src="@drawable/button_selector"
    android:clickable="true"
    android:focusable="true"
    tools:clickable="true" />

步骤4：在点击事件中切换选中状态 #

最后在你的Activity/Fragment里处理点击事件，切换按钮的选中状态：

Java代码： #

public void normal(View view) {
    // 切换选中状态，点击一次选中，再点击取消
    view.setSelected(!view.isSelected());
}

Kotlin代码： #

fun normal(view: View) {
    view.isSelected = !view.isSelected
}

这样就完成了！当按钮被选中时，透明矩形会自动叠加在原始图标上，取消选中就回到原始状态。记得确保你的矩形图标是PNG格式的透明图片，这样才能正常显示底层的原始图标哦。

内容的提问来源于stack exchange，提问作者Florian