Android背景+button的文本+图标

我想有一个图像设置为背景上的文字和左侧的文字图标。 在iPhone中很容易,但无法弄清楚如何在Android上做到这一点,可以resize的button,并保持图标+文本的位置和距离。

苹果手机:

苹果手机

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

从这里拿了代码。

如果我使用android:drawableLeft ,那么图标会转到最左边的部分。

在这里输入图像说明

如果我开始玩半硬编码的填充,比我会有不同的看比较devives:(电话和桌子)

如果我添加android:gravity="left|center_vertical"比它看起来像这样:

在这里输入图像说明

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

如何正确地做到这一点?

我不想downvote任何人的答案,但请阅读这个问题,并不build议我已经尝试了。 也告诉硬编码的修复程序不能正常工作。

这不是一个家庭作业,而是一个商业软件的一部分。

这里是答案的build议代码:

 <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"怎么样? 这是一个预览:

在这里输入图像说明

这不是我所问的。 由于手机具有HPDI,屏幕较小,平板电脑具有MDPI和较高的分辨率,所以“dip”或“dp”或“px”不应该用作从左至顶的距离。 简单不适用于mdpi和xxhdpi。

Nizam的答案是非常接近的一个很好的解决scheme:

在这里输入图像说明

Solutions Collecting From Web of "Android背景+button的文本+图标"

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

尝试这个:

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

试试这个:按照这个: 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> 

这是我如何做事情:

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> 

select器

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

圆的angular落

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

尝试下面的布局

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

ps如果你为startColorstartColorendColor设置不同的颜色值,你将会得到你的背景的渐变效果。 所以相应地改变颜色值。

编辑:

尝试下面的布局,我编辑它适合不同的屏幕尺寸与圆angular可绘制。

 <?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> 
 <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并放在可绘制的文件夹中。 如果你想使用这个,但你也可以使用可绘制文件夹中的图像。

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

我已经用下面的代码实现了。 可以用作上述解决scheme的一个更简单的替代scheme。

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

button视图被标记为红色(这不是一个列表项,而是一个具有上述代码的button):

在这里输入图像说明

find一个名为CenteredIconButton的类,在此链接上扩展Button。 像魔术一样工作。 如何在一个button中有图像和文本中心 。 感谢@atomicode

如果你的button宽度: 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" /> 

否则,如果你的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

 <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中的button

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

我只是实现了这种button(它已被部署在一个大型的应用程序),它并不是很复杂:内容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是一个select器,指向每个button状态使用的不同的drawable

我使用了LinearLayout,它可以简单地将文本和图标居中放置在button中。 GridLayout也应该是可行的。 如果你想在文本上居中(我不认为它看起来不错,但这是你的select),使用RelativeLayout。

你可以使用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"/>