在按钮上结合背景图像、背景可绘制样式答案

【问题标题】：combine both background image, background drawable style on a button在按钮上结合背景图像、背景可绘制样式
【发布时间】：2012-11-26 21:01:45
【问题描述】：

我想知道是否可以将按钮上的图像和使用可绘制源以及上面的文本结合起来？

我目前在 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 的建议后，我现在在可绘制对象中拥有 "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" />

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

【问题讨论】：

Button 有一个 TextView，您可以为 textview 设置CompoundDrawables。因此，您可以将DrawableLeft/Right/Bottom/Top 设置为textview。

标签： android android-layout layout

【解决方案1】：

我想知道是否可以将两者结合起来按钮并使用可绘制源并在其上方放置文本？

是的，这是可能的。您的选择器将变为：

<?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 可绘制对象，第一个项目是来自初始选择器的项目，第二个是包装为位图drawbale 的.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 类并自己做。

【讨论】：

感谢您到目前为止的帮助。虽然不太好用，箭头只在我按下按钮时显示，尽管代码与上面的代码完全相同，但我一定做错了什么？ =)
@anders 也许我的回答不是那么清楚，我的想法是将位图可绘制在layer-list 中。检查我编辑的答案。

【解决方案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" />

【讨论】：