前言

在安卓中实现图文并茂的展示效果大体有两种方式：1.使用Android系统提供的WebView控件去直接展示一个HTML的网页 2.通过将HTML内容转化为Spanned格式在 TextView 中进行显示(也就是我们要讨论的一种)。虽然这两种方式都可以显示HTML内容，但是两者的实现过程，执行效率以及对用户交互的响应方式却有较大的不同。这些也决定了他们分别适合于不同的应用场景。一般来说，如果HTML的内容比较复杂，那还是建议使用WebView作为显示方式，因为TextView里面并不是支持所有的HTML标签，需要开发者额外增加对于标签的支持。这无异于增大了实现的复杂度。而对于显示格式化文本这样的需求，比如单纯图文混排这样的效果，使用TextView就再合适不过了，因为它相对于WebView更加轻量级，加载更高效。同时它也可以直接为图片和超链接提供点击事件。十分方便。好了，话不多说，先看看效果：

过程

首先我们自定义控件RichText,让其继承TextView。在RichText中实现setRichText()方法：

public void setRichText(String text) {

        Spanned spanned = Html.fromHtml(text, new GlideImageGetter(getContext(), this), null);
        super.setText(spanned);

    }

该方法就是调用android.text.Html类提供的fromHtml()方法将传递进来的HTML内容转化为Spanned对象。Android.text.Html 类提供的 fromHtml()方法如下：

public static Spanned fromHtml (String source, Html.ImageGetter imageGetter, Html.TagHandler tagHandler)

source指的是传进来的HTML内容，它是由一些标签包裹内容组成的。一个简单的例子如下：

"<h1>RichText</h1><p>Android平台下的富文本解析器</p><img title=\"\"src=\"http://image.tianjimedia.com/uploadImages/2015/129/56/J63MI042Z4P8.jpg\"><br><br>"

第三个参数tagHandler是对HTML内容中特殊标签的支持。我们此处可以设为null。
我们可以看出文本和超链接内容，TextView是可以通过读标签及其内容来直接显示。那么图片怎么办呢？而第二个参数Html.ImageGetter就是用来获取图片资源的。
ImageGetter只是一个接口，我们需要实现它的如下方法：

public Drawable getDrawable(String url) {}

该方法的参数url即为图片资源的URL值，是Html类将读取到的<img>标签下src值传递过来的。而我们这里要做的只是将对应URL的图片资源Drawable返回即可(是不是很简单)。读取网络图片资源，我们当然优先使用Glide了，为什么呢？因为它确实很好用啊，并且还支持GIF哦。不了解的小朋友可以看以下两个传送门：

关于Glide的基本使用请参考这篇使用Glide加载图片系列之一从不同的数据源加载图片
关于Glide与Picasso的对比请参考这篇Google推荐的图片加载库Glide介绍
另外Android大神stormzhang也觉得它很好的Android开源项目推荐之「图片加载到底哪家强」

接下来就是实现getDrawable方法了：

@Override
    public Drawable getDrawable(String url) {
        final UrlDrawable urlDrawable = new UrlDrawable();
        final GenericRequestBuilder load;
        final Target target;
        if(isGif(url)){
            load = Glide.with(mContext).load(url).asGif();
            target = new GifTarget(urlDrawable);
        }else {
            load = Glide.with(mContext).load(url).asBitmap();
            target = new BitmapTarget(urlDrawable);
        }
        targets.add(target);
        load.into(target);
        return urlDrawable;
    } 

上面的方法主要完成以下几点：
1.生成要返回的urlDrawable对象。
2.判断url是否指向一个GIF图片资源。(其实就是判断这个字串的结尾是否包含.gif而已)
3.根据图片资源的不同，通过Glide产生不同的GenericRequestBuilder(可以理解为包含不同资源Drawable的数据源)
4.生成不同的数据载体。用来接收GIFDrawable或者Bitmap.
5.将数据源注入载体。并通过载体的回调方法为urlDrawable赋值。
6.收集target以便在合适的机会下释放掉内存。
6.最后返回urlDrawable。

UrlDrawable的实现比较简单，如下：

class UrlDrawable extends BitmapDrawable{
    private Drawable drawable;

    @SuppressWarnings("deprecation")
    public UrlDrawable() {
    }
    @Override
    public void draw(Canvas canvas) {
        if (drawable != null)
            drawable.draw(canvas);
    }
    public Drawable getDrawable() {
        return drawable;
    }
    public void setDrawable(Drawable drawable) {
        this.drawable = drawable;
    }
}

GifTarget.java的实现如下所示：

private class GifTarget extends SimpleTarget<GifDrawable> {
       private final UrlDrawable urlDrawable;
       private  GifTarget(UrlDrawable urlDrawable) {
           this.urlDrawable = urlDrawable;
       }
       @Override
       public void onResourceReady(GifDrawable resource, GlideAnimation<? super GifDrawable> glideAnimation) {
           int w = MeasureUtil.getScreenSize(mContext).x;
           int hh=resource.getIntrinsicHeight();
           int ww=resource.getIntrinsicWidth() ;
           int high = hh * (w - 50)/ww;
           Rect rect = new Rect(20, 20,w-30,high);
           resource.setBounds(rect);
           urlDrawable.setBounds(rect);
           urlDrawable.setDrawable(resource);
           gifDrawables.add(resource);
           resource.setCallback(mTextView);
           resource.start();
           resource.setLoopCount(GlideDrawable.LOOP_FOREVER);
           mTextView.setText(mTextView.getText());
           mTextView.invalidate();
       }
   } 

