在本例中要实现一个可以在文本前方添加一个图像(可以是任何Android系统支持的图像格式)的TextView组件。在编写代码之前,先看一下Android组件的配置代码。
<TextView android:id="@+id/textview1" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:text="textview1" />
上面的代码配置了一个标准的TextView组件。在这段代码中主要有两部分组成:组件标签(<TextView>)和标签属性(android:id、android:layout_width等)。需要注意的是,在所有的标签属性前面都需要加了一个命名空间(android)。实际上,android命名空间的值是在Android系统中预定义的,所有Android系统原有的组件在配置时都需要在标签属性前加android。
对于定制组件,可以有如下3种选择。
1. 仍然沿用android命名空间。
2. 改用其他的命名空间。
3. 不使用命名空间。
虽然上面3种选择从技术上说都没有问题,但作者建议使用第2种方式(尤其是对外发布的组件),这是因为在使用定制组件时,可能需要指定相同名称的属性,在这种情况下,可以通过命名空间来区分这些属性,例如,有两个命名空间:android和mobile,这时可以在各自的命名空间下有相同名称的属性,如android:src和mobile:src。在本例中定义了一个mobile命名空间,因此,在配置本例实现的组件时需要在属性前加mobile。
实现定制组件的一个重要环节就是读取配置文件中相应标签的属性值,由于本例要实现的组件类需要从TextView类继承,因此,只需要覆盖TextView类中带AttributeSet类型参数的构造方法即可,该构造方法的定义如下:
public TextView(Context context, AttributeSet attrs)
在构造方法中可以通过AttributeSet接口的相应getter方法来读取指定的属性值,如果在配置属性时指定了命名空间,需要在使用getter方法获得属性值时指定这个命名空间,如果未指定命名空间,则将命名空间设为null即可。
IconTextView是本例要编写的组件类,该类从TextView继承,在onDraw方法中将TextView中的文本后移,并在文本的前方添加了一个图像,该图像的资源ID通过mobile:iconSrc属性来指定。IconTextView类的代码如下:
package net.blogjava.mobile.widget;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.widget.TextView;
public class IconTextView extends TextView
{
// 命名空间的值
private final String namespace = "http://net.blogjava.mobile";
// 保存图像资源ID的变量
private int resourceId = 0;
private Bitmap bitmap;
public IconTextView(Context context, AttributeSet attrs)
{
super(context, attrs);
// getAttributeResourceValue方法用来获得组件属性的值,在本例中需要通过该方法的第1个参数指
// 定命名空间的值。该方法的第2个参数表示组件属性名(不包括命名空间名称),第3个参数表示默
// 认值,也就是如果该属性不存在,则返回第3个参数指定的值
resourceId = attrs.getAttributeResourceValue(namespace, "iconSrc", 0);
if (resourceId > 0)
// 如果成功获得图像资源的ID,装载这个图像资源,并创建Bitmap对象
bitmap = BitmapFactory.decodeResource(getResources(), resourceId);
}
@Override
protected void onDraw(Canvas canvas)
{
if (bitmap != null)
{
// 从原图上截取图像的区域,在本例中为整个图像
Rect src = new Rect();
// 将截取的图像复制到bitmap上的目标区域,在本例中与复制区域相同
Rect target = new Rect();
src.left = 0;
src.top = 0;
src.right = bitmap.getWidth();
src.bottom = bitmap.getHeight();
int textHeight = (int) getTextSize();
target.left = 0;
// 计算图像复制到目标区域的纵坐标。由于TextView组件的文本内容并不是
// 从最顶端开始绘制的,因此,需要重新计算绘制图像的纵坐标
target.top = (int) ((getMeasuredHeight() - getTextSize()) / 2) + 1;
target.bottom = target.top + textHeight;
// 为了保证图像不变形,需要根据图像高度重新计算图像的宽度
target.right = (int) (textHeight * (bitmap.getWidth() / (float) bitmap.getHeight()));
// 开始绘制图像
canvas.drawBitmap(bitmap, src, target, getPaint());
// 将TextView中的文本向右移动一定的距离(在本例中移动了图像宽度加2个象素点的位置)
canvas.translate(target.right + 2, 0);
}
super.onDraw(canvas);
}
}
在编写上面代码时需要注意如下3点:
1. 需要指定命名空间的值。该值将在<LinearLayout>标签的xmlns:mobile属性中定义。
2. 如果在配置组件的属性时指定了命名空间,需要在AttributeSet 接口的相应getter方法中的第1个参数指定命名空间的值,而第2个参数只需指定不带命名空间的属性名即可。
3. TextView类中的onDraw方法一定要在translate方法后面执行,否则系统不会移动TextView中的文本。
下面在main.xml文件中配置了7个IconTextView组件,分别设置了不同的字体大小,同时,文本前面的图像也会随着字体大小的变化而放大或缩小,配置代码如下:
<?xml version="1.0" encoding="utf-8"?>
<!-- 在下面的标签中通过xmlns:mobile属性定义了一个命名空间 -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:mobile="http://net.blogjava.mobile" android:orientation="vertical"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<!-- mobile:iconSrc是可选属性,如果未设置该属性,则IconTextView与TextView的效果相同 -->
<!-- 由于IconTextView和Main类不在同一个包中,因此,需要显式指定package -->
<net.blogjava.mobile.view.IconTextView
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:text="第一个笑脸" mobile:iconSrc="@drawable/small" />
<net.blogjava.mobile.widget.IconTextView
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:text="第二个笑脸" android:textSize="24dp" mobile:iconSrc="@drawable/small" />
<net.blogjava.mobile.widget.IconTextView
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:text="第三个笑脸" android:textSize="36dp" mobile:iconSrc="@drawable/small" />
<net.blogjava.mobile.widget.IconTextView
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:text="第四个笑脸" android:textSize="48dp" mobile:iconSrc="@drawable/small" />
<net.blogjava.mobile.widget.IconTextView
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:text="第五个笑脸" android:textSize="36dp" mobile:iconSrc="@drawable/small" />
<net.blogjava.mobile.widget.IconTextView
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:text="第六个笑脸" android:textSize="24dp" mobile:iconSrc="@drawable/small" />
<net.blogjava.mobile.widget.IconTextView
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:text="第七个笑脸" mobile:iconSrc="@drawable/small" />
</LinearLayout>
运行本实例后,将显示如图1所示的效果。
注意:虽然很多人认为组件的属性必须以android命名空间开头,该命名空间的值必须是http://schemas.android.com/apk/res/android。实际上,只是命名空间的值必须是http://schemas.android.com/apk/res/android而已,命名空间的名称可以是任何值,如下面的代码所示:
<?xml version="1.0" encoding="utf-8"?>
<!-- 将android换成了abcd -->
<LinearLayout xmlns:abcd="http://schemas.android.com/apk/res/android"
abcd:orientation="vertical" abcd:layout_width="fill_parent"
abcd:layout_height="fill_parent">
</LinearLayout>
分享到:
相关推荐
textview加载带图片的html片段并实现按图片原始比例缩放图片
在TextView中添加图片的三种方式总结 1.使用SpannableString+ImageSpan 2.android:drawableBottom... 3。扩展TextView 复写onDraw
Android textview 文字中间加上图片
自定义TextView显示Gif,先使用GifDecoder将Gif文件解析成一张张图片,然后通过ImageSpan将图片显示在TextView中,定义一个线程不断刷新图片
TextView显示html的文本、图片
Android中TextView显示图片简单的Demo,利用TextView解析和显示HTML代码的功能实现。
TextView增加图片和超连接 显示图片和超连接
一个带图像的TextView 示例程序 2013.10
Android的TextView中显示图片和图像的方法
TextView加载Html图片
实现TextView 显示Gif 动态图片
Android TextView的图片和文字居中探索,获取TextView中图片和文字的宽度和高度,并根据TextView的宽高计算居中所需要的偏移量
TextView加载网络图片HTMLIMG,实用型的东西,拿出来大家学习学习
Android系统默认给TextView插入图片提供了三种方式: 1、ImageSpan 2、Html.ImageGetter 3、TextView.setCompoundDrawables(left, top, right, bottom) 1、TextView使用ImageSpan显示图片 ImageSpan span = new ...
Android TextView中显示图片的4种方式,具体见blog:http://blog.csdn.net/hwe_xc/article/details/50906220
android Textview 实现html 图片点击 两种方式 一种是用webview ,调用jsInterface实现 另一种是 textview 使用Html.from()方法
有时候看到原型图上要求图片和文字对齐,但是直接使用TextView的话总是有一段空白,这里直接继承TextView重写onDraw方法去掉上下边距,但是简单粗暴,导致只能显示文字,没有TextView其他的功能了。
android下textview 显示html片段,可以显示文字和图片混排,图片可以是网络图片
1、TextView实现图片混排,并且显示当地SD卡中的图片。 2、TextView图文混排时,实现图片的点击放大功能。 3、TextView图文混排时,实现图片的点击缩放功能。(根据手势缩放) 4、里面附带有大图片(5M及其以上)的...
这个示例用于演示 带边框的TextView ,9-patch格式的图片