我试图在一个按钮上有一个图像(作为背景),并动态添加,这取决于在运行时发生的事情,一些文字上方/上方的图像。

如果我使用ImageButton,我甚至没有添加文本的可能性。 如果我使用按钮,我可以添加文本,但只定义一个图像与android:drawableBottom和类似的XML属性定义在这里。

然而,这些属性只在x和y维度上组合文本和图像,这意味着我可以在文本周围绘制图像,但不能在文本下面/下面绘制图像(z轴定义为显示出来)。

有什么建议吗?一种想法是扩展Button或ImageButton并重写draw()方法。但以我目前的知识水平,我真的不知道如何做到这一点(2D渲染)。也许有更有经验的人知道一个解决方案,或者至少有一些开始的建议?


当前回答

要结合Button和drawableTop并仍然得到点击响应,你可以使用按钮样式@style/Widget.AppCompat.Button。无边界,使其透明。

<Button
    android:id="@+id/settings"
    style="@style/Widget.AppCompat.Button.Borderless"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:drawableTop="@drawable/ic_baseline_settings_24"
    android:drawableTint="?attr/colorPrimary"
    android:text="@string/settings"
    android:textColor="?attr/colorPrimary" />

其他回答

对于那些只是想把背景,图标图像和文本放在一个按钮从不同的文件:设置一个按钮背景,drawableTop/Bottom/ right /Left和填充属性。

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/home_btn_test"
        android:drawableTop="@drawable/home_icon_test"
        android:textColor="#FFFFFF"
        android:id="@+id/ButtonTest"
        android:paddingTop="32sp"
        android:drawablePadding="-15sp"
        android:text="this is text"></Button>

对于更复杂的布局,你也可以使用RelativeLayout(或任何其他布局),并使其可点击。

教程:涵盖这两种情况的优秀教程:http://izvornikod.com/Blog/tabid/82/EntryId/8/Creating-Android-button-with-image-and-text-using-relative-layout.aspx

这个问题有一个更好的解决方案。

只需要一个普通的按钮,使用drawablleft和重力属性。

<Button
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:drawableLeft="@drawable/my_btn_icon"
  android:gravity="left|center_vertical" />

通过这种方式,您可以得到一个按钮,它在按钮的左侧显示一个图标,而文本在图标的右侧垂直居中。

也许我的解决方案适合很多用户,我希望如此。

我的建议是用你的风格制作TextView。它非常适合我,而且功能齐全,比如按钮。

首先让我们制作按钮样式,你可以在任何地方使用…我正在创建button_with_hover.xml

    <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape android:shape="rectangle"  >
            <corners android:radius="3dip" />
            <stroke android:width="1dip" android:color="#8dbab3" />
            <gradient android:angle="-90" android:startColor="#48608F" android:endColor="#48608F"  />
        </shape>

        <!--#284682;-->
        <!--border-color: #223b6f;-->
    </item>
    <item android:state_focused="true">
        <shape android:shape="rectangle"  >
            <corners android:radius="3dip" />
            <stroke android:width="1dip" android:color="#284682" />
            <solid android:color="#284682"/>
        </shape>
    </item>
    <item >
        <shape android:shape="rectangle"  >
            <corners android:radius="3dip" />
            <stroke android:width="1dip" android:color="@color/ControlColors" />
            <gradient android:angle="-90" android:startColor="@color/ControlColors" android:endColor="@color/ControlColors" />
        </shape>
    </item>

</selector>

其次, 让我们创建一个textview按钮。

    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="20dip"
    android:layout_gravity="right|bottom"
    android:gravity="center"
    android:padding="12dip"
    android:background="@drawable/button_with_hover"
    android:clickable="true"
    android:drawableLeft="@android:drawable/btn_star_big_off"
    android:textColor="#ffffffff"
    android:text="Golden Gate" />

这就是结果。然后用任何颜色或任何其他属性和边距设置自定义按钮的样式。祝你好运

制作一个假按钮。

这是唯一的办法

  <FrameLayout
        android:id="@+id/fake_button"

        android:layout_width=" .. "
        android:layout_height=" .. "

        android:background="@android:color/transparent"

        android:clickable="true"
        android:onClick="tappedNext">

        <ImageView
            android:id="@+id/fake_image"
            android:layout_width="match_parent"
            android:layout_height="match_parent"

            android:src="@drawable/your_amazing_drawable" />

        <TextView
            android:id="@+id/fake_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"

            android:text="Next"
            android:fontFamily="@font/ .. "
            android:textColor="@color/ .. "
            android:textSize=" .. " />
    </FrameLayout>

我采取了一种不同于这里所述的方法,它真的很有效,所以我想分享它。

我正在使用样式创建一个自定义按钮,图像在左边,文本在中右。只需遵循以下4个“简单步骤”:

I.使用至少3个不同的PNG文件和工具创建9个补丁:/YOUR_OWN_PATH/android-sdk-mac_x86/tools/./draw9patch。在这之后,你应该:

Button_normal.9.png, button_focused.9.png和button_pressed.9.png

然后下载或创建一个24x24的PNG图标。

ic_your_icon.png

保存在你的Android项目的drawable/文件夹中。

2在项目的drawable/文件夹下创建一个名为button_selector.xml的XML文件。状态应该是这样的:

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

3转到values/文件夹,打开或创建styles.xml文件,并创建以下XML代码:

<style name="ButtonNormalText" parent="@android:style/Widget.Button">
    <item name="android:textColor" >@color/black</item>
    <item name="android:textSize" >12dip</item>
    <item name="android:textStyle" >bold</item>
    <item name="android:height" >44dip</item>
    <item name="android:background" >@drawable/button_selector</item>
    <item name="android:focusable" >true</item>
    <item name="android:clickable" >true</item>
</style>

<style name="ButtonNormalTextWithIcon" parent="ButtonNormalText">
    <item name="android:drawableLeft" >@drawable/ic_your_icon</item>
</style>

ButtonNormalTextWithIcon是一个“子样式”,因为它扩展了ButtonNormalText(“父样式”)。

注意,将ButtonNormalTextWithIcon样式中的drawablleft更改为drawableRight, drawableTop或drawableBottom,您可以将图标放在相对于文本的其他位置。

IV.转到你有UI XML的布局/文件夹,然后转到你想应用样式的按钮,让它看起来像这样:

<Button android:id="@+id/buttonSubmit" 
android:text="@string/button_submit" 
android:layout_width="fill_parent" 
android:layout_height="wrap_content" 
style="@style/ButtonNormalTextWithIcon" ></Button>

和…瞧!你的按钮在左边有一个图像。

对我来说,这是更好的方法!因为这样做,你可以管理按钮的文本大小与你想要显示的图标分开,并使用相同的背景绘制几个按钮与不同的图标,尊重Android UI指南使用风格。

你也可以为你的应用程序创建一个主题,并添加“父样式”,这样所有的按钮看起来都是一样的,并只在你需要的地方应用“子样式”的图标。