Androidの实现自定义带文字和图片的Button

1.利用xml实现带文字图片的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/icon"    android:background="@drawable/button_bg"></Button>

效果如右：

如果要让文字在图标下方，改成drawableTop即可。Button中有很多属性, drawableBottom等等。 

如果控制图片文字居中显示，可以看到属性paddingLeft, paddingTop 等等，可以控制文字与图片居中显示并且距离button 边缘距离大小。

如果控制点击button效果，需要添加selector.xml .... 利用android:background="@drawable/button_bg" 

button_bg.xml 代码：

<?xml version="1.0" encoding="utf-8"?><selector  xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_pressed="true" android:drawable="@color/light_blue"></item>    <item android:state_pressed="false" android:drawable="@color/light_gray"></item></selector>

color.xml 代码：

<?xml version="1.0" encoding="UTF-8"?><resources>  <color name="light_blue">#4A92FC</color>  <color name="light_gray">#CCCCCC</color></resources>

2. 自定义类继承Button然后进行重绘

主activity中代码：

public class MainActivity extends Activity {private ImageTextButton1 bt1;private ImageTextButton2 bt2;@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main);bt1 = (ImageTextButton1) findViewById(R.id.bt1);bt1.setText("icon");bt1.setTextColor(Color.rgb(0, 0, 0));bt2 = (ImageTextButton2) findViewById(R.id.bt2);//bt2.setIcon(R.drawable.line_bus_icon);}}

以及main.xml代码：

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

2.1 ImageTextButton1的自定义实现方式

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);}}

继承了RelativeLayout ，需要实现相应的构造方法，在构造方法中添加

LayoutInflater.from(context).inflate(R.layout.img_text_bt, this,true);  自定义一个布局，布局代码如下：

<?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_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentTop="true"        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_below="@id/imgview"        android:layout_centerInParent="true" >    </TextView></RelativeLayout>

然后在类中定义各种set方法，方便主activity调用。

关键部分在与如何定义好该xml 的布局问题。。。 可以控制图片跟文字的位置，通过布局来控制。。。

2.2 ImageTextButton2的自定义实现方式

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(); }@Overrideprotected void onDraw(Canvas canvas) {int x = (this.getMeasuredWidth() - bitmap.getWidth()) / 2;int y = 0;canvas.drawBitmap(bitmap, x, y, null);canvas.translate(0,(this.getMeasuredHeight() / 2) - (int) this.getTextSize());super.onDraw(canvas);}}

3 案例源码

打开链接，源码下载