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

Posted 2023-02-22

【中文标题】如何使带有自定义背景图像的按钮在Android中显示点击动画

【英文标题】：How to make button with custom background image show click animation in Android

【发布时间】：2011-02-08 17:07:45

【问题描述】：

对于在 android 中使用自定义背景图像的按钮，如何使按钮显示被点击（通过设置它向下/一些更改）。 我不想包含更多图像并将不同的图像设置为不同的状态，如谷歌你好视图示例中所示。 谢谢。

【问题讨论】：

每个州没有不同的图像是什么意思？您是否希望您的应用每次都修改一张图像，例如更改其颜色？

是的，我的意思是让用户知道按钮被按下了（比如向下显示，或者像在 Iphone 中一样使背景昏暗）。为什么android不提供一种不使用额外图像的常见任务的方法？

我没有听说过谷歌视图示例。它在哪里？

我的意思是来自安卓网站developer.android.com/resources/tutorials/views/…987654321@的开发者资源

有人可以使用mokasocial.com/2010/04/…

【参考方案1】：

您必须使用两个图像来执行此操作。

button_normal 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 作为按钮。不要忘记在可绘制文件夹中包含这两个按钮。就是这样。

【讨论】：

感谢您的回复，但正如我已经提到的，此解决方案需要 2 个可绘制对象（drawable/button_normal 和 drawable/button_pressed），我想避免在我的应用程序中为不同的按钮状态提供额外的可绘制对象，因为有许多不同的按钮。我的目的是只给用户按下按钮的反馈。有什么解决办法吗？

【参考方案2】：

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

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

这会将红色覆盖层应用于按钮（颜色代码是完全不透明红色的十六进制代码 - 前两位数字是透明度，然后是 RR GG BB。）。

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

【讨论】：

您可以使用 Text this.btnLeaderboard.setTextColor(Color.parseColor(#362D26));

【参考方案3】：

您可以创建一个简单的透明黑色图像，并创建一个可绘制的级别列表，您可以通过它将透明图像放置在实际图像上。这产生了将其向下推的效果。您可以进一步将其用作 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>

【参考方案4】：

只是想添加另一种简单的方法来做到这一点： 如果您的 ImageButton 保持其背景并且您没有将其设置为 null，它将像普通按钮一样工作，并在单击时显示单击动画，与其他按钮完全一样。隐藏仍然存在的背景的方法：

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

填充不会让背景可见并使按钮的行为与其他按钮一样。

【参考方案5】：

如果您想要默认的按钮点击效果，您可以将您的背景可绘制对象放入如下所示的“波纹”中。

该示例将生成一个带有边框、透明背景和按钮默认单击动画的按钮，如下所示

创建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:/>
                <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>

将drawable设置为图像按钮的背景

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

详情

第一个带有android:id="@android:id/mask" 标记的item 被ripple 用来在按下按钮时将颜色从@android:color/background_light 转换为?attr/colorControlHighlight。 第二个item 是我们希望按钮处于正常（未按下）状态的实际背景。 android:inset* 设置背景边距。