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

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

Answer 1

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

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

Answer 2

试试这个：

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

Answer 3

调用setBackgroundDrawable()您将添加到按钮的文本将出现在drawable下方！

Answer 4

我认为实现这种UI的最佳方法是使用ImageButton而不是Button。但你仍然可以通过一些hackish方式实现这一目标。其中一个在这里：

How to have Image and Text Center within a Button

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

可能这也可以帮到你：

How to center icon and text in a android button with width set to "fill parent"

Answer 5

使用drawableTop无法以这种方式完成您尝试实现的输出。

原因是什么？ - 视图可以设置背景或绘图，同时设置可绘制 Android仅提供4个选项来设置可绘制的界限 top,left,right or bottom和中心没有任何内容。

现在在您的XML中，您将视图的高度和宽度设置为MATCH_PARENT，因此每次使用drawableTOP或LEFT等可绘制集时，它都将转到视图的边缘。现在和你一起发生。

来自评论：

Android操作系统最终是一款软件......并且软件一直在其范围内开发。你要问的是超出范围，因此android使用任何默认的Form小部件都不直接支持..
我演示了android如何编写Drawable类以及如何使用它所以请尝试理解答案而不仅仅是解决问题的方法..顺便点击整个区域你可以点击该LinearLayout而不是按钮。

解决方案将是：

<LinearLayout height = MATCH_PARENT and width = 0dp>

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

</LinearLayout>

Answer 6

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

感谢您的帮助，但

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

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

---- EDIT2 -----

---- EDIT3 -----

6 个答案: