原生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);