前言
在安卓中实现图文并茂的展示效果大体有两种方式：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学习的路上，大家共同成长！
