如何在一个button中有图像和文本中心
我想在button上显示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大小因Text大小不同而不同， Icon和Text应该调整到居中。
我应该怎么做？
你可以通过制作更复杂的布局来伪造它，但我不确定它是否值得。 这是我一起攻击的东西：
<?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中），您可能需要调整填充以使其看起来像您想要的样子。
类似于其他一些方法，我认为一个好的解决scheme是扩展Button并通过覆盖onLayout方法添加缺less的function：
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，但可以扩展以调整顶部和底部的drawable。
这个怎么样？
<?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>
这应该工作
<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>
如何使用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);
您可以根据button大小和图像大小设置填充：
Button button1 = null; //initialize button…. ViewGroup.LayoutParams params = button1.getLayoutParams(); int btn1Width = ((int) (0.33 * (double)ecranWidth)); params.width = btn1Width; button1.setLayoutParams(params); button1.setPadding((btn1Width/2-9), 0, 0, 0); //where (btn1Width/2-9) = size of button divided on 2 minux half size of icon…
简单的方法（尽pipe不完美）是将paddingRight设置为与图标相同的宽度。
这就是我所做的…可以改进的。 文本居中，图标在左侧。 所以他们都不是集中在一起。
public class CustomButton extends Button { Rect r = new Rect(); private Drawable buttonIcon = null; private int textImageSeparation = 10; public CustomButton(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } public CustomButton(Context context, AttributeSet attrs) { super(context, attrs); } public CustomButton(Context context) { super(context); } protected void onDraw(Canvas canvas) { super.onDraw(canvas); Drawable icon = getButtonIcon(); if(icon != null) { int drawableHeight = icon.getIntrinsicHeight(); int drawableWidth = icon.getIntrinsicWidth(); if(icon instanceof BitmapDrawable) { Bitmap bitmap = ((BitmapDrawable)icon).getBitmap(); drawableWidth = (int) AndroidScreenUtils.dipToPixels(bitmap.getWidth()); drawableHeight = (int) AndroidScreenUtils.dipToPixels(bitmap.getHeight()); } else { drawableWidth = (int) AndroidScreenUtils.dipToPixels(icon.getIntrinsicWidth()); drawableHeight = (int) AndroidScreenUtils.dipToPixels(icon.getIntrinsicHeight()); } float textWidth = getLayout().getPaint().measureText(getText().toString()); float left = ((getWidth() - textWidth) / 2) - getTextImageSeparation() - drawableWidth; int height = getHeight(); int top = (height - drawableHeight) /2; int right = (int) (left + drawableWidth); int bottom = top + drawableHeight; r.set((int) left, top, right, bottom); icon.setBounds(r); icon.draw(canvas); } } private Drawable getButtonIcon() { return buttonIcon; } public void setButtonIcon(Drawable buttonIcon) { this.buttonIcon = buttonIcon; } private int getTextImageSeparation() { return textImageSeparation; } public void setTextImageSeparation(int dips) { this.textImageSeparation = (int) AndroidScreenUtils.dipToPixels(dips); } }
<LinearLayout style="@style/Sonnen.Raised.Button.Transparent.LightBlueBorder" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="30dp" android:orientation="horizontal" android:padding="20dp"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:drawableLeft="@drawable/refresh" android:drawablePadding="10dp" android:drawableStart="@drawable/refresh" android:gravity="center" android:text="@string/generic_error_button_text" android:textColor="@color/dark_sky_blue" android:textSize="20sp"/> </LinearLayout>
android:layout_gravity="center_vertical|center_horizontal|center" >
