干货！！！Android富文本实现图文混排

效果图

rich.jpg

像图中的效果，大家在开发并不少见，大家可能不知道android提供了实现图文混排的类。大家或许会写一个布局或者使用drawableLeft这个属性实现文本的左侧图标。

android提供了这两个类SpannableString和SpannableStringBuilder实现图文混排

SpannableString其实和String一样，都是一种字符串类型，SpannableString可以直接作为TextView的显示文本，不同的是SpannableString可以通过使用其方法setSpan方法实现字符串各种形式风格的显示,重要的是可以指定设置的区间，也就是为字符串指定下标区间内的子字符串设置格式。
SpannableStringBuilder应该开发的小伙伴知道StringBuilder，可以使用append()方法实现字符串拼接，非常方便。同样，SpannableString中也有SpannableStringBuilder，顾名思义，就是实现对，SpannableString的一个拼接效果，同样是append()方法，可以实现各种风格效果的SpannableString拼接，非常实用。

SpannableStringBuilder和SpannableString主要通过使用setSpan(Object what, int start, int end, int flags)改变文本样式。 对应的参数：

start：指定Span的开始位置end：指定Span的结束位置，并不包括这个位置。flags：取值有如下四个Spannable.SPAN_EXCLUSIVE_INCLUSIVE：在 Span前面输入的字符不应用 Span的效果，在后面输入的字符应用Span效果。Spannable.SPAN_INCLUSIVE_EXCLUSIVE：在 Span前面输入的字符应用 Span 的效果，在后面输入的字符不应用Span效果。Spannable.SPAN_INCUJSIVE_INCLUSIVE：在 Span前后输入的字符都应用 Span 的效果。Spannable.SPAN_EXCLUSIVE_EXCLUSIVE：前后都不包括。what： 对应的各种Span，不同的Span对应不同的样式。已知的可用类有：BackgroundColorSpan : 文本背景色ForegroundColorSpan : 文本颜色MaskFilterSpan : 修饰效果，如模糊(BlurMaskFilter)浮雕RasterizerSpan : 光栅效果StrikethroughSpan : 删除线SuggestionSpan : 相当于占位符UnderlineSpan : 下划线AbsoluteSizeSpan : 文本字体（绝对大小）DynamicDrawableSpan : 设置图片，基于文本基线或底部对齐。ImageSpan : 图片RelativeSizeSpan : 相对大小（文本字体）ScaleXSpan : 基于x轴缩放StyleSpan : 字体样式：粗体、斜体等SubscriptSpan : 下标（数学公式会用到）SuperscriptSpan : 上标（数学公式会用到）TextAppearanceSpan : 文本外貌（包括字体、大小、样式和颜色）TypefaceSpan : 文本字体URLSpan : 文本超链接ClickableSpan : 点击事件

解释了这么多，看代码怎么实现吧，其实很简单！

第一行文字的效果代码

