Android：在 Button 或 ImageButton 上组合文本和图像

Question

我正在尝试在按钮上放置一个图像（作为背景）并根据运行时发生的情况动态添加图像上方/上方的一些文本。

如果我使用ImageButton我什至无法添加文本。 如果我使用Button我可以添加文本，但只能使用android:drawableBottom和此处定义的类似 XML 属性定义图像。

然而，这些属性仅在 x 和 y 维度中组合文本和图像，这意味着我可以在我的文本周围绘制图像，但不能在我的文本下方/下方（z 轴定义为从显示中出来）。

关于如何做到这一点的任何建议？ 一种想法是扩展Button或ImageButton并覆盖draw()方法。 但是以我目前的知识水平，我真的不知道如何做到这一点（2D 渲染）。 也许有更多经验的人知道解决方案或至少有一些开始的指示？

Answer 1

对于谁只想把背景，图标，图像和文本在一个用户Button从不同的文件：设置一个Button的背景下，drawableTop /下/分辩/左和填充属性。

<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

Answer 2

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

只需要一个普通的Button并使用drawableLeft和gravity属性。

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

通过这种方式，您将获得一个按钮，该按钮在按钮的左侧显示一个图标，在图标的右侧位置显示垂直居中的文本。

Answer 3

您可以在Button上调用setBackground()来设置Button的背景。

任何文本都会出现在背景上方。

如果您正在 xml 中寻找类似的东西，则有： android:background属性，其工作方式相同。

Answer 4

     <Button
            android:layout_width="0dp"
            android:layout_weight="1"
            android:background="@drawable/home_button"
            android:drawableLeft="@android:drawable/ic_menu_edit"
            android:drawablePadding="6dp"
            android:gravity="left|center"
            android:height="60dp"
            android:padding="6dp"
            android:text="AndroidDhina"
            android:textColor="#000"
            android:textStyle="bold" />

Answer 5

只需使用 LinearLayout 并假装它是一个Button - 设置background和可点击是关键：

<LinearLayout
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@android:drawable/btn_default"
    android:clickable="true"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="5dp"
        android:src="@drawable/image" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_margin="5dp"
        android:text="Do stuff" />
</LinearLayout>

Answer 6

只需更换

android:background="@drawable/icon"

和

android:background="@android:color/transparent"
android:drawableTop="@drawable/[your background image here]"

izz 一个不错的技巧.. ;)

Answer 7

我采用了与此处所述方法不同的方法，并且效果很好，所以我想分享它。

我正在使用样式创建一个自定义按钮，左侧为图像，右侧为文本。 只需按照下面的 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/ 文件夹中。

二、 在您的项目中的 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" />

三、 转到 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 样式中的 drawableLeft 更改为 drawableRight、drawableTop 或 drawableBottom，您可以将图标放置在相对于文本的其他位置。

四、 转到您拥有 UI 的 XML 的 layout/ 文件夹，然后转到要应用样式的 Button 并使其看起来像这样：

<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 指南。

您还可以为您的应用程序创建一个主题并向其添加“父样式”，以便所有按钮看起来都相同，并仅在需要的地方应用带有图标的“子样式”。

Answer 8

重要更新

不要将普通的android:drawableLeft等...与矢量可绘制对象一起使用，否则它会在较低的 API 版本中崩溃。 （我在实时应用中遇到过）

对于矢量可绘制

如果您使用矢量可绘制，那么您必须

• 您迁移到 AndroidX 了吗？ 如果不是，您必须先迁移到 AndroidX。 很简单，看看什么是androidx，如何迁移？

• 它是在1.1.0-alpha01版本中发布的，所以 appcompat 版本应该至少是1.1.0-alpha01 。 当前最新版本是1.1.0-alpha02 ，使用最新版本以获得更好的可靠性，请参阅发行说明 - 链接。

  implementation 'androidx.appcompat:appcompat:1.1.0-alpha02'

• 使用AppCompatTextView / AppCompatButton / AppCompatEditText

• 使用app:drawableLeftCompat 、 app:drawableTopCompat 、 app:drawableRightCompat 、 app:drawableBottomCompat 、 app:drawableStartCompat和app:drawableEndCompat

对于常规可绘制

如果您不需要矢量可绘制，那么您可以

• 使用android:drawableLeft , android:drawableRight , android:drawableBottom , android:drawableTop
• 您可以使用常规TextView 、 Button & EditText或AppCompat类。

您可以实现如下输出-

Answer 9

 <Button android:id="@+id/imeageTextBtn" 
        android:layout_width="240dip"
        android:layout_height="wrap_content"
        android:text="Side Icon With Text Button"
        android:textSize="20sp"
        android:drawableLeft="@drawable/left_side_icon"         
        />   

Answer 10

您可以对图像使用drawableTop （也drawableLeft等），并通过添加gravity left|center_vertical在图像下方设置文本

<Button
            android:id="@+id/btn_video"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:background="@null"
            android:drawableTop="@drawable/videos"
            android:gravity="left|center_vertical"
            android:onClick="onClickFragment"
            android:text="Videos"
            android:textColor="@color/white" />

Answer 11

可能我的解决方案适合很多用户，我希望如此。

我的建议是使 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" />

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

Answer 12

<Button
     android:id="@+id/groups_button_bg"
     android:layout_height="wrap_content"
     android:layout_width="wrap_content"
     android:text="Groups"
     android:drawableTop="@drawable/[image]" />


android:drawableLeft
android:drawableRight
android:drawableBottom
android:drawableTop

http://www.mokasocial.com/2010/04/create-a-button-with-an-image-and-text-android/

Answer 13

这段代码非常适合我

<LinearLayout
    android:id="@+id/choosePhotosView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:gravity="center"
    android:clickable="true"
    android:background="@drawable/transparent_button_bg_rev_selector">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/choose_photo"/>

     <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@android:color/white"
        android:text="@string/choose_photos_tv"/>

</LinearLayout>

Answer 14

MaterialButton支持设置图标并将其与文本对齐：

<com.google.android.material.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="My button"
        app:icon="@drawable/your_icon"
        app:iconGravity="textStart"
        />

app:iconGravity也可以是start / end如果你想将图标对齐到按钮而不是其中的文本。

Answer 15

<Button android:id="@+id/myButton" 
    android:layout_width="150dp"
    android:layout_height="wrap_content"
    android:text="Image Button"
    android:drawableTop="@drawable/myimage"         
    />  

或者您可以以编程方式：

Drawable drawable = getResources.getDrawable(R.drawable.myimage);
drawable.setBounds(0, 0, 60, 60);
myButton.setCompoundDrawables(null, drawable, null, null);//to the Top of the Button

Answer 16

你可以使用这个：

  <Button
                    android:id="@+id/reset_all"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="5dp"
                    android:layout_weight="1"
                    android:background="@drawable/btn_med"
                    android:text="Reset all"
                    android:textColor="#ffffff" />

                <Button
                    android:id="@+id/undo"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="5dp"
                    android:layout_weight="1"
                    android:background="@drawable/btn_med"
                    android:text="Undo"
                    android:textColor="#ffffff" />

因为我已经将图像作为background并添加了文本..！

Answer 17

制作一个假按钮。

这真的是唯一的办法

  <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>

Answer 18

要结合Button和drawableTop并仍然获得点击响应，您可以使用按钮样式@style/Widget.AppCompat.Button.Borderless使其透明。

<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" />

Answer 19

    <ImageView
        android:id="@+id/iv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/temp"
        />