Question

我想将图像设置为背景上的文本和文本左侧的图标。在iPhone上很容易，但无法弄清楚如何在Android上进行操作，可以调整该按钮的大小并保持图标+文本位置和距离正确。

iPhone：

iPhone

Android我有这个：

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，则图标将转到大部分左侧。

enter image description here

如果我开始使用半硬编码的填充物，那么我将会看到不同的差异：（手机和桌子）

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

enter image description here

文本是可变的：当用户更改语言时，它会发生变化。

如何正确地做到这一点？

我不想低估任何人的答案，但请阅读问题，不要提出我已经尝试过的内容。还告诉硬编码修复不能很好。

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

以下是答案的建议代码：

<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"怎么样？这是预览：

enter image description here

这不是，我所问的。 “dip”或“dp”或“px”不应在任何地方用作距离左侧，顶部的距离，因为手机具有HPDI，屏幕较小，平板电脑具有MDPI和宽分辨率。简单不适用于mdpi和xxhdpi。

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

enter image description here

Answer 1

也许你应该使用带有圆角的RelativeLayout，而不是将TextView和ImageView放在其中。

Answer 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);

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

Answer 4

尝试以下布局

<?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"并将其设置为相对布局的背景。

P.S。如果您为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>

Answer 5

以下是我的工作方式：

<强> LAYERS

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

<强> SELECTOR

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

ROUNDED CORNER

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

在相对布局上使用此功能，其中包含imageview和按钮

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

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

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

enter image description here

Answer 8

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

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

Answer 10

尝试使用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);

Drawable图像在哪里，

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

Answer 11

<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中的按钮

Answer 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标记：

<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是一个选择器，指向用于每个按钮状态的不同drawable

我使用了一个LinearLayout，它允许简单地将文本和文本放在一起。按钮中的图标。它也应该适用于GridLayout。如果你想以文本为中心（我认为它看起来不是很好，但这是你的选择），请使用RelativeLayout。

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

Answer 14

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

Android背景+文字+图标的按钮

14 个答案: