最近做项目功能时，需要在TextView中展示图文，刚开始做的时候以为很简单，只需要用个ImageView跟TextView来展示就行了，可是发现这样做，不能实现我们需要的效果，这就需要涉及到富文本TextView来展示图文，下面介绍静态图片的图文和动态GIF的图文两种展示方式：
静态图片的图文：
效果如下：
代码：
String content = "“我最糟糕的时刻，就是我希望自己当初能与那个年轻人（科比-布莱恩特）有更好的沟通，”奥尼尔说道，“因为人们常说，如果我们俩没有分开，我们可能可以一起得到6、7个冠军。看着勒布朗（詹姆斯）过去7年做到的事情，我也常对自己说，如果我们当初能够解决好，我们可能会得到6、7个甚至8个冠军";SpannableString sp = new SpannableString(content);//获取一张图片Drawable drawable = getDrawable(R.drawable.activity_jing);drawable.setBounds(0, 0, 20, 20);//设置展示图片的大小//drawable.setBounds(0, 0, drawable.getMinimumWidth(), drawable.getMinimumHeight());//设置展示图片的大小//居中对齐imageSpanCenterAlignImageSpan imageSpan = new CenterAlignImageSpan(drawable);sp.setSpan(imageSpan, 0, 1, ImageSpan.ALIGN_BASELINE);//0,1表示展示图片的起始位置,占一个字的位置textOne.setText(sp);
CenterAlignImageSpan工具类：
public class CenterAlignImageSpan extends ImageSpan {public CenterAlignImageSpan(Drawable drawable) {super(drawable);}public CenterAlignImageSpan(Bitmap b) {super(b);}@Overridepublic void draw(@NonNull Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom,@NonNull Paint paint) {Drawable b = getDrawable();Paint.FontMetricsInt fm = paint.getFontMetricsInt();int transY = (y + fm.descent + y + fm.ascent) / 2 - b.getBounds().bottom / 2;//计算y方向的位移canvas.save();canvas.translate(x, transY);//绘制图片位移一段距离b.draw(canvas);canvas.restore();}}
动态GIF的图文：
效果如下：
首先我们使用的html，解析成Spanned，然后设置Span来实现图文混排的，代码如下：
public class ImageTextUtil {public static Drawable getUrlDrawable(String source, TextView mTextView) {GlideImageGetter imageGetter = new GlideImageGetter(mTextView.getContext(),mTextView);return imageGetter.getDrawable(source);}public static void setImageText(TextView tv, String html){Spanned htmlStr = Html.fromHtml(html);if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {tv.setLayerType(View.LAYER_TYPE_SOFTWARE, null);tv.setTextIsSelectable(true);}tv.setText(htmlStr);tv.setMovementMethod(LinkMovementMethod.getInstance());CharSequence text = tv.getText();if(text instanceof Spannable){int end = text.length();Spannable sp = (Spannable)tv.getText();URLSpan[] urls=sp.getSpans(0, end, URLSpan.class);ImageSpan[] imgs = sp.getSpans(0,end,ImageSpan.class);StyleSpan[] styleSpens = sp.getSpans(0,end,StyleSpan.class);ForegroundColorSpan[] colorSpans = sp.getSpans(0,end,ForegroundColorSpan.class);SpannableStringBuilder style=new SpannableStringBuilder(text);style.clearSpans();for(URLSpan url : urls){style.setSpan(url,sp.getSpanStart(url),sp.getSpanEnd(url), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);ForegroundColorSpan colorSpan = new ForegroundColorSpan(Color.parseColor("#FF12ADFA"));style.setSpan(colorSpan,sp.getSpanStart(url),sp.getSpanEnd(url), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);}for(ImageSpan url : imgs){ImageSpan span = new ImageSpan(getUrlDrawable(url.getSource(),tv),url.getSource());style.setSpan(span,sp.getSpanStart(url),sp.getSpanEnd(url), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);}for(StyleSpan styleSpan : styleSpens){style.setSpan(styleSpan,sp.getSpanStart(styleSpan),sp.getSpanEnd(styleSpan), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);}for(ForegroundColorSpan colorSpan : colorSpans){style.setSpan(colorSpan,sp.getSpanStart(colorSpan),sp.getSpanEnd(colorSpan), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);}tv.setText(style);}}}
上面代码图片展示是通过ImageSpan来实现的，但默认的图片展示的gif图片是静态取第一帧图片，我们可以在获取图片时候使用Glide，来实现播放gif,glide是图片加载库，这个库被广泛的运用在google的开源项目中，包括google I/O大会上发布的官方app。Glide和Picasso有90%的相似度，准确的说，就是Picasso的克隆版本。但是在细节上还是有不少区别的。而且性能上更加优化。
把Glide引入到我们项目中，然后在创建UrlDrawable 和 GlideImageGetter
代码可以参考：底部公众号回复"富文本"即可获取
方法调用：
String content = "“我最糟糕的时刻，就是我希望自己当初能与那个年轻人（科比-布莱恩特）有更好的沟通，”奥尼尔说道，“因为人们常说，如果我们俩没有分开，我们可能可以一起得到6、7个冠军。看着勒布朗（詹姆斯）过去7年做到的事情，我也常对自己说，如果我们当初能够解决好，我们可能会得到6、7个甚至8个冠军";String html = "<img src=\"file:///android_asset/i8live_activity_jing.gif\">" + content;ImageTextUtil.setImageText(textTwo, html);
小编整理了一份Android电子书籍，需要的童鞋关注底部公众号(longxuanzhigu)回复：“e_books” 即可获取哦！
以下是个人公众号(longxuanzhigu)，之后发布的文章会同步到该公众号，方便交流学习Android知识及分享个人爱好文章：
