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 container
		pickUpBtnContainer = (LinearLayout) findViewById(R.id.pickUpBtnContainer);
		// Get button instance
		pickUpBtn = new MyImageButton(this, R.drawable.test_img, R.string.pickupCtn, 18);
		// Put button instance into button container
		pickUpBtnContainer.addView(pickUpBtn);
		// Set button OnClickListener
		pickUpBtn.setOnClickListener(new Button.OnClickListener(){
			@Override
			public 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下就可使用