android - 如何创建具有居中文本和图像且大小设置为 match_parent 的按钮

Question

我想要一个这样的按钮：

+-----------------------+
|                       |
|        +-----+        |
|        |Image|        |
|        +-----+        |
|          Text         |
|                       |
|                       |
+-----------------------+

编辑：图片说明：我希望图像和文本的组合居中（文本始终位于图像下方）

我希望 Button 拉伸到父对象（使整个区域成为按钮单击区域）并且仍然在中心对齐图像和文本。

我只用以下代码实现了顶部中心对齐，但我没有得到想要的行为......

<Button
    android:id="@+id/btInfo"
    android:paddingTop="20dp"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:gravity="top|center_horizontal"                   
    android:layout_weight="1"
    android:background="@drawable/border_button_main_menu"
    android:drawableTop="@drawable/bt_info"
    android:onClick="onClick"
    android:text="@string/info"
    android:textColor="@drawable/bt_white_red_text"
    android:textSize="15dp" />

更改 android:gravity="top|center_horizontal"为android:gravity="center_vertical|center_horizontal"仅导致图像居中在顶部和文本居中在底部...

---- EDIT2 -----

想要的行为：

1）外观描述（图像和文本是一个光学组，组在按钮的中心）

2）文本应该是按钮的一部分（我希望 onclick 行为与选择器一起使用）

---- EDIT3 -----

添加了我自己的解决方案......但感谢所有试图提供帮助的人

score 3 · Accepted Answer

使用以下代码，您的问题将得到解决。

<Button
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignBottom="@+id/foreground"
    android:layout_alignLeft="@+id/foreground"
    android:layout_alignRight="@+id/foreground"
    android:layout_alignTop="@+id/foreground"
    android:background="@android:drawable/dialog_frame"
    android:onClick="clickedMe" />

   <RelativeLayout
       android:id="@+id/foreground"
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       android:layout_alignParentBottom="true"
       android:layout_alignParentTop="true" >

       <TextView
           android:id="@+id/button_text"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_alignParentBottom="true"
           android:layout_centerHorizontal="true"
           android:layout_marginBottom="112dp"
           android:text="@string/hello_world" />

       <ImageView
           android:id="@+id/imageView1"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_above="@+id/button_text"
           android:layout_centerHorizontal="true"
           android:paddingBottom="10dip"
           android:paddingTop="10dip"
           android:src="@drawable/ic_launcher" />

   </RelativeLayout>

</RelativeLayout>

- - - - - - - 编辑 - - - - - - - - - -

oNclick 方法：

final TextView text = (TextView) findViewById(R.id.button_text);
    RelativeLayout foreground = (RelativeLayout) findViewById(R.id.foreground);
    foreground.setOnClickListener(new View.OnClickListener() {

        @Override
        public void onClick(View v) {
            Log.d(TAG, "clicked");
            Toast.makeText(getApplicationContext(), "Clicked...!!!",
                    Toast.LENGTH_LONG).show();
            text.setTextColor(Color.RED);
        }
    });

score 1 · Accepted Answer

尝试这个：

<LinearLayout
android:gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content">

<Button
android:id="@+id/btInfo"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@drawable/border_button_main_menu"
android:drawableTop="@drawable/bt_info"
android:onClick="onClick"
android:text="@string/info"
android:textColor="@drawable/bt_white_red_text"
android:textSize="15dp" />

</LinearLayout>

score 0 · Accepted Answer

您尝试实现的输出无法使用drawableTop.

原因？- 视图可以设置背景或可绘制，而设置可绘制Android仅提供4个选项来设置可绘制边界的顶部、左侧、右侧或底部，而中心则没有。

现在，在您的 XML 中，您拥有视图的高度和宽度，MATCH_PARENT因此每次使用 drawableTOP 或 LEFT 等绘制可绘制集时，它都会到达视图的边缘。这正在发生在你身上。

来自评论：

Android OS 归根结底是一个软件。软件总是在它的范围内开发。您要问的事情超出了范围，因此使用任何默认表单小部件的 android 直接不支持它..
我演示了 android 是如何编写 Drawable 类以及如何使用它的，所以请尝试理解答案，而不仅仅是解决您的问题。顺便说一下，点击整个区域，您可以点击该 LinearLayout而不是按钮。

解决方案将是：

<LinearLayout height = MATCH_PARENT and width = 0dp>

    <Button height and width = WRAP_CONTENT with drawableTop=image and gravity = center>

</LinearLayout>

score 0 · Accepted Answer

我认为实现这种 UI 的最佳方法是使用 ImageButton 而不是 Button。但是你仍然可以通过一些骇人听闻的方式来实现这一点。其中之一在这里：

如何在按钮内设置图像和文本中心

您只需在上面链接中给出的解决方案中将内部 RelativeLayout 的方向称为“垂直”。我希望它有所帮助。

可能这也可以帮助你：

如何将宽度设置为“填充父项”的android按钮中的图标和文本居中

score 0 · Accepted Answer

我的解决方案现在来自一个按钮......它满足了我的所有要求......我不知道，如果文本的测量真的是那样精确，但它看起来是这样......如果不是，每个人得到背后的想法，可以调整......

谢谢你的帮助，虽然

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.graphics.drawable.StateListDrawable;
import android.util.AttributeSet;
import android.widget.Button;

public class CenterImageTextButton extends Button {

    private Paint mPaint = new Paint();
    private String mText = null;
    private float mTextSize = 0;

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

    public CenterImageTextButton(Context context) {
        super(context); 
    }

    @Override
    public void onDraw(Canvas canvas) {

        mText = getText().toString();
        mTextSize = getTextSize();

        mPaint.setStyle(Style.FILL); 
        mPaint.setColor(getCurrentTextColor());        

        // get image top
        Drawable drawable = getCompoundDrawables()[1];
        Drawable curDrawable = null;
        if (drawable instanceof StateListDrawable)
            curDrawable = ((StateListDrawable)drawable).getCurrent();
        else
            curDrawable = ((BitmapDrawable)drawable).getCurrent();
        Bitmap image = ((BitmapDrawable)curDrawable).getBitmap();

        // call default drawing method without image/text
        setText("");
        setCompoundDrawables(null, null, null, null);
        super.onDraw(canvas);
        setText(mText);
        setCompoundDrawables(null, drawable, null, null);

        // get measurements of button and Image
        int width = getMeasuredWidth();
        int height = getMeasuredHeight();
        int imgWidth = image.getWidth();
        int imgHeight = image.getHeight();

        // get measurements of text
        //float densityMultiplier = getContext().getResources().getDisplayMetrics().density;
        //float scaledPx = textSize * densityMultiplier;
        //paint.setTextSize(scaledPx);
        mPaint.setTextSize(mTextSize);
        float textWidth = mPaint.measureText(mText);

        // draw Image and text
        float groupHeight = imgHeight + mTextSize;
        canvas.drawBitmap(image, (width - imgWidth) / 2, (height - groupHeight) / 2, null);
        canvas.drawText(mText, (width - textWidth) / 2, mTextSize + (height - groupHeight) / 2 + imgHeight, mPaint);    
    }
}

score 0 · Accepted Answer

0

调用setBackgroundDrawable()您将添加到按钮的文本将出现在可绘制对象下方！

于 2012-12-05T12:32:59.787 回答

android - 如何创建具有居中文本和图像且大小设置为 match_parent 的按钮

---- EDIT2 -----

---- EDIT3 -----

6 回答 6

Related

Reference