效果圖

rich.jpg

像圖中的效果，大家在開發(fā)并不少見，大家可能不知道android提供了實現(xiàn)圖文混排的類。大家或許會寫一個布局或者使用drawableLeft這個屬性實現(xiàn)文本的左側(cè)圖標(biāo)。

android提供了這兩個類SpannableString和SpannableStringBuilder實現(xiàn)圖文混排

SpannableString其實和String一樣，都是一種字符串類型，SpannableString可以直接作為TextView的顯示文本，不同的是SpannableString可以通過使用其方法setSpan方法實現(xiàn)字符串各種形式風(fēng)格的顯示,重要的是可以指定設(shè)置的區(qū)間，也就是為字符串指定下標(biāo)區(qū)間內(nèi)的子字符串設(shè)置格式。

SpannableStringBuilder應(yīng)該開發(fā)的小伙伴知道StringBuilder，可以使用append()方法實現(xiàn)字符串拼接，非常方便。同樣，SpannableString中也有SpannableStringBuilder，顧名思義，就是實現(xiàn)對，SpannableString的一個拼接效果，同樣是append()方法，可以實現(xiàn)各種風(fēng)格效果的SpannableString拼接，非常實用。

SpannableStringBuilder和SpannableString主要通過使用setSpan(Object what, int start, int end, int flags)改變文本樣式。 對應(yīng)的參數(shù)：

start：指定Span的開始位置

end：指定Span的結(jié)束位置，并不包括這個位置。

flags：取值有如下四個

Spannable.SPAN_EXCLUSIVE_INCLUSIVE：在 Span前面輸入的字符不應(yīng)用 Span的效果，在后面輸入的字符應(yīng)用Span效果。

Spannable.SPAN_INCLUSIVE_EXCLUSIVE：在 Span前面輸入的字符應(yīng)用 Span 的效果，在后面輸入的字符不應(yīng)用Span效果。

Spannable.SPAN_INCUJSIVE_INCLUSIVE：在 Span前后輸入的字符都應(yīng)用 Span 的效果。

Spannable.SPAN_EXCLUSIVE_EXCLUSIVE：前后都不包括。

what： 對應(yīng)的各種Span，不同的Span對應(yīng)不同的樣式。已知的可用類有：

BackgroundColorSpan : 文本背景色

ForegroundColorSpan : 文本顏色

MaskFilterSpan : 修飾效果，如模糊(BlurMaskFilter)浮雕

RasterizerSpan : 光柵效果

StrikethroughSpan : 刪除線

SuggestionSpan : 相當(dāng)于占位符

UnderlineSpan : 下劃線

AbsoluteSizeSpan : 文本字體(絕對大小)

DynamicDrawableSpan : 設(shè)置圖片，基于文本基線或底部對齊。

ImageSpan : 圖片

RelativeSizeSpan : 相對大小(文本字體)

ScaleXSpan : 基于x軸縮放

StyleSpan : 字體樣式：粗體、斜體等

SubscriptSpan : 下標(biāo)(數(shù)學(xué)公式會用到)

SuperscriptSpan : 上標(biāo)(數(shù)學(xué)公式會用到)

TextAppearanceSpan : 文本外貌(包括字體、大小、樣式和顏色)

TypefaceSpan : 文本字體

URLSpan : 文本超鏈接

ClickableSpan : 點擊事件

解釋了這么多，看代碼怎么實現(xiàn)吧，其實很簡單！

第一行文字的效果代碼

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());

//第一個參數(shù)drawable 第二個參數(shù)對齊方式

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);

小編寫到這里的時候，看下了運行的結(jié)果，發(fā)現(xiàn)圖片怎么不居中呀，真正開發(fā)中，這種效果是不可取的。百度了下一下主要看這樣一行代碼客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;

點擊進(jìn)去看下源碼的解釋，原來ALIGN_BOTTOM是以文字的底部對齊 ，ALIGN_BASELINE是以文字的基線對齊，看到這里也知道圖片為什么不居中了。還不懂的推薦大家看兩篇博客https://blog.csdn.net/richardli1228/article/details/51180253

https://blog.csdn.net/u012551350/article/details/51361778

這兩篇文篇很詳細(xì)的說明了怎么繪制文本和文本的基線是怎么計算的？

**如果要實現(xiàn)圖片居中，怎么辦？我們把圖片在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);

有時候在開發(fā)中需要給一些的特殊的文字，設(shè)置一些超鏈接，顏色，背景色等等。

第四行文字的效果代碼

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);

//ForegroundColorSpan

ForegroundColorSpan colorSpan = new ForegroundColorSpan(ContextCompat.getColor(this, R.color.colorPrimaryDark));

spannableString.setSpan(colorSpan, 5, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);

mForegroundColorSpan.setText(spannableString);

寫了這么幾個例子，相信大家對圖片混排很清楚了，至于一些其它的文字的特性效果，需要大家去擴展了，比如文字的模糊、字體的樣式、圖片在文字的中間或者右邊等等。

總結(jié)

以上是生活随笔為你收集整理的android多媒体图文混排,干货！！！Android富文本实现图文混排的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。