自定义TextView实现图文混排及自定义省略

实现效果图

如上图需求，要实现上述图文混排有如下几种方法：

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

最后附上源码地址:https://github.com/VDshixiaoming/QuoteTextView