而 BitmapTarget的具体实现如下：

private class BitmapTarget extends SimpleTarget<Bitmap> {
       private final UrlDrawable urlDrawable;
       public BitmapTarget(UrlDrawable urlDrawable) {
           this.urlDrawable = urlDrawable;
       }
       @Override
       public void onResourceReady(Bitmap resource, GlideAnimation<? super Bitmap> glideAnimation) {
           Drawable drawable = new BitmapDrawable(mContext.getResources(), resource);
           int w = MeasureUtil.getScreenSize(mContext).x;
           int hh=drawable.getIntrinsicHeight();
           int ww=drawable.getIntrinsicWidth() ;
           int high=hh*(w-50)/ww;
           Rect rect = new Rect(20, 20,w-30,high);
           drawable.setBounds(rect);
           urlDrawable.setBounds(rect);
           urlDrawable.setDrawable(drawable);
           mTextView.setText(mTextView.getText());
           mTextView.invalidate();
       }
   } 

可以发现以上两个Target的实现比较类似，只是可以提供的数据类型的不同，以及对拿到的resource处理的方式不一样。程序的入口是onResourceReady方法，我们拿到resource后，首先设置它要显示位置的边界。我们这里默认将每一个图片的宽度设置为屏幕宽度左右各减去20.高度按照原始宽高进行换算。然后为urlDrawable赋值，并刷新TextView。这样静态图片就能显示了。但是GIF还不行。因为GIF需要连续的View重绘才行。所以我们需要为GIF的drawable设置Drawable.CallBack回调。然后在回调函数里单独对TextView进行刷新动作。具体如下：

@Override
public void invalidateDrawable(Drawable who) {    
 Log.e("Text", "text is refreash");
 mTextView.invalidateOutline();
}

PS:上面的刷新代码我们最好不要使用mTextView.invalidate()这个方法，因为它会导致UI滑动时的卡顿。

接下来我们还可以在setRichText方法中为图片提供点击响应(超链接TextView默认是支持的)完成的代码如下：

 public void setRichText(String text) {
        Spanned spanned = Html.fromHtml(text, new GlideImageGetter(getContext(), this), null);
        SpannableStringBuilder spannableStringBuilder;
        if (spanned instanceof SpannableStringBuilder) {
            spannableStringBuilder = (SpannableStringBuilder) spanned;
        } else {
            spannableStringBuilder = new SpannableStringBuilder(spanned);
        }
        // 处理图片得点击事件
        ImageSpan[] imageSpans = spannableStringBuilder.getSpans(0, spannableStringBuilder.length(), ImageSpan.class);
        final List<String> imageUrls = new ArrayList<>();
        for (int i = 0, size = imageSpans.length; i < size; i++) {
            ImageSpan imageSpan = imageSpans[i];
            String imageUrl = imageSpan.getSource();
            int start = spannableStringBuilder.getSpanStart(imageSpan);
            int end = spannableStringBuilder.getSpanEnd(imageSpan);
            imageUrls.add(imageUrl);
            final int finalI = i;
            ClickableSpan clickableSpan = new ClickableSpan() {
                @Override
                public void onClick(View widget) {
                    if (onRichTextImageClickListener != null) {
                        onRichTextImageClickListener.imageClicked(imageUrls, finalI);
                    }
                }
            };
            ClickableSpan[] clickableSpans = spannableStringBuilder.getSpans(start, end, ClickableSpan.class);
            if (clickableSpans != null && clickableSpans.length != 0) {
                for (ClickableSpan cs : clickableSpans) {
                    spannableStringBuilder.removeSpan(cs);
                }
            }
            spannableStringBuilder.setSpan(clickableSpan, start, end, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        }
        super.setText(spanned);
        setMovementMethod(LinkMovementMethod.getInstance());
    }
    public void setOnRichTextImageClickListener(OnRichTextImageClickListener onRichTextImageClickListener) {
        this.onRichTextImageClickListener = onRichTextImageClickListener;
    }
    public interface OnRichTextImageClickListener {
        /**
         * 图片被点击后的回调方法
         *
         * @param imageUrls 本篇富文本内容里的全部图片
         * @param position  点击处图片在imageUrls中的位置
         */
        void imageClicked(List<String> imageUrls, int position);
    }

为RichText绑定图片点击操作：

 mBodyTv.setOnRichTextImageClickListener(new RichText.OnRichTextImageClickListener(){
    @Override
    public void imageClicked(List<String> imageUrls, int position){
        Toast.makeText(MainActivity.this, imageUrls.get(position),Toast.LENGTH_SHORT).show();
    }

});

最后附上这个Demo的源码吧——github地址

希望在Android学习的路上，大家共同成长！