自定义TextView实现图文混排及自定义省略
2017-12-08 本文已影响93人
MingMing很忙
实现效果图
如上图需求，要实现上述图文混排有如下几种方法：
1. 使用SpanableString
然而要实现行数限制且超过限制时省略的话，SpannableString就比较复杂了。
SpannableString ss = new SpannableString("这是一间营业时间从午夜十二点到早上七点的特殊食堂");
int len = ss.length();
//获取Drawable资源
Drawable d = getResources().getDrawable(R.drawable.icon);
d.setBounds(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight());
//创建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实现富文本
用html实现富文本也是比较常用的了，如果要插入图片的话还需要ImageGetter来通过html中的资源ID拿到Drawable。
- 首先需要根据图片类型来自定义ImageGetter，分为网络图片、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的标签，详情见源码中的HtmlTagHandler。最后实现代码：
Html.ImageGetter imgGetter = new LocalImageGetter(getContext());
String html = "<img src='img01'/> + "深夜食堂" + "<img src='img02'/>
text.setText(Html.fromHtml(html, imgGetter, new HtmlTagHandler()));
图文混排对齐
较大图片与文字混排时，图片就会与文字不对齐，比较混乱。ImageSpan只支持
ImageSpan.ALIGN_BASELINE和ImageSpan.ALIGN_BOTTOM两种对齐，且效果不是很好。这时自定义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;//计算y方向的位移
canvas.save();
canvas.translate(x, transY);//绘制图片位移一段距离
b.draw(canvas);
canvas.restore();
}
}
step2setText时Html转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);
实现行数限制及末尾省略原理：
参照TextView的末尾省略原理，对于没有达到maxline的文本直接html包装插入图片；而对于需要省略显示的情形，我们只需要重写TextView对文本的截取及添加省略号的过程。根据图片大小及个数（实例中图片较小，按一个字符占位）占位去掉末尾多余字符，并将末尾字符替换为“...”（或者自定义省略），最后html包装插入图片。重写TextView的onTextChanged()及onDraw()方法，setText("深夜食堂深夜食堂")后的过程
step1：TextView绘制文本时，内容从“”到"深夜食堂深夜食堂"会触发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);//避免重复省略
resetText();//自定义处理原始文本
}
super.onDraw(canvas);
}
setp3:通过StaticLayout（TextView处理换行的工具类）拿到maxLine最后一个字符的index,根据indext截断原始文本，并将末尾字符替换为自定义的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处理截断后的文本，
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());
}
