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

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) 
  • 4
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
安卓中的TextView控件默认是不支持文本的,即无法直接实现文字可点的效果。不过我们可以通过一些方法来实现这个需求。 一种常用的方法是使用SpannableString类来实现文本文字可点的效果。SpannableString是一个可以调整文字的样式和属性的类。我们可以使用它的setSpan()方法来设置文字的点事件。 首先,我们需要创建一个ClickableSpan对象,它是一个可以实现文字可点的类。在ClickableSpan的onClick()方法中,我们可以编写点文字后的逻辑代码。 ``` ClickableSpan clickableSpan = new ClickableSpan() { @Override public void onClick(View widget) { // 在这里编写点文字后的逻辑代码 } }; ``` 然后,我们创建一个SpannableString对象,并使用setSpan()方法将ClickableSpan对象应用于需要点的文字范围。 ``` SpannableString spannableString = new SpannableString("需要设置点事件的文字"); spannableString.setSpan(clickableSpan, startIndex, endIndex, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE); ``` 其中,startIndex和endIndex分别表示需要设置点事件的文字的起始和结束位置。 接下来,我们将SpannableString对象设置给TextView控件,并为TextView控件设置setMovementMethod()方法,使其具有点效果。 ``` textView.setText(spannableString); textView.setMovementMethod(LinkMovementMethod.getInstance()); ``` 最后,我们就可以在TextView中实现文字可点的效果了。 需要注意的是,在使用这种方法时,TextView的同时三个属性要设置为true:android:focusable="true"、android:focusableInTouchMode="true"和android:clickable="true",以确保TextView本身可以获得焦点和点事件。 以上就是使用SpannableString实现安卓TextView文本文字可点的方法。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值