實(shí)現(xiàn)效果圖
如上圖需求邪狞，要實(shí)現(xiàn)上述圖文混排有如下幾種方法：
1. 使用SpanableString
然而要實(shí)現(xiàn)行數(shù)限制且超過限制時(shí)省略的話嫩挤，SpannableString就比較復(fù)雜了。
SpannableString ss = new SpannableString("這是一間營業(yè)時(shí)間從午夜十二點(diǎn)到早上七點(diǎn)的特殊食堂");
int len = ss.length();
//獲取Drawable資源
Drawable d = getResources().getDrawable(R.drawable.icon);
d.setBounds(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight());
//創(chuàng)建ImageSpan
ImageSpan span = new ImageSpan(d, ImageSpan.ALIGN_BASELINE);
//用ImageSpan替換文本
ss.setSpan(span, len - 1, len, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
txtInfo.setText(ss);
2.Html實(shí)現(xiàn)富文本
用html實(shí)現(xiàn)富文本也是比較常用的了留搔，如果要插入圖片的話還需要ImageGetter來通過html中的資源ID拿到Drawable贴浙。
- 首先需要根據(jù)圖片類型來自定義ImageGetter，分為網(wǎng)絡(luò)圖片署恍、sd卡圖片、本地drawable圖片。這里只分析本地drawable圖片的ImageGetter劲阎。注意這里是圖片在drawable路徑下情形，mipmap需要將“drawable”改為“mipmap”
public class LocalImageGetter implements Html.ImageGetter {
Context c;
public LocalImageGetter(Context c) {
this.c = c;
}
@Override
public Drawable getDrawable(String source) {
int id = c.getResources().getIdentifier(source, "drawable", c.getPackageName());
if (id == 0) {
id = c.getResources().getIdentifier(source, "drawable", "android");
}
if (id == 0) {
return null;
} else {
Drawable d = c.getResources().getDrawable(id);
d.setBounds(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight());
return d;
}
}
}
- 然后自定義TagHandler來解析html的標(biāo)簽概而，詳情見源碼中的HtmlTagHandler。最后實(shí)現(xiàn)代碼：
Html.ImageGetter imgGetter = new LocalImageGetter(getContext());
String html = "<img src='img01'/> + "深夜食堂" + "<img src='img02'/>
text.setText(Html.fromHtml(html, imgGetter, new HtmlTagHandler()));
圖文混排對齊
較大圖片與文字混排時(shí)囱修，圖片就會(huì)與文字不對齊赎瑰，比較混亂。ImageSpan只支持
ImageSpan.ALIGN_BASELINE和ImageSpan.ALIGN_BOTTOM兩種對齊破镰，且效果不是很好餐曼。這時(shí)自定義ImageSpan來對齊圖文。
step1自定義ImageSpan
public class AlignTextSpan extends ImageSpan {
public AlignTextSpan(Drawable b, int verticalAlignment) {
super(b, verticalAlignment);
}
@Override
public void draw(Canvas canvas, CharSequence text,
int start, int end, float x,
int top, int y, int bottom, Paint paint) {
Drawable b = getDrawable();
Paint.FontMetricsInt fm = paint.getFontMetricsInt();
int transY = (y + fm.descent + y + fm.ascent) / 2 - b.getBounds().bottom / 2;//計(jì)算y方向的位移
canvas.save();
canvas.translate(x, transY);//繪制圖片位移一段距離
b.draw(canvas);
canvas.restore();
}
}
step2setText時(shí)Html轉(zhuǎn)Spanned
Spanned spanned = Html.fromHtml(html, imgGetter, null);
if(spanned instanceof SpannableStringBuilder){
ImageSpan[] imageSpans = spanned.getSpans(0, spanned.length(), ImageSpan.class);
for(ImageSpan imageSpan : imageSpans){
int start = spanned.getSpanStart(imageSpan);
int end = spanned.getSpanEnd(imageSpan);
Drawable d = imageSpan.getDrawable();
AlignTextSpan newImageSpan = new AlignTextSpan(d, ImageSpan.ALIGN_BASELINE);
((SpannableStringBuilder) spanned).setSpan(newImageSpan, start, end, Spanned.SPAN_EXCLUSIVE_INCLUSIVE);
((SpannableStringBuilder) spanned).removeSpan(imageSpan);
}
}
setText(spanned, BufferType.SPANNABLE);
實(shí)現(xiàn)行數(shù)限制及末尾省略原理：
參照TextView的末尾省略原理鲜漩，對于沒有達(dá)到maxline的文本直接html包裝插入圖片源譬；而對于需要省略顯示的情形，我們只需要重寫TextView對文本的截取及添加省略號(hào)的過程孕似。根據(jù)圖片大小及個(gè)數(shù)（實(shí)例中圖片較小踩娘，按一個(gè)字符占位）占位去掉末尾多余字符，并將末尾字符替換為“...”（或者自定義省略）喉祭，最后html包裝插入圖片养渴。重寫TextView的onTextChanged()及onDraw()方法，setText("深夜食堂深夜食堂")后的過程
step1：TextView繪制文本時(shí)泛烙，內(nèi)容從“”到"深夜食堂深夜食堂"會(huì)觸發(fā)onTextChange(),拿到原始文本fullText=“深夜食堂深夜食堂”
@Override
protected void onTextChanged(CharSequence text, int start, int before, int after) {
super.onTextChanged(text, start, before, after);
if (!programmaticChange) {
fullText = text.toString();//拿到原始文本
isStale = true;
}
}
setp2:拿到文本后開始繪制文本理卑，重寫onDraw()方法，自定義處理文本胶惰。
@Override
protected void onDraw(Canvas canvas) {
if (isStale) {
super.setEllipsize(null);//避免重復(fù)省略
resetText();//自定義處理原始文本
}
super.onDraw(canvas);
}
setp3:通過StaticLayout（TextView處理換行的工具類）拿到maxLine最后一個(gè)字符的index,根據(jù)indext截?cái)嘣嘉谋旧倒ぃ⒛┪沧址鎿Q為自定義的ELLIPSIS省略字符。
Layout layout = new StaticLayout(fullText, getPaint(), getWidth() - getPaddingLeft() - getPaddingRight(),
Layout.Alignment.ALIGN_NORMAL, lineSpacingMultiplier, lineAdditionalVerticalPadding, false);
if (layout.getLineCount() > maxLines) {
workingText = fullText.substring(0, layout.getLineEnd(maxLines - 1)).trim();
workingText = workingText.substring(0, workingText.length() - placeholderCount) + ELLIPSIS;
ellipsized = true;
}
step4:用html處理截?cái)嗪蟮奈谋荆?/p>
String html = "<img src='img01'/> +"深夜食堂深夜食堂" + "<img src='img02'/>
public void setHtmlFromString(String html) {
Html.ImageGetter imgGetter;
imgGetter = new LocalImageGetter(getContext());
setText(Html.fromHtml(html, imgGetter, new HtmlTagHandler()));
setMovementMethod(LinkMovementMethod.getInstance());
}
