Android的图文混合实现之TextView+html加载图片
-
最近在进行notepad的拓展开发,就想要能够在里面进行图片的添加删除,图文混合一起。这种应该要怎么才能实现呢?于是而我在网上搜索了大量的资料。发现实现这种有好几种方法。
-
TextView:文本展示控件,相信大家肯定都很熟悉了。
在textview中可以用这几种方式实现图片的显示
1.XML文件中指定属性值(activity_main.xml)
在TextView的左上右下显示图片,可用
android:drawableLeft
android:drawableTop
android:drawableRight
android:drawableBottom
代码:
<TextView
android:id="\@+id/textview_01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="\@drawable/ic_thumb_up_black_24dp"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.382" \>
效果图:
2. 通过解析HTML来显示图片
直接调用textView的setText(Html.fromHtml(html))的方法,会导致图片加载不出来,形成一个个小方块,
textView.setText(Html.fromHtml(“html”,null,null));
在htmldemo的文件夹下再创建两个子文件夹:html(里面是html的拓展类)
Imageload(里面是图片加载类)
文件目录如下:
各个类的作用:
html | HtmlUtils: | 调用接口Spanned,在TextView中显示html |
---|---|---|
URLDrawable: | 返回异步回调的drawable对象 | |
URLImageGetter: | 加载获取图片<img>标签,获得图片内容 | |
URLTagHandler: | 标签解析器:处理未知标签 | |
ZoomImageView: | 多点触控,手势图片缩放控件 | |
imageload | CompressTransformation: | 图片压缩转换 |
ImageLoad : | 图片加载url | |
ImageTransform: | 图片缩放转换 |
(1)加载图片:
用一个类实现接口 Html的ImageGetter
继承于 ImageGetter,重写 getDrawable (String source)
方法。当解析到<img>标签时就会回调getDrawable()方法,通过异步操作,读取本地/网络资源,获得Drawable
对象
URLImageGetter
//URLImageGetter:实现Html类中一个接口ImageGetter,用于检索获取HTML中的<img>标签,给img标签获取图片内容
//URLImageGetter:实现Html类中一个接口ImageGetter,用于检索获取HTML中的<img>标签,给img标签获取图片内容
public class URLImageGetter implements ImageGetter {
Context c;
TextView tv_image;
private List<Target> targets = new ArrayList<>();
public URLImageGetter(TextView t, Context c) {
this.tv_image = t;
this.c = c;
tv_image.setTag(targets);
}
@Override
public Drawable getDrawable(final String source) {
// 获取图片的url和标签
final URLDrawable urlDrawable = new URLDrawable();
final Target target = new Target() {
@Override
public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom from) {
Drawable drawable = new BitmapDrawable(bitmap);
drawable.setBounds(0, 0, bitmap.getWidth(), bitmap.getHeight());
urlDrawable.setDrawable(drawable);
urlDrawable.setBounds(0, 0, bitmap.getWidth(), bitmap.getHeight());
tv_image.invalidate();
tv_image.setText(tv_image.getText());
}
@Override
public void onBitmapFailed(Drawable errorDrawable) {
//加载失败
errorDrawable.setBounds(0, 0, errorDrawable.getIntrinsicWidth(), errorDrawable.getIntrinsicHeight());
urlDrawable.setBounds(0, 0, errorDrawable.getIntrinsicWidth(), errorDrawable.getIntrinsicHeight());
urlDrawable.setDrawable(errorDrawable);
tv_image.invalidate();
}
@Override
public void onPrepareLoad(Drawable placeHolderDrawable) {
//准备加载
placeHolderDrawable.setBounds(0, 0, placeHolderDrawable.getIntrinsicWidth(), placeHolderDrawable.getIntrinsicHeight());
urlDrawable.setBounds(0, 0, placeHolderDrawable.getIntrinsicWidth(), placeHolderDrawable.getIntrinsicHeight());
urlDrawable.setDrawable(placeHolderDrawable);
tv_image.invalidate();
}
};
targets.add(target);
ImageLoad.loadPlaceholder(c, source, target);
return urlDrawable;
}
(2)返回异步回调的drawable
怎么把异步回调的drawable返回,因为图片是异步加载的,所以我们要先建立一个BitmapDrawable,当没有异步加载的时候用来getDrawable的返回。可以包装一个drawable,继承于html.drawable,当返回正确drawable的时候填充进去,刷新一下就可以显示内容
URLDrawable
public class URLDrawable extends BitmapDrawable {
private Drawable drawable;
@Override
public void draw(Canvas canvas) {
if (drawable != null) {
drawable.draw(canvas);
}
}
public void setDrawable(Drawable drawable) {
this.drawable = drawable;
}
加载出来效果: