自定義TextView實現圖文混排及自定義省略符號

• 實現圖文混排

    

如上圖需求，要實現上述圖文混排有如下幾種方法

1-用SpannableString

1. SpannableString ss = new SpannableString("這是一間營業時間從午夜十二點到早上七點的特殊食堂");
2. int len = ss.length();
3. //獲取Drawable資源
4. Drawable d = getResources().getDrawable(R.drawable.icon);
5. d.setBounds(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight());
6. //創建ImageSpan
7. ImageSpan span = new ImageSpan(d, ImageSpan.ALIGN_BASELINE);
8. //用ImageSpan替換文本
9. ss.setSpan(span, len - 1, len, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
10. txtInfo.setText(ss);

    然而要實現行數限制且超過限制時省略的話，SpannableString就比較複雜了。

2-Html實現富文本

    用html實現富文本也是比較常用的了，如果要插入圖片的話還需要ImageGetter來通過html中的資源ID拿到Drawable。

    首先需要根據圖片類型來自定義ImageGetter，分爲網絡圖片、sd卡圖片、本地drawable圖片。這裏只分析本地drawable圖片的ImageGetter。注意這裏是圖片在drawable路徑下情形，mipmap需要將“drawable”改爲“mipmap”

1. public class LocalImageGetter implements Html.ImageGetter {
2. Context c;
3. public LocalImageGetter(Context c) {
4. this.c = c;
5. }
6. @Override
7. public Drawable getDrawable(String source) {
8. int id = c.getResources().getIdentifier(source, "drawable", c.getPackageName());
9. if (id == 0) {
10. id = c.getResources().getIdentifier(source, "drawable", "android");
11. }
12. if (id == 0) {
13. return null;
14. } else {
15. Drawable d = c.getResources().getDrawable(id);
16. d.setBounds(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight());
17. return d;
18. }
19. }
20. }

然後自定義TagHandler來解析html的標籤，詳情見源碼中的HtmlTagHandler。最後實現代碼：

1. Html.ImageGetter imgGetter = new LocalImageGetter(getContext());
2. String html = "<img src='img01'/> + "深夜食堂" + "<img src='img02'/>
3. 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=“深夜食堂深夜食堂”

1. @Override
2. protected void onTextChanged(CharSequence text, int start, int before, int after) {
3. super.onTextChanged(text, start, before, after);
4. if (!programmaticChange) {
5. fullText = text.toString();//拿到原始文本
6. isStale = true;
7. }
8. }

setp2:拿到文本後開始繪製文本，重寫onDraw()方法，自定義處理文本。

1. @Override
2. protected void onDraw(Canvas canvas) {
3. if (isStale) {
4. super.setEllipsize(null);//避免重複省略
5. resetText();//自定義處理原始文本
6. }
7. super.onDraw(canvas);
8. }

setp3:通過StaticLayout（TextView處理換行的工具類）拿到maxLine最後一個字符的index,根據indext截斷原始文本，並將末尾字符替換爲自定義的ELLIPSIS省略字符。

1. Layout layout = new StaticLayout(fullText, getPaint(), getWidth() - getPaddingLeft() - getPaddingRight(),
2. Layout.Alignment.ALIGN_NORMAL, lineSpacingMultiplier, lineAdditionalVerticalPadding, false);
3. if (layout.getLineCount() > maxLines) {
4. workingText = fullText.substring(0, layout.getLineEnd(maxLines - 1)).trim();
5. workingText = workingText.substring(0, workingText.length() - placeholderCount) + ELLIPSIS;
6. ellipsized = true;
7. }

step4:用html處理截斷後的文本，

String html = "<img src='img01'/> + "深夜食堂深夜食堂" + "<img src='img02'/>

1. public void setHtmlFromString(String html) {
2. Html.ImageGetter imgGetter;
3. imgGetter = new LocalImageGetter(getContext());
4. setText(Html.fromHtml(html, imgGetter, new HtmlTagHandler()));
5. setMovementMethod(LinkMovementMethod.getInstance());
6. }

最終效果圖

最後附上源碼地址：https://github.com/VDshixiaoming/QuoteTextView