Android:结合文本&图像在一个按钮或ImageButton

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

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

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

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

616170 次浏览
小开
最佳答案

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

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

如果你正在寻找类似的xml有:

. android:background属性
小开

为用户谁只是想把背景，图标图像和文本在一个 Button来自不同的文件:设置在Button背景，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

小开

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

只需要一个普通的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" />

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

小开

只是替换

android:background="@drawable/icon"

与

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

伊茨的把戏很不错。；）

小开

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

我正在使用样式创建一个自定义按钮，图像在左边，文本在中右。只需遵循以下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指南使用风格。

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

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

只需使用线性布局，并假装它是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>
小开 
<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/

小开

你可以用这个:

  <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，还添加了文本..!

小开

您可以使用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" />
小开

这段代码非常适合我

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

enter image description here

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

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

我的建议是用你的风格制作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>
< p >其次, 让我们创建一个textview按钮。< / p > 
    <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" />

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

enter image description here

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

重要更新

不要使用正常的android:drawableLeft等…用矢量绘图，否则 将崩溃放入低API版本。(我在live app中遇到过)

对于可绘制的向量

如果你使用矢量绘图，那么你必须

  • 你迁移到AndroidX了吗?如果不是，你必须先迁移到AndroidX。它非常简单，参见什么是androidx，如何迁移?
  • 它是在1.1.0-alpha01版本发布的，所以appcompat版本应该至少是1.1.0-alpha01。当前的最新版本是1.1.0-alpha02，为了更好的可靠性，请使用最新版本，参见发布说明- 链接。

    # EYZ0

    李< /引用> < / >

  • 使用# EYZ0 / # EYZ1 / # EYZ2

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

对于常规绘图

如果你不需要画向量，那么你可以

  • 使用android:drawableLeft， android:drawableRight， android:drawableBottom， android:drawableTop
  • 你可以使用常规的TextView， Button &EditText或AppCompat类。

你可以像下面这样实现输出

output

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

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，如果你想让图标与按钮对齐，而不是其中的文本。

从1.5.0-beta01版本开始，app:iconGravity也可以是top / textTop (提交)

MaterialButton with iconGravity top

小开

制作一个假按钮。

这是唯一的办法

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

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

enter image description here

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

提交答案