欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2024-01-23 11:19:52
本文实例讲述了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>

实现效果:

Android实现自定义带文字和图片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实现自定义带文字和图片Button的方法

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

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