Android TextView富文本显示图文混排,图片可以点击放大查看并解决连续多张图片时点击错位问题

本文介绍了如何在Android中实现TextView富文本显示图文混排,并处理图片点击放大查看时可能出现的点击错位问题。通过自定义ImageGetter和TagHandler,结合第三方图片加载库,解决了连续多张图片的点击事件错位。最终通过重写OnTouchListener解决了最后一张图片点击问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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) 
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值