Android自定义图文并茂的Button

自定义ImageTextButton

最新推荐文章于 2022-11-03 20:08:37 发布

原创最新推荐文章于 2022-11-03 20:08:37 发布 · 3.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#android #layout #button #encoding #xml #string

Android知识杂记专栏收录该内容

140 篇文章

订阅专栏

本文介绍了一种在Android中自定义ImageTextButton的方法，该组件能够同时显示图标和文本，并提供了源码及XML布局示例。

anroid内置了Button和ImageButton，但是没有提供既能显示图片又能显示文字的button。这里我自定义了一个ImageTextButton，,其中了XML文件中使用了自定义属性custom:icon="@drawable/icon" 。
下面是ImageTextButton源码：

package lhq.com.cn;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 ImageTextButton extends Button {private final String namespace = "http://blog.youkuaiyun.com/JavaTiger427";private int resourceId = 0;private Bitmap bitmap;public ImageTextButton(Context context, AttributeSet attrs) {super(context, attrs);setClickable(true);// 默认使用R.drawable.icon这张图片resourceId = attrs.getAttributeResourceValue(namespace, "icon",R.drawable.icon);bitmap = BitmapFactory.decodeResource(getResources(), resourceId);}@Overrideprotected void onDraw(Canvas canvas) {// 图片顶部居中显示int x = (this.getMeasuredWidth() - bitmap.getWidth()) >> 1;int y = 0;canvas.drawBitmap(bitmap, x, y, null);// 坐标需要转换，因为默认情况下Button中的文字居中显示// 这里需要让文字在底部显示canvas.translate(0,(this.getMeasuredHeight() >> 1) - (int) this.getTextSize());super.onDraw(canvas);}public void setIcon(Bitmap bitmap) {this.bitmap = bitmap;invalidate();}public void setIcon(int resourceId) {this.bitmap = BitmapFactory.decodeResource(getResources(), resourceId);invalidate();}}

Xml代码：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:custom="http://www.javaeye.com/custom" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <lhq.com.cn.ImageTextButton android:text="OK" custom:icon="@drawable/icon" android:id="@+id/button_0" android:layout_width="80dip" android:layout_height="80dip"/> <lhq.com.cn.ImageTextButton android:text="OK" custom:icon="@drawable/icon" android:id="@+id/button_1" android:layout_width="80dip" android:layout_height="100dip" android:textSize="30dip"/> <lhq.com.cn.ImageTextButton android:text="OK" custom:icon="@drawable/icon" android:id="@+id/button_2" android:layout_width="200dip" android:layout_height="200dip" android:textSize="30dip"/> </LinearLayout>