在Android按钮中使用图片并添加特效

Question

现在我在StackOverflow上遇到了相关问题，但不幸的是，没有任何解决方案适用于我，这就是为什么我不得不单独提出此问题的原因。

我是一个Android的新手。问题：我需要有一个作为按钮的图像。现在我明白，这可以通过使用标准按钮上的图像或使用称为“ImageButton”的东西来实现（我猜这是高度推荐的，尽管我不知道为什么）。

要求：我需要详细的指导来解决这个问题。具体而言，我认为“将图像放在标准按钮上”更容易，直到我遇到了两个主要问题：我无法将图像设置在中心（感谢drawable-top，bottom，left6，right），一旦我更改了背景颜色以匹配Activity屏幕的背景颜色，按钮效果消失了。简单地说，我需要一种相对容易的方法，让图像充当按钮或带有图像的按钮，具有所有三个效果：聚焦、按下和默认。我使用了ImageButton，但是我不知道如何制作自定义形状或9patch图像，以获得所有所需的效果，我对Android提供的默认按钮非常满意。我只需要像鼠标悬停在图像上时出现的背景之类的东西，指示用户图像已被按下并生成了事件！

请有人能帮助我吗？我需要UI看起来体面，因此需要我的图像/按钮相应的效果。提前致谢 :)

这是我的图标图像：

我希望在这个图像周围有某种悬停效果，表明图像已被按下，就像任何普通按钮一样。

- Darth Coder

---

您可以使用渐变来实现此效果。请参考http://stackoverflow.com/questions/16514221/android-image-button-or-button-highlighted-with-effect-when-pressed。 - Brijesh Thakur

为什么不使用布局，可能是RelativeLayout与图像，将OnClickListener添加到RelativeLayout。您可以编写具有聚焦，按下和默认状态的选择器。看看这个选择器，它很简单https://dev59.com/cWYr5IYBdhLWcg3wAFrE - Milan

谢谢提供的参考资料。我不能使用Android提供的默认状态动画吗？ - Darth Coder

Answer 1

使用ImageButton和StateList Drawable。您需要为不同按钮状态设置选择器。您可以为不同状态分配不同的可绘制图案，以模拟正常按钮上的onFocus或onPressed效果。

这是位于res下的drawable文件夹中的selector.xml文件：

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

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" 
      android:drawable="@color/cyan"/> <!-- pressed state -->
<item android:state_focused="true" 
      android:drawable="@color/cyan"/> <!-- focused state -->
<item android:drawable="@android:color/transparent"/> <!-- default state -->

</selector>

以下是位于res文件夹下values文件夹中的color.xml文件：

<?xml version="1.0" encoding="utf-8"?>
<resources>
        <color name="cyan">#33B5E5</color>
</resources>

将 ImageButton 的 src 设置为您的图像，并将 background 设置为 selector.xml。

这是最终结果：

这里有一个不错的教程：Android ImageButton 选择器示例

- Sam R.

---

除了为三种状态准备三个不同的图像外，我不能使用Android提供的默认动画吗？ - Darth Coder

@DarthCoder，你需要什么类型的动画？可使用Drawable动画。如果您展示一些所需结果的图像，我认为我们可以提供进一步的帮助。 - Sam R.

我想说的是，我喜欢当android按钮被按下时默认的蓝色（JellyBean）颜色效果。并且默认情况下，按钮看起来是深灰色的，但可以使用xml进行更改。当我使用drawable-top添加图像到按钮上，然后将按钮的背景颜色更改为黑色以匹配活动背景时，我失去了按钮按下的效果。此外，我无法使图像位于按钮中心（尽管我可以使用android:gravity ="center"将图像置于ImageButton的中心）。 - Darth Coder

是的，类似的东西！我的意思是那个围绕图像的蓝色框稍微大一点。这可以做到吗？谢谢 :) - Darth Coder

一个问题：我没有drawable文件夹，我有drawable-（其中：hdpi等）。那么我应该在哪里创建和放置selector.xml文件？ - Darth Coder

Answer 2

如果还有人遇到这个问题，我已经创建了选择器，但是将可绘制对象引用到了两个不同的图像文件中，并在imagebutton中使用XML作为源。它非常顺利地工作了。

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/btn_add_pressed"
        android:state_pressed="true" />
    <item android:drawable="@drawable/btn_add"
        android:state_focused="true" />
    <item android:drawable="@drawable/btn_add" />
</selector>

而图像按钮看起来像这样：

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/add_button_selector"
        android:background="@null"/>

- nmirkov

Answer 3

创建XML视图

<ImageView
 android:id="@+id/imageview1"
 android:background="@drawable/selector_xml_name"
 android:layout_width="200dp"
 android:layout_height="126dp"/>

创建一个名为selector_xml_name.xml的文件夹选择器

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">    
<item android:drawable="@drawable/numpad_button_bg_selected"android:state_selected="true"></item>
<item android:drawable="@drawable/numpad_button_bg_pressed" android:state_pressed="true"></item>
<item android:drawable="@drawable/numpad_button_bg_normal"></item>

创建一个名为numpad_button_bg_selected.xml的drawable文件夹

 <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:padding="90dp">
 <solid android:color="@color/selected"/>
 <padding />
 <stroke android:color="#000" android:width="1dp"/>
 <corners android:bottomRightRadius="15dp" android:bottomLeftRadius="15dp" android:topLeftRadius="15dp" android:topRightRadius="15dp"/>

- Kumar