原生TextView實現富文本展示

前言

實現如下效果：開頭顯示圖片，而後文字依次排列，並且換行開頭和圖片對齊

代碼

只需要使用原生的TextView，然後通過如下方法調用：

textview.setText(ImgTexMixedUtil.transferPic(text, R.drawable.icon_abstract_label));

封裝成了一個工具類：

/**
 * 圖文混排工具類
 * <p/>
 * 11/10/16 6:05 PM
 */
public class ImgTexMixedUtil {
    private static final String TAG = "ImgTexMixedUtil";

    /**
     * 將富文本轉成CharSequence
     *
     * @param commonStr 普通內容
     * @param bqId      圖片
     * @return
     */
    public static CharSequence transferPic(String commonStr, int bqId) {
        Spanned spanned = Html.fromHtml("<img src=\"" + bqId + "\">" + commonStr, new Html.ImageGetter() {
            @Override
            public Drawable getDrawable(String source) {
                int id = Integer.parseInt(source);
                // 根據id從資源文件中獲取圖片對象
                Drawable d = App.getAppContext().getResources().getDrawable(id);
                // 以此作爲標誌位，方便外部取出對應的資源id
                d.setState(new int[]{id});
                d.setBounds(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight());
                return d;
            }
        }, 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();
                StickerSpan newImageSpan = new StickerSpan(d, ImageSpan.ALIGN_BASELINE);
                ((SpannableStringBuilder) spanned).setSpan(newImageSpan, start, end, Spanned.SPAN_EXCLUSIVE_INCLUSIVE);
                ((SpannableStringBuilder) spanned).removeSpan(imageSpan);
            }
        }
        return spanned;
    }

    public static class StickerSpan extends ImageSpan {

        public StickerSpan(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();
            canvas.save();
            int transY = bottom - b.getBounds().bottom - CommonUtils.dip2px(App.getAppContext(), 3);
            if (mVerticalAlignment == ALIGN_BASELINE) {
                int textLength = text.length();
                for (int i = 0; i < textLength; i++) {
                    if (Character.isLetterOrDigit(text.charAt(i))) {
                        transY -= paint.getFontMetricsInt().descent;
                        break;
                    }
                }
            }
            canvas.translate(x, transY);
            b.draw(canvas);
            canvas.restore();
        }
    }

}

    /**
     * 根據手機的分辨率從 dp 的單位 轉成爲 px(像素)
     */
    public static int dip2px(Context context, float dpValue) {
        if (context == null) {
            return 0;
        }
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }

參考鏈接

android textView設置html，解決圖片和文字不對齊的問題

更新

問題：當textview只顯示一行文字時，上述方法在三星note3會出現圖片截斷的問題，現提供另外一種方法，同樣是利用SpannableString和ImageSpan在textview中插入圖片，其實大部分原理一致，就是計算偏移y

public class VerticalImageSpan extends ImageSpan {
    public VerticalImageSpan(Context context, int resourceId) {
        super(context, resourceId);
    }

    @Override
    public void draw(Canvas canvas, CharSequence text, int start, int end,
                     float x, int top, int y, int bottom, Paint paint) {
        Drawable drawable = getDrawable();
        canvas.save();
        int transY = (Math.abs(paint.getFontMetricsInt().bottom + y + 8) - Math.abs(drawable.getBounds().bottom)) / 2;
        canvas.translate(x, transY);
        drawable.draw(canvas);
        canvas.restore();
    }
}

    SpannableStringBuilder builder = new SpannableStringBuilder();
        int startPoint = builder.length();
        builder.append("[abstract]");//佔位使用
        int endPoint = builder.length();
        VerticalImageSpan span = new VerticalImageSpan(this, R.drawable.icon_abstract_label);
        builder.setSpan(span, startPoint, endPoint, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        builder.append(" ");
        builder.append(brief);
        topicAbstrct.setText(builder);