将背景图片和背景可绘制样式同时应用于一个按钮

Question

我想知道是否可以将按钮上的图像和使用可绘制源以及放置在其上方的文本相结合？

目前我正在使用 drawable/red_btn.xml 作为我的按钮样式。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape>
            <solid
                android:color="#ef4444" />
            <stroke
                android:width="1dp"
                android:color="#992f2f" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:startColor="#ef4444"
                android:endColor="#992f2f"
                android:angle="270" />
            <stroke
                android:width="1dp"
                android:color="#992f2f" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
</selector>

然后是我的按钮。

            <Button
                android:id="@+id/testButton"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Income"
                android:textSize="15dip"
                android:background="@drawable/red_btn"
    android:textColor="#fff"
     android:textStyle="bold" />

这是它的样子

现在我想要在这个按钮的右上方添加另一个.png图像（arrow.png），像这样

这是否可能？如果可以，我该如何做？

提前感谢。

__________________________________________________________________________________________________________________________________________

编辑

按照Luksprog的建议后，现在我在drawable中有"red_btn_normal.xml"

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape>
            <solid
                android:color="#ef4444" />
            <stroke
                android:width="1dp"
                android:color="#992f2f" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:startColor="#ef4444"
                android:endColor="#992f2f"
                android:angle="270" />
            <stroke
                android:width="1dp"
                android:color="#992f2f" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>

</selector>

并且 red_btn_pressed.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:state_pressed="true">
        <shape>
            <solid android:color="#ef4444" />

            <stroke
                android:width="1dp"
                android:color="#992f2f" />

            <corners android:radius="3dp" />

            <padding
                android:bottom="10dp"
                android:left="10dp"
                android:right="10dp"
                android:top="10dp" />
        </shape>
    </item>
    <item>
        <bitmap
            android:gravity="right"
            android:src="@drawable/arrow" />
    </item>


</layer-list>

然后我像这样创建了我的按钮，名为“red_btn.xml”。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

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

</selector>

最后，我的按钮。

    <Button
                android:id="@+id/testButton"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Income"
                android:textSize="15dip"
                android:background="@drawable/red_btn"

    android:textColor="#fff"
     android:textStyle="bold" />

问题是当我点击按钮时，它只显示白色箭头，而在未被按下时则不显示。代码有什么问题？=）

- anders

---

按钮有一个TextView，您可以为TextView设置setCompoundDrawables。因此，您可以将DrawableLeft / Right / Bottom / Top设置为TextView。 - Lalith B

Answer 1

我想知道是否可能在按钮上同时使用图片和文字？

是的，这是可能的。你的selector会变成：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

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

</selector>

其中这两个可绘制对象分别是两个layer-list可绘制对象，第一项是来自您的初始选择器的项目，第二项是将.png图像作为位图可绘制对象包装的图像。例如，对于red_btn_pressed.xml，您将拥有：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item>
        <shape>
            <solid android:color="#ef4444" />

            <stroke
                android:width="1dp"
                android:color="#992f2f" />

            <corners android:radius="3dp" />

            <padding
                android:bottom="10dp"
                android:left="10dp"
                android:right="10dp"
                android:top="10dp" />
        </shape>
    </item>
    <item>
        <bitmap
            android:gravity="right"
            android:src="@drawable/arrow" />
    </item>


</layer-list>

而 red_btn_normal.xml 将会是：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item>
        <shape>
            <gradient
                android:angle="270"
                android:endColor="#992f2f"
                android:startColor="#ef4444" />

            <stroke
                android:width="1dp"
                android:color="#992f2f" />

            <corners android:radius="3dp" />

            <padding
                android:bottom="10dp"
                android:left="10dp"
                android:right="10dp"
                android:top="10dp" />
        </shape>
    </item>
    <item>
        <bitmap android:src="@drawable/allowed" android:gravity="right"/>
    </item>

</layer-list>

请记住，箭头图像仅在Button的大小允许的情况下（因为它是Button的背景的一部分），才会在文本的右侧出现。如果您试图在Button的文本和箭头图像之间创建某种定位关系，则需要扩展Button类并自己实现。

- user

---

感谢迄今为止的帮助。不过似乎并没有完全奏效，箭头只有在我按下按钮时才会显示，尽管我已经按照您上面的代码精确地编写了它，我一定是做错了什么？=) - anders

@anders 或许我的回答不是很清晰，我的想法是将位图可绘制对象放置在两个“layer-list”中。请查看我编辑过的答案。 - user

Answer 2

我选择了简单的方案。

<Button
                android:id="@+id/testButton"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Income"
                android:textSize="15dip"
                android:background="@drawable/red_btn"
android:drawableRight="@drawable/arrow"
    android:textColor="#fff"
     android:textStyle="bold" />

- anders