String text = "[icon] " + charSequence;
SpannableString spannable = new SpannableString(text);
Drawable drawable = this.getResources().getDrawable(R.mipmap.umeng_socialize_qq);
drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());//第一个参数drawable 第二个参数对齐方式ImageSpan imageSpan = new ImageSpan(drawable, ImageSpan.ALIGN_BASELINE);
spannable.setSpan(imageSpan, 0, 6, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mIconSpan.setText(spannable);

第二行文字的效果代码

String text = "[icon] ";
SpannableStringBuilder spannable = new SpannableStringBuilder(text);

Drawable drawable1 = this.getResources().getDrawable(R.mipmap.umeng_socialize_qq);
drawable1.setBounds(0, 0, drawable1.getIntrinsicWidth(),  drawable1.getIntrinsicHeight());
ImageSpan imageSpan1 = new ImageSpan(drawable1, ImageSpan.ALIGN_BASELINE);
spannable.setSpan(imageSpan1, 0, 6, Spanned.SPAN_INCLUSIVE_EXCLUSIVE); //追加一个iconspannable.append("[icon] " + charSequence);
Drawable drawable2this.getResources().getDrawable(R.mipmap.umeng_socialize_wechat);
drawable2.setBounds(0, 0, drawable2.getIntrinsicWidth(), drawable1.getIntrinsicHeight());
ImageSpan imageSpan2 = new ImageSpan(drawable2, ImageSpan.ALIGN_BASELINE);
spannable.setSpan(imageSpan2, 7, 13, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mMultiIconSpan.setText(spannable);

小编写到这里的时候，看下了运行的结果，发现图片怎么不居中呀，真正开发中，这种效果是不可取的。百度了下一下主要看这样一行代码客mageSpan imageSpan = new ImageSpan(drawable, ImageSpan.ALIGN_BASELINE); ImageSpan.ALIGN_BASELINE是指以文字的基线对齐

 /**
 * A constant indicating that the bottom of this span should be aligned
 * with the bottom of the surrounding text, i.e., at the same level as the
 * lowest descender in the text.
 */public static final int ALIGN_BOTTOM = 0;/**
 * A constant indicating that the bottom of this span should be aligned
 * with the baseline of the surrounding text.
 */public static final int ALIGN_BASELINE = 1;

点击进去看下源码的解释，原来ALIGN_BOTTOM是以文字的底部对齐 ，ALIGN_BASELINE是以文字的基线对齐，看到这里也知道图片为什么不居中了。还不懂的推荐大家看两篇博客https://blog.csdn.net/richardli1228/article/details/51180253
https://blog.csdn.net/u012551350/article/details/51361778
这两篇文篇很详细的说明了怎么绘制文本和文本的基线是怎么计算的？

**如果要实现图片居中，怎么办？我们把图片在Y轴的方向往下移动一段距离，自定义一个CenterAlignImageSpan继承ImageSpan **

public class CenterAlignImageSpan extends ImageSpan {public CenterAlignImageSpan(Drawable d) {    super(d);
}public CenterAlignImageSpan(Drawable d, int verticalAlignment) {    super(d, verticalAlignment);
}@Overridepublic void draw(@NonNull Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom,
                 @NonNull Paint paint) {
    Drawable drawable = getDrawable();
    Paint.FontMetricsInt fm = paint.getFontMetricsInt();    //计算y方向的位移
    int translationY = (y + fm.descent + y + fm.ascent) / 2 - drawable.getBounds().bottom / 2;
    canvas.save();    //绘制图片位移一段距离
    canvas.translate(x, translationY);
    drawable.draw(canvas);
    canvas.restore();
}
}

主要的原理是把图片绘制在字体的descent线和ascent的中点位置。还是那句话，先看上面的两篇博客。

第三行文字的效果代码

String text = "[icon] " + charSequence;
SpannableString spannable = new SpannableString(text);
Drawable drawable = this.getResources().getDrawable(R.mipmap.umeng_socialize_qzone);
drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());//图片居中CenterAlignImageSpan imageSpan = new CenterAlignImageSpan(drawable, ImageSpan.ALIGN_BASELINE);
spannable.setSpan(imageSpan, 0, 6, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mVerticalCenterIcon.setText(spannable);

有时候在开发中需要给一些的特殊的文字，设置一些超链接，颜色，背景色等等。
第四行文字的效果代码

SpannableString spannableString = new SpannableString(charSequence);//URLSpan URLSpan urlSpan = new URLSpan("https://www.jianshu.com/u/9006081639f4");
spannableString.setSpan(urlSpan, 4, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mUrlSpan.setMovementMethod(LinkMovementMethod.getInstance());
mUrlSpan.setHighlightColor(ContextCompat.getColor(this, R.color.colorAccent));
mUrlSpan.setText(spannableString);

第五行文字的效果代码

SpannableString spannableString = new SpannableString(charSequence);//ForegroundColorSpanForegroundColorSpan colorSpan = new ForegroundColorSpan(ContextCompat.getColor(this, R.color.colorPrimaryDark));
spannableString.setSpan(colorSpan, 5, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mForegroundColorSpan.setText(spannableString);

写了这么几个例子，相信大家对图片混排很清楚了，至于一些其它的文字的特性效果，需要大家去扩展了，比如文字的模糊、字体的样式、图片在文字的中间或者右边等等。

源码地址：https://github.com/StevenYan88/RichTextView.git