Android實現自定義帶文字和圖片Button的方法

 　　本文實例講述了Android實現自定義帶文字和圖片Button的方法。分享給大家供大家參考。具體分析如下：

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

　　一.用系統自帶的Button實現

　　最簡單的一種辦法就是利用系統自帶的Button來實現，這種方式代碼量最小。在Button的屬性中有一個是drawableLeft，這個屬性可以把圖片設置在文字的左邊，但是這種方式必須讓icon的背景色是透明的，如果icon的背景色不是透明的話，會導致點擊按鈕時icon部分的背景色不會發生變化。

　　主要代碼：

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <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然後進行重繪

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 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); } }

　　然後再布局文件中調用：

　　?

1 2 3 4 5 6 7 8 9 10 <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：

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <?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布局：

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 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