Android背景+文本+按钮图标答案

【问题标题】：Android background + text + icon for a buttonAndroid背景+文本+按钮图标
【发布时间】：2013-10-08 15:18:02
【问题描述】：

我想将图像设置为背景上的文本和文本左侧的图标。在 iPhone 上非常简单，但在 Android 上不知道如何做到这一点，调整按钮的大小并正确保持图标 + 文本的位置和距离。

iPhone：

Android 我有这个：

xml代码为：

<Button
    android:id="@+id/btSettings"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@id/tvWhatever"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="20dp"
    android:background="@drawable/bt_general"
    android:drawableTop="@drawable/settings_selected"
    android:text="@string/settings"
    android:textColor="#000000" />

从here获取代码。

如果我使用 android:drawableLeft ，则图标将转到最左侧。

如果我开始使用半硬编码填充，那么我会对差异设备有不同的看法：（电话和桌子）

如果我添加android:gravity="left|center_vertical"，它将如下所示：

文本是可变的：当用户改变语言时它会改变。

如何正确操作？

我不想对任何人的答案投反对票，但请阅读问题，不要建议我已经尝试过的内容。还告诉硬编码修复效果不好。

这不是作业，而是商业软件部分。

这是来自答案的建议代码：

<RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bt_general"
        android:padding="20dip" >

        <ImageView
            android:id="@+id/xIcon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dip"
            android:src="@drawable/settings_selected" />

        <TextView
            android:id="@+id/xSettingsTxt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="@string/settings"
            android:textColor="#000000" />
    </RelativeLayout>

你觉得 Galaxy s4 上的 android:layout_marginLeft="10dip" 会是什么样子？这是一个预览：

这不是我问的。 “dip”或“dp”或“px”不应该在任何地方使用，因为手机有 HPDI，屏幕更小，平板电脑有 MDPI 和宽分辨率。 Simple 不适用于 mdpi 和 xxhdpi。

Nizam answer 非常接近一个好的解决方案：

【问题讨论】：

你试过了吗，android:drawablePadding
@PiyushGupta 需要维度，而不是 drwable：原因：java.lang.UnsupportedOperationException：无法转换为维度：type=0x3
@matheszabi 检查我在编辑部分放置的布局，这将起作用。

标签： java android xml layout user-interface

【解决方案1】：

也许你应该使用带圆角的RelativeLayout，而不是把TextView和ImageView放在里面。

【讨论】：

这是第一个正确答案。其他人给出了代码，当这已经被赞成时。有些代码没有按预期工作，但基于我可以做到这一点的想法。远没有iPhone端那么简单。我会建议我的客户从 Android 按钮中删除图标，否则我必须做更多的工作才能在所有设备上正常显示和感觉 elment

【解决方案2】：

试试这个：

    Button button = (Button) findViewById(R.id.button1);
    Spannable buttonLabel = new SpannableString(" Settings");
    buttonLabel.setSpan(new ImageSpan(getApplicationContext(), R.drawable.settings_selected,      
        ImageSpan.ALIGN_BOTTOM), 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
    button.setText(buttonLabel);

【讨论】：

+1，非常接近一个好的解决方案：文本与图像相比有点低，并且 ImageSpan.ALIGN_BASELINE 约束也不起作用。 from text 缺少第一个字母，如果省略第一个空格，我认为那里需要一个间隙
实际上这是一个 Android 操作系统的错误 ALIGN_BASELINE 不起作用并且有一个解决方法

【解决方案3】：

试试这个：关注这个：http://porcupineprogrammer.blogspot.in/2013/03/android-ui-struggles-making-button-with.html

<FrameLayout
    style="?android:attr/buttonStyle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:drawableLeft="@android:drawable/ic_delete"
        android:gravity="center"
        android:text="Button Challenge" />
</FrameLayout>

【讨论】：

【解决方案4】：

这是我做事的方式：

图层

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

    <item android:drawable="@drawable/rounded_border"/>
    <item android:drawable="@drawable/selector_button"/>

</layer-list>

选择器

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

    <item android:drawable="@color/clr_grey_1" android:state_selected="true" android:state_window_focused="false"/>
    <item android:drawable="@color/clr_grey_1" android:state_selected="true"/>
    <item android:drawable="@color/clr_grey_1" android:state_pressed="true" android:state_selected="false"/>
    <item android:drawable="@color/clr_main_green" android:state_selected="false"/>

</selector>

圆角

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

    <solid android:color="@color/clr_grey_2" />

    <stroke
        android:width="1dp"
        android:color="@android:color/white" />

    <corners
        android:bottomLeftRadius="8dp"
        android:bottomRightRadius="8dp"
        android:topLeftRadius="8dp"
        android:topRightRadius="8dp" />

    <padding
        android:bottom="0dp"
        android:left="4dp"
        android:right="0dp"
        android:top="4dp" />

</shape>

在相对布局上使用它，里面有一个图像视图和按钮

【讨论】：

这没有文本元素
我没有写在帖子里，你可以在RelativeLayout中使用LAYERS作为背景，在布局内放置你想要使用的元素;)

