带有文字和图像的Android按钮

时间:2012-12-18 07:01:07

标签: android button

在看到有关此功能的许多问题并尝试按照答案后,我想知道是否有更明确的例子?

编辑:我试图制作一个大按钮,其图像和文字位于“中间”。它必须表现为按钮(StateList drawable),图像/文本对应该分组并居中(作为一个组)

4 个答案:

答案 0 :(得分:6)

如果您希望Button包含图片+文字,那么为什么不使用 CompoundDrawable

例如:

enter image description here

同时检查:How do I use a compound drawable instead of a LinearLayout that contains an ImageView and a TextView

答案 1 :(得分: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:颜色设置可以是任何内容,仅用于提供完整示例

答案 2 :(得分:1)

尝试这个自定义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);

答案 3 :(得分:0)

试试这个:

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

希望它对你有所帮助。

感谢。