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

概述本文实例讲述了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);    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));bt1.setonClickListener(new OnClickListener() {  @OverrIDe  public voID onClick(VIEw v) { // Todo auto-generated method stub Toast.makeText(MainActivity.this,"bt1被点击了",Toast.LENGTH_SHORT).show();  }});

三种不同方法最后的运行效果：

完整实例代码点击此处本站下载。

希望本文所述对大家的AndroID程序设计有所帮助。

总结

以上是内存溢出为你收集整理的Android实现自定义带文字和图片Button的方法全部内容，希望文章能够帮你解决Android实现自定义带文字和图片Button的方法所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。