如何在按钮中拥有图像和文本中心

Question

我要显示TEXT和Icon上一个按钮.

+----------------------------+
|          Icon TEXT         |
+----------------------------+

我试过了

<Button 
      android:id="@+id/Button01" 
      android:layout_width="fill_parent"
      android:layout_height="wrap_content" 
      android:paddingLeft="40dip"
      android:text="TEXT"
      android:drawableLeft="@drawable/Icon" />

但是,Text和Icon是不是在中心.根据文字大小,
我的Text尺寸会有所不同,应调整到中心位置. IconText

我该怎么办？

Answer 1

你可以通过制作更复杂的布局来伪造它,但我不确定它是否值得.这是我一起入侵的东西:

<?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">
<Button
    android:layout_height="wrap_content"
    android:layout_width="fill_parent"
    android:layout_alignTop="@+id/foreground"
    android:layout_alignBottom="@id/foreground"
    android:layout_alignRight="@id/foreground"
    android:layout_alignLeft="@id/foreground"
    android:onClick="clickedMe" />
   <RelativeLayout
        android:id="@id/foreground"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">
    <TextView  
        android:id="@+id/button_text"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content"
        android:layout_centerInParent="true" 
        android:text="@string/hello" />
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toLeftOf="@id/button_text"
        android:paddingTop="10dip"
        android:paddingBottom="10dip"
        android:src="@drawable/icon" />
</RelativeLayout>
</RelativeLayout>

可能有一种更简洁的方法来做到这一点.我倾向于让RelativeLayout有时候做我想做的事情.请注意,您需要注意z顺序(Button需要首先出现在顶级RelativeLayout中),您可能需要调整填充以使其看起来像您想要的那样.

Answer 2

与其他一些方法类似,我认为一个好的解决方案是Button通过覆盖其onLayout方法来扩展和添加缺少的功能:

public class CenteredIconButton extends Button {
    private static final int LEFT = 0, TOP = 1, RIGHT = 2, BOTTOM = 3;

    // Pre-allocate objects for layout measuring
    private Rect textBounds = new Rect();
    private Rect drawableBounds = new Rect();

    public CenteredIconButton(Context context) {
        this(context, null);
    }

    public CenteredIconButton(Context context, AttributeSet attrs) {
        this(context, attrs, android.R.attr.buttonStyle);
    }

    public CenteredIconButton(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);

        if (!changed) return;

        final CharSequence text = getText();
        if (!TextUtils.isEmpty(text)) {
            TextPaint textPaint = getPaint();
            textPaint.getTextBounds(text.toString(), 0, text.length(), textBounds);
        } else {
            textBounds.setEmpty();
        }

        final int width = getWidth() - (getPaddingLeft() + getPaddingRight());

        final Drawable[] drawables = getCompoundDrawables();

        if (drawables[LEFT] != null) {
            drawables[LEFT].copyBounds(drawableBounds);
            int leftOffset =
                    (width - (textBounds.width() + drawableBounds.width()) + getRightPaddingOffset()) / 2 - getCompoundDrawablePadding();
            drawableBounds.offset(leftOffset, 0);
            drawables[LEFT].setBounds(drawableBounds);
        }

        if (drawables[RIGHT] != null) {
            drawables[RIGHT].copyBounds(drawableBounds);
            int rightOffset =
                    ((textBounds.width() + drawableBounds.width()) - width + getLeftPaddingOffset()) / 2 + getCompoundDrawablePadding();
            drawableBounds.offset(rightOffset, 0);
            drawables[RIGHT].setBounds(drawableBounds);
        }
    }
}

该样本仅适用于左侧和右侧drawable,但也可以扩展以调整顶部和底部drawables.

Answer 3

这个怎么样？

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/lovely_color"
    android:clickable="true"
    android:onClick="clickHandler">

       <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="no?"
            android:textColor="@color/white"
            android:layout_centerHorizontal="true"
            android:drawableLeft="@drawable/lovely_icon"
            android:drawablePadding="10dp"
            android:padding="10dp"
            android:gravity="center"
            android:textSize="21sp"/>

</RelativeLayout>

Answer 4

这应该工作

<LinearLayout        

android:layout_width="fill_parent"        
android:layout_height="wrap_content" 
android:gravity="center_horizontal">    
<TextView          
    android:id="@+id/button_text"        
    android:layout_width="wrap_content"         
    android:layout_height="wrap_content"        
    android:layout_centerInParent="true"        
     android:text="hello" />    
 <ImageView        
     android:layout_width="wrap_content"        
     android:layout_height="wrap_content"
     android:paddingBottom="10dip"
/>
</LinearLayout>

Answer 5

如何使用 SpannableString 作为带有 ImageSpan 的文本？

Button myButton = ...
SpannableString ss = new SpannableString(" " + getString(R.string.my_button_text));
Drawable d = getResources().getDrawable(R.drawable.myIcon);
d.setBounds(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight());
ImageSpan span = new ImageSpan(d, DynamicDrawableSpan.ALIGN_BOTTOM);
ss.setSpan(span, 0, 1, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
myButton.setText(ss);