Android 含有图片和文字的Button的实现

  要实现一个同时包含图片和文字的按钮，粗糙一点的做法当然是直接画个含有画像和文字的png做button的背景，但是考虑到文字部分的国际化以及灵活性的话，就必须把图片和文字独立开来了。原生的Button控件是做不到的，方法应该有很多，这里介绍我做法，说白了就是一个父View包裹两个子View，父View选用LinearLayout，子View分别是ImageView和TextView。下面看下主要的实现类：

package net.jackie.xxx.view;import net.jackie.xxx.pickmeupandroid.R;import android.content.Context;import android.view.Gravity;import android.widget.ImageView;import android.widget.ImageView.ScaleType;import android.widget.LinearLayout;import android.widget.TextView;/** * @author jackie * */public class MyImageButton extends LinearLayout {private ImageView mButtonImage = null; private TextView mButtonText = null;private int textSize = 18;/** *  * @param context * @param intArray intArray[0] : ImageResourceId;  * intArray[1] : textResourceId; intArray[2] : textSize. Other intArray is useless */public MyImageButton(Context context, int... intArray) {     super(context);      // Init instance    mButtonImage = new ImageView(context);    mButtonText = new TextView(context);        int len = intArray.length;    if (len >= 1) {    // Set Image Resource    setImageResource(intArray[0]);    }    if (len >= 2) {    // Set Text    setText(intArray[1]);    }    if (len >= 3) {    // Change text size    textSize = intArray[2];    }        /** Set Child View(ImageView/TextView) properties */    // Set Text Size : default 18    setTextSize(textSize);            // Set ImageView ScaleType : default CENTER_INSIDE(located center, without resize)    setImgScaleType(ScaleType.CENTER_INSIDE);    LayoutParams layoutParams = new LayoutParams(LayoutParams.MATCH_PARENT, 0, 0.5f);    // Set ImageView LayoutParams : default half    setImgLayoutParams(layoutParams);    // Set TextView LayoutParams : default half    setTextLayoutParams(layoutParams);    // Set Text Gravity : default center    setTextGravity(Gravity.CENTER);    // Set Text Color : default white    setTextColor(0xFFFFFFFF);        /** Set Father View(LinearLayout) properties */    setClickable(true);    setFocusable(true);LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT, 1);//params.gravity = Gravity.CENTER;// Set Father View Orientation : default fulfill    setFatherViewLayoutParams(params);    // Set Father View Orientation : default my_img_btn_default    setFatherViewBgResource(R.drawable.my_img_btn_default);    // Set Father View Orientation : default VERTICAL    setFatherViewOrientation(LinearLayout.VERTICAL);        addView(mButtonImage);     addView(mButtonText);   }  /*    * setImageResource   */   public void setImageResource(int resId) {     mButtonImage.setImageResource(resId);   }    /*    * setText   */   public void setText(int resId) {     mButtonText.setText(resId);   }    public void setText(CharSequence buttonText) {     mButtonText.setText(buttonText);   }    /*    * setTextColor   */   public void setTextColor(int color) {     mButtonText.setTextColor(color);   }    /*    * setTextSize   */   public void setTextSize(int textSize) {     mButtonText.setTextSize(textSize);   }/** * @param layoutParams the layoutParams to set */public void setImgLayoutParams(LayoutParams layoutParams) {mButtonImage.setLayoutParams(layoutParams);}        /** * Controls how the image should be resized or moved to match the size of this ImageView *  * @param layoutParams the layoutParams to set */public void setImgScaleType(ScaleType scaleType) {mButtonImage.setScaleType(scaleType);}/** * @param layoutParams the layoutParams to set */public void setTextLayoutParams(LayoutParams layoutParams) {mButtonText.setLayoutParams(layoutParams);}/** * @param gravity the gravity to set */public void setTextGravity(int gravity) {mButtonText.setGravity(gravity);}/** * Set Father View LayoutParams. Notice that this method should not be used generally. *  * @param params */public void setFatherViewLayoutParams(LayoutParams params) {super.setLayoutParams(params);}public void setFatherViewBgResource(int resId) {super.setBackgroundResource(resId);}/** * Set orientation of this Linearlayout. Notice that since the default orientation is vertical,  * when you use this method to modify the orientation to horizontal , make sure that you  * also use {@link #setImgLayoutParams(LayoutParams layoutParams)} and  * {@link #setTextLayoutParams(LayoutParams layoutParams)} together, otherwise,  * the button can not be displayed normally *  * @param orientation */public void setFatherViewOrientation(int orientation) {super.setOrientation(orientation);}}

这个类在构造时会生成一个默认的按钮，图片在上，文字在下，还有一些字体等的默认设置，为了尽量做到共通化，又提供了尽可能多的接口以满足不同的式样需求。具体怎么用呢？

1.布局文件中加一个容器，供我们放置自己的ImageButton对象：

<LinearLayout            android:id="@+id/pickUpBtnContainer"        android:orientation="horizontal"        android:layout_width="0dip"            android:layout_height="match_parent"            android:layout_weight="0.5"            android:gravity="center" />

2.在Activity中获取到容器，并将我们的ImageButton放进去：

private void initImageButtons() {// Get button containerpickUpBtnContainer = (LinearLayout) findViewById(R.id.pickUpBtnContainer);// Get button instancepickUpBtn = new MyImageButton(this, R.drawable.test_img, R.string.pickupCtn, 18);// Put button instance into button containerpickUpBtnContainer.addView(pickUpBtn);// Set button OnClickListenerpickUpBtn.setOnClickListener(new Button.OnClickListener(){@Overridepublic void onClick(View v) {// TODO 这里做什么不用说了//}});}

这样就OK了，至于button的背景啊，点击时的效果，和这篇文章关系不大，不过还是把我自己的xml贴上来吧。
my_img_btn_default.xml

<?xml version="1.0" encoding="UTF-8"?><selector  xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_pressed="true">        <shape>            <gradient android:startColor="@color/my_btn_clicked" android:endColor="@color/my_btn_clicked" android:angle="270" />            <stroke android:width="1dp" android:color="@color/my_btn_clicked" />            <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" />                    </shape>    </item>    <item android:state_focused="true">        <shape>            <gradient android:startColor="@color/my_btn_clicked" android:endColor="@color/my_btn_clicked" android:angle="270" />            <stroke android:width="1dp" android:color="@color/my_btn_clicked" />            <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" />                    </shape>    </item>    <item>        <shape>            <gradient android:startColor="@color/glb_bg" android:endColor="@color/glb_bg" android:angle="270" />            <stroke android:width="1dp" android:color="@color/glb_bg" />            <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" />                    </shape>    </item></selector>

如果想要圆角button，在<shape>标签下增加子标签<corners android:radius="5dp" />就可以了，该文件放在drawable下就可使用