如何在Android中制作带有自定义背景图的按钮并显示点击动画

Question

如何使自定义背景图片的Android按钮在被点击后显示为按下状态（例如向下或发生变化）。 我不想像Google Hello Views示例中所示那样包含更多图像并将不同的图像设置为不同的状态。 谢谢。

- Pritam

---

你的意思是每个状态没有不同的图像吗？你想要一个图像，每次应用程序修改它，比如改变它的颜色？ - Steve Haley

是的，我的意思只是让用户知道按钮被按下了（比如显示它向下，或者像 iPhone 中那样淡化背景）。为什么 Android 没有提供一种不使用额外图像就能完成这样常见任务的方法呢？ - Pritam

我没有听说过Google Views的例子。它在哪里？ - Praveen

我是指来自Android网站开发者资源的内容。 http://developer.android.com/resources/tutorials/views/hello-formstuff.html - Pritam

有人可以使用http://www.mokasocial.com/2010/04/create-a-button-with-an-image-and-text-android/。 - Gaurav Shah

Answer 1

你需要使用两个图像来完成此操作。

1. button_normal（正常按钮）
2. button_pressed（按下按钮）

然后在drawable文件夹中创建一个XML资源。

<?xml version="1.0" encoding="UTF-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_pressed="false"
    android:drawable="@drawable/button_normal" />

<item android:state_pressed="true"
    android:drawable="@drawable/button_pressed" />

</selector>

然后，将此文件设置为ImageView的背景。这里我们使用ImageView作为按钮。别忘了将这两个按钮包含在drawable文件夹中。就这样。

- Praveen

---

感谢您的回复，但正如我已经提到的，这个解决方案需要2个可绘制对象(drawable/button_normal和drawable/button_pressed)，而我希望避免在我的应用程序中为不同的按钮状态使用额外的可绘制对象，因为有很多不同的按钮。我的目的只是给用户一个按下按钮的反馈。是否有任何变通的方法？ - Pritam

Answer 2

使用ColorFilter方法可以只使用一个图像文件完成。但是，ColorFilter希望与ImageViews一起使用而不是Buttons，因此您必须将按钮转换为ImageViews。如果您已经使用图像作为按钮，则这不是问题，但如果您有文本，则更加烦人...无论如何，假设您找到了解决文本问题的方法，这里是要使用的代码：

ImageView button = (ImageView) findViewById(R.id.button);
button.setColorFilter(0xFFFF0000, PorterDuff.Mode.MULTIPLY);

这会在按钮上应用一个红色的覆盖层（颜色代码是完全不透明的红色十六进制代码 - 前两位是透明度，接着是RR GG BB）。

您可以通过从sdkfolder/platforms/(android version/data/res/drawable复制btn_default_normal.9.png文件到您自己的项目中，使您的ImageView看起来像普通按钮。然后，在您的ImageView中使用android:background="@drawable/btn_normal_default"和android:src="..."来设置按钮内部的图像。

- Steve Haley

---

你可以使用以下代码实现这个功能：this.btnLeaderboard.setTextColor(Color.parseColor(#362D26)); - AZ_

Answer 3

您可以创建一个简单的透明黑色图像，并创建一个级别列表 drawable，通过它可以将透明图像放在实际图像上方。这会产生向下推动的效果。您可以进一步将其用作如下所示的 onclick 图像。

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

- Santosh

Answer 4

我想再添加另一种简单的方法来实现这个： 如果你的ImageButton保留了它的背景，并且你没有将其设置为null，它将像普通按钮一样工作，并在点击时显示点击动画，就像其他按钮一样。隐藏背景的方法：

<ImageButton
    android:id="@+id/imageButton2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingBottom="1dp"
    android:paddingLeft="1dp"
    android:paddingRight="1dp"
    android:paddingTop="1dp"
    android:src="@drawable/squareicon" />

填充不会让背景可见，并使按钮像其他按钮一样工作。

- arianoo

Answer 5

如果你想要默认的按钮点击效果，你可以将背景可绘制对象放在一个“涟漪”（ripple）中，如下所示。

这个例子将产生一个带有边框、透明背景和默认按钮点击动画的按钮，就像这样：

创建 res/drawable/image_btn_border.xml。

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?attr/colorControlHighlight">
    <item android:id="@android:id/mask">
        <inset
            android:insetLeft="@dimen/image_btn_insert"
            android:insetTop="@dimen/image_btn_insert"
            android:insetRight="@dimen/image_btn_insert"
            android:insetBottom="@dimen/image_btn_insert">
            <shape android:shape="rectangle">
                <solid android:color="@android:color/background_light" />
                <corners android:radius="@dimen/image_btn_corner_radius" />
            </shape>
        </inset>
    </item>
    <item>
        <inset
            android:insetLeft="@dimen/image_btn_insert"
            android:insetTop="@dimen/image_btn_insert"
            android:insetRight="@dimen/image_btn_insert"
            android:insetBottom="@dimen/image_btn_insert">
            <shape android:shape="rectangle">
                <stroke
                    android:color="?attr/colorButtonNormal"
                    android:width="1dp"/>
                <corners android:radius="@dimen/image_btn_corner_radius" />
            </shape>
        </inset>
    </item>
</ripple>

添加到res/values/dimens.xml

<resources>
    <dimen name="image_btn_corner_radius">4dp</dimen>
    <dimen name="image_btn_insert">5dp</dimen>
</resources>

将可绘制对象设置为ImageButton的背景。

<ImageButton
    android:id="@+id/imageButton"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:background="@drawable/image_btn_border"
    android:contentDescription="@string/action_add_photo"
    app:srcCompat="@android:drawable/ic_menu_camera" />

细节

1. 第一个标记为android:id="@android:id/mask"的item被ripple用于在按钮被按下时从@android:color/background_light过渡到?attr/colorControlHighlight。
2. 第二个item是我们想要的按钮正常（未按下）状态的实际背景。
3. android:inset*设置背景边距。

- yaugenka