android - 带有文本和图像的 Android 按钮

Question

在看到有关此功能的许多问题并尝试遵循答案后，我想知道是否有更清晰的示例？

编辑：我试图制作一个大按钮，其中包含“中间”的图像和文本。它必须表现得像一个按钮（StateList drawable），并且图像/文本对应该分组并居中（作为一个组）

Answer 1

如果您喜欢带有图像 + 文本的 Button，那么为什么不使用CompoundDrawable呢？

例如：

另请检查：如何使用复合可绘制对象而不是包含 ImageView 和 TextView 的 LinearLayout

Answer 2

为了节省其他人一些时间，我提供以下内容：

布局/some_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android:id="@+id/menu_ok"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    <!-- StateList Drawable to make it look like a button -->
    android:background="@drawable/btn_std_holo_states"
    <!-- Required so you can click on it like a button -->
    android:clickable="true"    
    <!-- Recommended min height from the guidelines -->
    android:minHeight="48dp"    
    <!-- OnClickEvent definition -->
    android:onClick="onClickOk" >   

    <!-- Compound drawable of graphic and text -->
    <TextView
        android:id="@+id/txt_ok"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        <!-- Center both the graphic and text inside the button -->
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        <!-- Draw the graphic to the left of the text -->
        android:drawableLeft="@drawable/ic_ok"
        <!-- Space between the graphic and the text-->
        android:drawablePadding="16dp"
        <!-- ensures the text and graphic are both centered vertically -->
        android:gravity="center"
        <!-- Text of the button -->
        android:text="@android:string/ok"
        <!-- Change the font to match the standard button settings (optional) -->
        android:textAppearance="?android:attr/textAppearanceButton" />

</RelativeLayout>

drawable/btn_std_holo_states.xml（上面引用过）

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/abs__btn_cab_done_pressed_holo_dark" android:state_pressed="true"/>
    <item android:drawable="@drawable/abs__btn_cab_done_focused_holo_dark" android:state_enabled="true" android:state_focused="true"/>
    <item android:drawable="@android:color/transparent" android:state_enabled="true"/>
    <item android:drawable="@android:color/transparent"/>

</selector>

注意：这里不同的 @drawable 和 @android:color 设置可以是任何东西，只是为了做一个完整的例子而提供

Answer 3

试试这个自定义的 Drawable：

class BackgroundDrawable extends StateListDrawable {
    private StateListDrawable mDrawable;
    private Bitmap mBitmap;
    private Matrix mMatrix;
    private boolean mScale;
    private int mGravity;
    private int mDx;
    private int mDy;

    public BackgroundDrawable(StateListDrawable sld, Resources res, int resId, boolean scale, int gravity, int dx, int dy) {
        mDrawable = sld;
        mBitmap = BitmapFactory.decodeResource(res, resId);
        mMatrix =  new Matrix();
        mScale = scale;
        mGravity = gravity;
        mDx = dx;
        mDy = dy;
    }

    public static void setupBackground(View v, int resId, boolean scale, int gravity, int horizontalPadding, int verticalPadding) {
        Drawable d = v.getBackground();
        if (d instanceof StateListDrawable) {
            StateListDrawable sld = (StateListDrawable) d;
            Drawable drawable = new BackgroundDrawable(sld, v.getResources(), resId, scale, gravity, horizontalPadding, verticalPadding);
            v.setBackgroundDrawable(drawable);
        }
    }

    @Override
    protected boolean onStateChange(int[] stateSet) {
        invalidateSelf();
        return super.onStateChange(stateSet);
    }

    @Override
    protected void onBoundsChange(Rect bounds) {
        mDrawable.setBounds(bounds);
        Rect b = new Rect(bounds);
        b.inset(mDx, mDy);
        RectF src = new RectF(0, 0, mBitmap.getWidth(), mBitmap.getHeight());
        RectF dst = new RectF(b);
        float[] values = new float[9];
        if (mScale) {
            mMatrix.setRectToRect(src, dst, ScaleToFit.START);
        }
        mMatrix.getValues(values);
        float sx = values[Matrix.MSCALE_X];
        float sy = values[Matrix.MSCALE_Y];
        Rect outRect = new Rect();
        Gravity.apply(mGravity, (int) (src.width() * sx), (int) (src.height() * sy), b, outRect);
        mMatrix.postTranslate(outRect.left, outRect.top);
    }

    @Override
    public void draw(Canvas canvas) {
        int[] stateSet = getState();
        mDrawable.setState(stateSet);
        mDrawable.draw(canvas);
        canvas.drawBitmap(mBitmap, mMatrix, null);
    }
}

以及如何使用它：

Button b0 = (Button) findViewById(R.id.b0);
BackgroundDrawable.setupBackground(b0, R.drawable.ic_launcher, false, Gravity.BOTTOM | Gravity.RIGHT, 10, 5);
Button b1 = (Button) findViewById(R.id.b1);
BackgroundDrawable.setupBackground(b1, R.drawable.ic_launcher, false, Gravity.TOP, 0, 0);

Answer 4

试试这个：

Drawable appImg = getApplicationContext().getResources().getDrawable( R.drawable.ic_launcher );
appImg.setBounds( 0, 0, appImg.getIntrinsicHeight(), appImg.getIntrinsicWidth() );

Button btn_ok = (Button) findViewById(R.id.ok);
btn_ok.setCompoundDrawables( null, null, appImg, null );

希望它可以帮助你。

谢谢。