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>
实现效果:
如果要让文字在图标下方,改成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程序设计有所帮助。