当前位置： 移动技术网 > IT编程>移动开发>Android > Android实现自定义带文字和图片Button的方法

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

2019年07月24日  | 移动技术网IT编程  | 我要评论

让爱飞扬,msygmqbyurle,生态护坡

本文实例讲述了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();
  }
});

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

完整实例代码点击此处。

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

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网