Android TextView富文本显示图文混排,图片可以点击放大查看并解决连续多张图片时点击错位问题
首先,textView富文本实现图文混排效果网上一搜一大把,我写这篇文章的目的也是为了有需要的伙伴少浪费点时间,毕竟当时我为了完成这个需求不知道查了多少文档,看了N位大神的博客,也出现了各种bug,各种尝试,不知道走了多少弯路,都想跟产品经理说这个需求做不了了,不过最后还是实现了产品的需求,希望能帮到大家。
当时产品的需求是后台返回一串富文本字符串,App端展示图文混排,并且实现图片能够点击放大查看。
我这里的富文本数据都是后台返回的,App端并没有写死的数据,后台返回的就是一串带有Html标签的字符串,下面就是一段富文本数据:
<p>\r\n\t是地方法规水电费<img src=\"http:\/\/tu.chdesign.cn\/test\/pics\/report\/2019\/01\/21\/07c01b29b2874864bec1cd67e2f8b2e4.png?x-oss-process=image\/resize,w_800\" title=\"from clipboard\" alt=\"from clipboard\" \/>防守打法上我的号跟我聊天<img src=\"http:\/\/tu.chdesign.cn\/test\/pics\/report\/2019\/01\/21\/0f82cab339824cb588f4a3b04d83b515.png?x-oss-process=image\/resize,w_800\" title=\"from clipboard\" alt=\"from clipboard\" \/>\r\n<\/p>\r\n<p>\r\n\t就好玩了问题已经荣誉沃\r\n<\/p>\r\n<p>\r\n\t<img src=\"http:\/\/tu.chdesign.cn\/test\/pics\/report\/2019\/01\/21\/323b66b0a1ed44088a8f0e2b2c9334b0.png?x-oss-process=image\/resize,w_800\" title=\"from clipboard\" alt=\"from clipboard\" \/>尔特顾问是现代化和是否官方时候给水电费嘎达\r\n<\/p>\r\n<p>\r\n\t<img src=\"http:\/\/tu.chdesign.cn\/test\/pics\/report\/2019\/01\/21\/6c300aa2e32b4c129a0a3cfa529156c2.png?x-oss-process=image\/resize,w_800\" title=\"from clipboard\" alt=\"from clipboard\" \/>\r\n<\/p>"
我们这里使用Android自带的Html.fromHtml来解析Html标签:
textview.setText(Html.fromHtml(source, imageGetter, tagHandler));
查看源码:
/**
* Returns displayable styled text from the provided HTML string with the legacy flags
* {@link #FROM_HTML_MODE_LEGACY}.
*
* @deprecated use {@link #fromHtml(String, int, ImageGetter, TagHandler)} instead.
*/
@Deprecated
public static Spanned fromHtml(String source, ImageGetter imageGetter, TagHandler tagHandler) {
return fromHtml(source, FROM_HTML_MODE_LEGACY, imageGetter, tagHandler);
}
这边的三个参数的意思:第一个参数就是那一串富文本字符串了,第二个参数就是解析Html标签中的图片信息了,第三个就是自定义标签,各种Span标签都可以在这里自定义实现,我们的图片点击事件就是在第三个参数中实现的。一般来说,如果只要实现图文混排效果而不要点击图片的话使用前两个参数就可以了,最后一个给null就好。
首先,我们需要重写ImageGetter 类,获取图片并展示:
package 自己的包名;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.text.Html;
import android.view.View;
import android.widget.TextView;
import com.nostra13.universalimageloader.core.ImageLoader;
import com.nostra13.universalimageloader.core.listener.SimpleImageLoadingListener;
/**
* HTML.fromHtml解析图片标签
* <p>
* Created by
*/
public class UrlImageGetter implements Html.ImageGetter {
private Context context;
private TextView textview;
private int width;
public UrlImageGetter(Context c, TextView t) {
this.context = c;
this.textview = t;
width = c.getResources().getDisplayMetrics().widthPixels;
}
@Override
public Drawable getDrawable(String source) {
final UrlDrawable urlDrawable = new UrlImageGetter.UrlDrawable();
ImageLoader.getInstance().loadImage(source,
new SimpleImageLoadingListener() {
@Override
public void onLoadingComplete(String imageUri, View view,
Bitmap loadedImage)