组合在一个按钮中的图像和文本

Question

我想知道，如何将图像和文本插入按钮，并将其居中，例如它们之间的 20dp 边距。请看一下这个截图：

如您所见，图像向左对齐，文本向右移动（现在它不像其他按钮的文本那样居中）。 这是一个代码：

 <Button
    android:id="@+id/button_trombocyty"
    android:layout_width="250dp"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/button_erytrocyty"
    android:layout_marginTop="46dp"
    android:background="@drawable/button_normal"
    android:text="@string/button_trombocyty"
    android:textColor="#FFFFFF"
    android:textSize="14sp" 
    android:drawableLeft="@drawable/krew"
    android:drawablePadding="10dp" />

我想做这样的事情：

你能告诉我，我应该改变什么吗？谢谢！

Answer 1

您可以继续使用 Button 并使用 HTML <img> 标签。

首先创建新字符串

<string name="button_with_img">&lt;img src=\'%1$d\'>%2$s</string>

然后在你的代码中

final Button button = (Button) findViewById(R.id.button);
//load formatted string from resources
//it requires 2 parameters in exact order: drawable id, button's text
String text = getString(R.string.button_with_img, R.drawable.ic_launcher, "Button text");
Spanned spannedText = Html.fromHtml(text, new Html.ImageGetter() {
    @Override
    public Drawable getDrawable(String source) {
        int id = Integer.parseInt(source);
        Drawable drawable = getResources().getDrawable(id);
        drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
        return drawable;
    }
}, null);

button.setText(spannedText);

可能需要调整drawable的设置边界。

Answer 2

我认为你应该添加这样的东西

 <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:layout_marginLeft="15dp"
    android:layout_marginRight="15dp"
    android:layout_gravity="center_vertical"
    android:background="@drawable/hover" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/krew" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView" />

</LinearLayout>

在背景中应用渐变

hover.xml

< ?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="rectangle">
 <gradient
  android:startColor="#f1f1f2"// color you want
  android:centerColor="#e7e7e8"
  android:endColor="#cfcfcf"
  android:angle="270" />
 </shape>

Answer 3

试试这个方法，希望能帮助你解决问题。

<LinearLayout
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   style="@android:style/Widget.Button"
   android:gravity="center">
   <ImageView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@drawable/ic_launcher"
      android:adjustViewBounds="true"/>

   <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Image caption"
      android:textColor="@android:color/black"
      android:layout_marginLeft="20dp"/>
</LinearLayout>