android之实现带图片和文本的Button

我在仿sina微博的时候，发现有个朋友圈那个按钮是既有文本又有图标的，上网找了一下，总结如下：

一.用系统自带的Button实现

　　最简单的一种办法就是利用系统自带的Button来实现，这种方式代码量最小。在Button的属性中有一个是drawableLeft，这个属性可以把图片设置在文字的左边，但是这种方

式必须让icon的背景色是透明的，如果icon的背景色不是透明的话，会导致点击按钮时icon部分的背景色不会发生变化。

主要代码：

如果要让文字在图标下方，改成drawableTop即可

二.继承系统的Button然后进行重绘

package com.test;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.widget.Button;


public class ImageTextButton2 extends Button {
    
    
    private int resourceId = 0;
    private Bitmap bitmap;
    
    public ImageTextButton2(Context context) {
        super(context,null);
    }
    
    public ImageTextButton2(Context context,AttributeSet attributeSet) {
        super(context, attributeSet);
        this.setClickable(true);
        resourceId = R.drawable.icon;
        bitmap = BitmapFactory.decodeResource(getResources(), resourceId);
    }
    
    public void setIcon(int resourceId) 
    {
        this.bitmap = BitmapFactory.decodeResource(getResources(), resourceId);
        invalidate();
    }
    
    @Override
    protected void onDraw(Canvas canvas) {
        // TODO Auto-generated method stub
        
        // 图片顶部居中显示
        int x = (this.getMeasuredWidth() - bitmap.getWidth())/2;
        int y = 0;
        canvas.drawBitmap(bitmap, x, y, null);
        // 坐标需要转换，因为默认情况下Button中的文字居中显示
        // 这里需要让文字在底部显示
        canvas.translate(0,(this.getMeasuredHeight()/2) - (int) this.getTextSize());
        super.onDraw(canvas);
    }
    
}

然后再布局文件中调用：

注意，在xml文件中调用时，对于layout_width和layout_height两个属性千万不能用wrap_content，否则会导致按钮显示出来的只有文字部分。

以上两种我都没用，那么我用的是什么呢？请接着往下看：

三.继承布局文件
　　分析发现一个带文字和icon的button其实可以看成一个线性布局或相对布局，因此可以继承布局来实现。

　　先实现一个button的布局文件custom_btn.xml：

然后编写相关类：

package com.example.demo_weibo.ui.customComponent;

import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.example.demo_weibo.R;

/**
 * @description: 因为布局文件中的组件都需要，所以都要获取到
 * 
 * @author taoZhang
 * @created 2015-12-5 下午12:23:24
 * 
 */
public class CustomedButton extends LinearLayout {

	private ImageView imgView;  
    private TextView  textView;
	
	public CustomedButton(Context context) {
		super(context,null);
	}

	public CustomedButton(Context context, AttributeSet attrs) {
		super(context, attrs);
	System.out.println("CustomedButton 的构造方法----获取到组件");
        LayoutInflater.from(context).inflate(R.layout.custom_btn, this,true);//这里是关键，就是将btn布局映射到当前的Activity
        this.imgView = (ImageView)findViewById(R.id.imageView_cust_btn_friendcircle);
        this.textView = (TextView)findViewById(R.id.textView_cust_btn_friendcircle);
        this.setClickable(true);
        this.setFocusable(true);
    }
    
	/**
	 * 设置imageView的src
	 * @param resourceID src
	 */
    public void setImgResource(int resourceID) {
        this.imgView.setImageResource(resourceID);
    }
    
    /**
     * 设置TextView的文本
     * @param str 
     */
    public void setText(String str) {
        this.textView.setText(str);
    }
    
    /**
     * 文本颜色
     * @param color 
     */
    public void setTextColor(int color) {
        this.textView.setTextColor(color);
    }
    
    /**
     * 字体大小
     * @param size
     */
    public void setTextSize(float size) {
        this.textView.setTextSize(size);
    }
	
}

然后在主xml文件中添加

给大家看下效果：

参考博客：http://www.cnblogs.com/dolphin0520/p/3383804.html

然而，我发现了个更简单的