Android實現自訂帶文字和圖片的Button

標籤：

　　　　　　　　　　　　　　　　　　　　Android實現自訂帶文字和圖片的Button

　　在Android開發中經常會需要用到帶文字和圖片的button，下面來講解一下常用的實現辦法。

一.用系統內建的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的布局檔案img_text_bt.xml：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout  xmlns:android="http://schemas.android.com/apk/res/android"  android:layout_width="wrap_content"  android:layout_height="wrap_content">    <ImageView   android:id="@+id/imgview"   android:layout_alignParentTop="true"   android:layout_width="wrap_content"   android:layout_height="wrap_content"   android:layout_centerInParent="true"   android:src="@drawable/icon">  </ImageView>    <TextView   android:id="@+id/textview"   android:layout_width="wrap_content"   android:layout_height="wrap_content"   android:layout_centerInParent="true"   android:layout_below="@id/imgview">  </TextView>  </RelativeLayout>

　　然後去繼承RelativeLayout布局：

package com.test;import android.content.Context;import android.util.AttributeSet;import android.view.LayoutInflater;import android.widget.ImageView;import android.widget.RelativeLayout;import android.widget.TextView;public class ImageTextButton1 extends RelativeLayout {        private ImageView imgView;      private TextView  textView;    public ImageTextButton1(Context context) {        super(context,null);    }        public ImageTextButton1(Context context,AttributeSet attributeSet) {        super(context, attributeSet);                LayoutInflater.from(context).inflate(R.layout.img_text_bt, this,true);                this.imgView = (ImageView)findViewById(R.id.imgview);        this.textView = (TextView)findViewById(R.id.textview);                this.setClickable(true);        this.setFocusable(true);    }        public void setImgResource(int resourceID) {        this.imgView.setImageResource(resourceID);    }        public void setText(String text) {        this.textView.setText(text);    }        public void setTextColor(int color) {        this.textView.setTextColor(color);    }        public void setTextSize(float size) {        this.textView.setTextSize(size);    }    }

　　然後就可以在需要的xml檔案中調用：

<com.test.ImageTextButton1    android:id="@+id/bt1"   android:layout_width="wrap_content"   android:layout_height="wrap_content"   android:background="@drawable/button_bg"  />

　　再在Activity中使用：

　　　　 bt1 = (ImageTextButton1)findViewById(R.id.bt1);        bt1.setText("icon");        bt1.setTextColor(Color.rgb(0, 0, 0));        bt1.setOnClickListener(new OnClickListener() {                        @Override            public void onClick(View v) {                // TODO Auto-generated method stub                Toast.makeText(MainActivity.this, "bt1被點擊了", Toast.LENGTH_SHORT).show();            }        });

　　三種不同方法最後的運行效果：

　　工程源碼：http://files.cnblogs.com/dolphin0520/TestImgTextButton.rar

Android實現自訂帶文字和圖片的Button