【解决方案5】：

试试下面的布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="100dip"
android:orientation="horizontal"
android:background="@drawable/round_corners_drawable" >

<ImageView 
    android:id="@+id/xIcon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_marginLeft="10dip"
    android:layout_centerVertical="true"
    android:src="@drawable/ic_launcher"/>

<TextView
    android:id="@+id/xSettingsTxt"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Settings"
    android:layout_centerInParent="true" />

</RelativeLayout>

而drawable/round_corner_drawable如下：

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >

<solid android:color="#310704"/>

<corners
    android:bottomRightRadius="20sp"
    android:bottomLeftRadius="20sp"
    android:topLeftRadius="20sp"
    android:topRightRadius="20sp"/>

<gradient
    android:startColor="#99310704"
    android:centerColor="#99310704"
    android:endColor="#99310704"
    android:angle="270" />

</shape>

另外，如果你想使用你的图片作为背景，请提供android:layout_height="wrap_content" 并将其设置为相对布局的背景。

附言如果您为startColor、centerColor 和endColor 设置不同的颜色值，您将获得背景可绘制对象的渐变效果。所以相应地改变颜色值。

编辑：

试试下面的布局，我编辑它以适应不同的屏幕尺寸，圆角可绘制。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="20dip"
android:background="@drawable/dialog_round_corners" >

<ImageView 
    android:id="@+id/xIcon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toLeftOf="@+id/xSettingsTxt"
    android:layout_centerVertical="true"
    android:src="@drawable/ic_launcher"/>

<TextView
    android:id="@+id/xSettingsTxt"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Settings"
    android:layout_centerInParent="true" />

</RelativeLayout>

【讨论】：

那些半硬编码的修复我有问题：android:layout_height="100dip" 如果你设置为 HDPI 小屏幕手机，这些看起来很糟糕。例如 Nexus one，将在 MDPI 大屏幕、低分辨率平板电脑上进行检查
是的，但这就是我指定的原因，如果您有不同大小的 hdpi、mdpi、xhdpi 和 ldpi 图像，您可以将图像设置为 RelativeLayout 的背景并将高度设置为 wrap_content。
赞成您的努力，但此解决方案不符合我的需求

【解决方案6】：

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button Text"
    android:background="@drawable/round_background"
    android:drawableLeft="@drawable/icon"/>

将下面的xml 代码保存为round_background.xml 并将其放在drawable 文件夹中。如果您愿意，可以使用它，但您也可以使用可绘制文件夹中的图像。

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

    <solid android:color="#f5f5f5" />

    <corners android:radius="10px" />

    <padding
        android:bottom="0dp"
        android:left="0dp"
        android:right="0dp"
        android:top="0dp" />

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

</shape>

【讨论】：

背景在哪里？！

【解决方案7】：

我通过以下代码实现了这一点。可用作上述解决方案的更简单替代方案。

<Button android:id="@+id/btnUserProfile"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="8dp"
    android:layout_marginRight="8dp"
    android:drawableLeft="@drawable/ic_user_profile"
    android:background="#6C6C6C"
    android:drawablePadding="8dp"
    android:gravity="left|center_vertical"          
    android:text="@string/my_profile"
    android:textStyle="bold|italic" />

按钮视图标记为红色（这不是列表项，而是上面代码的按钮）：

【讨论】：

【解决方案8】：

在此链接中找到了一个名为 CenteredIconButton 的类，它扩展了 Button。像魔术一样工作。 How to have Image and Text Center within a Button 。感谢@atomicode

【讨论】：

【解决方案9】：

