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

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

一.用系统自带的Button实现

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

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

主要代码：

<Button     android:id="@+id/bt3"    android:layout_marginTop="4dp"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:text="火车"    android:textSize="16sp"    android:textColor="#000000"    android:paddingLeft="5dp"    android:paddingTop="5dp"    android:paddingRight="5dp"    android:paddingBottom="5dp"    android:drawableLeft="@drawable/line_bus_icon"    android:background="@drawable/button_bg">  </Button>

如果要让文字在图标下方，改成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);    }    }

然后再布局文件中调用：

<com.test.ImageTextButton2   android:id="@+id/bt2"   android:layout_marginTop="10dp"   android:text="hello"   android:textSize="15dp"   android:textColor="#000000"   android:layout_width="60dp"   android:layout_height="70dp"   android:background="@drawable/button_bg"  />

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

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

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

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

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:orientation="horizontal"    android:gravity="center" >        <!-- 高度一定要wrap,否则就会有牵差    或者TextView居中     --><TextView     android:id="@+id/textView_cust_btn_friendcircle"    android:layout_width="wrap_content"    android:layout_height="fill_parent"    android:gravity="center"    android:text="请登录"    android:textSize="15dp"    /><ImageView     android:id="@+id/imageView_cust_btn_friendcircle"    android:layout_width="wrap_content"    android:layout_height="fill_parent"    android:src="@drawable/navigationbar_arrow_down"    /></LinearLayout>

然后编写相关类：

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文件中添加

<com.example.demo_weibo.ui.customComponent.CustomedButton    android:id="@+id/btn_homeFragment_friendcircle"    android:layout_width="0dp"//这里使用的是权重    android:layout_weight="8"    android:layout_height="fill_parent"    />

给大家看下效果：

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

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

 <LinearLayout            android:layout_width="fill_parent"            android:layout_height="0dp"            android:layout_weight="2.6" >            <Button                android:id="@+id/myinfo_personfragment"                android:layout_width="fill_parent"                android:layout_height="fill_parent"                android:background="@android:color/transparent"                android:drawableLeft="@drawable/avator_default"                android:drawableRight="@drawable/userinfo_jiantou"                android:paddingRight="10dp"                android:paddingLeft="10dp"                android:text="  请登录"                android:gravity="center_vertical"                 >            </Button>                  </LinearLayout>