效果圖

rich.jpg

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);
 //追加一個icon
spannable.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);
}

@Override
public 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("http://www.lxweimin.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);
//ForegroundColorSpan
ForegroundColorSpan 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