如果您的按钮宽度：android:layout_width="wrap_content"，那么您的代码将是这样的：

 <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableLeft="@drawable/img name"
        android:gravity="left|center"
        android:text="Button" />

否则，如果您的按钮宽度为：android:layout_width="match_parent"，那么您的代码将如下所示：

<Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:drawableLeft="@drawable/img name"
        android:gravity="left|center"
        android:text="Button"
        android:paddingLeft="100dp" 
        />

顺便android:paddingLeft="100dp"，把100换成你合适的值。

【讨论】：

【解决方案10】：

<Button
    android:id="@+id/btSettings"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/back_button"
    android:drawablePadding="5dp"
    android:drawableLeft="@drawable/ic_launcher"
    android:text="Settings"
    android:padding="20dp"
    android:textColor="#000000" />

您可以使用 paddingLeft 和 paddingRight 来获取 iphone 中的按钮

【讨论】：

"如果我使用 android:drawableLeft ，图标会移到最左边。"它看起来像上面所示：总左，我需要在中心

【解决方案11】：

尝试使用TextView，

<TextView
    android:id="@+id/txtSettings"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@id/tvWhatever"
    android:layout_centerHorizontal="true"
    android:text="@string/settings"
    android:textColor="#000000" />

在 Java 中

txtView.setBackgroundResources(R.drawable.bt_general);
txtView.setCompoundDrawablesWithIntrinsicBounds(Drawable left,Drawable top,Drawable right,Drawable bottom);

可绘制图像在哪里，

Bitmap bitmap= BitmapFactory.decodeResource(context.getResources(), 
    R.drawable.settings_selected);
BitmapDrawable drawable=new BitmapDrawable(getResources(), bitmap);

【讨论】：

我的背景是一个可绘制的：一个 png 文件。黄色图标是另一个png。文字会根据翻译而改变我的图标放在哪里？向左还是向上？
把你的黄色图标放在左边。并将您的背景图片设置为 Textview 作为 android:background="..."
相当于android:drawableLeft
我也检查过这个解决方案：它与 android:drawableLeft 等价，到目前为止不是预期的

【解决方案12】：

我只是实现了这种按钮（并且已经部署在一个大型应用程序中），它并不复杂： large_button.xml 的内容：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/large_button_background"
    android:clickable="true"
    android:gravity="center_horizontal"
    android:orientation="horizontal" >

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="center_vertical"
        android:layout_marginRight="16dp"
        android:src="@drawable/some_icon" />

    <com.my.app.widget.RobotoTextView
        android:id="@+id/large_button_text"
        style="@style/AppName_RobotoBold"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:ellipsize="end"
        android:focusable="false"
        android:gravity="center_vertical"
        android:maxLines="1"
        android:singleLine="true"
        android:textColor="@color/text_main"
        />

</LinearLayout>

然后，要使用它，我只需要使用包含标签：

<include
    android:id="@+id/large_button"
    android:layout_width="match_parent"
    android:layout_height="@dimen/large_button_height"
    android:layout_marginBottom="@dimen/large_button_vertical_margin"
    android:layout_marginLeft="@dimen/large_button_horizontal_margin"
    android:layout_marginRight="@dimen/large_button_horizontal_margin"
    android:layout_marginTop="@dimen/large_button_vertical_margin"
    layout="@layout/large_button" />

large_button_background 是一个选择器，指向用于每个按钮状态的不同可绘制对象

我使用了 LinearLayout，它允许简单地将按钮中的文本和图标居中。它也应该可以使用 GridLayout。如果您只想以文本为中心（虽然我认为它看起来不太好，但这是您的选择），请使用 RelativeLayout。

【讨论】：

【解决方案13】：

您可以使用固定宽度的 android:paddingLeft、android:paddingRight 和 layout_width 来解决问题。

<Button
android:id="@+id/btSettings"
android:layout_width="148dp"
android:layout_height="wrap_content"
android:paddingLeft="32dp"
android:paddingRight="32dp"
android:background="@drawable/bt_general"
android:drawableLeft="@drawable/settings_selected"
android:text="@string/settings"
android:textColor="#000000"/>

【讨论】：

【解决方案14】：

检查这个我发现有用的链接。 http://porcupineprogrammer.blogspot.co.uk/2013/03/android-ui-struggles-making-button-with.html

【讨论】：