嘿，我太懂你这个困扰了——用ImageSpan插图片就像把硬塞在行里的方块，文字根本绕不开，完全不是我们想要的段落内图片浮动效果。毕竟Android原生的ImageSpan本质是字符级的Span，它只负责把图片当成一个“大号字符”来嵌入，压根没考虑排版层面的文字环绕逻辑。下面给你几个实战过的解决方案，按需选就行：

方案一：自定义DynamicDrawableSpan实现基础行内占位 #

ImageSpan继承自DynamicDrawableSpan，我们可以自己写一个子类，重写getSize()和draw()方法，手动控制图片的占位空间和绘制位置，让该行文字能给图片留出位置。虽然没法实现多行环绕，但适合简单的单行/少量行场景。

示例代码：

public class FloatImageSpan extends DynamicDrawableSpan {
    private final Drawable mDrawable;
    private final int mImgWidth;
    private final int mImgHeight;

    public FloatImageSpan(Drawable drawable) {
        super(ALIGN_BOTTOM);
        mDrawable = drawable;
        mImgWidth = drawable.getIntrinsicWidth();
        mImgHeight = drawable.getIntrinsicHeight();
        drawable.setBounds(0, 0, mImgWidth, mImgHeight);
    }

    @Override
    public int getSize(Paint paint, CharSequence text, int start, int end, Paint.FontMetricsInt fm) {
        // 调整字体基线，避免文字和图片对齐错乱
        if (fm != null) {
            fm.ascent = Math.min(fm.ascent, -mImgHeight);
            fm.descent = Math.max(fm.descent, 0);
            fm.top = Math.min(fm.top, fm.ascent);
            fm.bottom = Math.max(fm.bottom, fm.descent);
        }
        // 返回图片宽度，让该行文字预留出对应空间
        return mImgWidth;
    }

    @Override
    public void draw(Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom, Paint paint) {
        // 让图片底部对齐文字基线，可调整transY控制垂直位置
        int transY = y - mDrawable.getBounds().bottom + (paint.getFontMetricsInt().descent - paint.getFontMetricsInt().ascent) / 2;
        canvas.save();
        canvas.translate(x, transY);
        mDrawable.draw(canvas);
        canvas.restore();
    }
}

方案二：自定义Layout实现真正的多行文字环绕 #

如果要实现类似Word里的图片左/右浮动、文字多行环绕的效果，必须自定义Layout（比如继承StaticLayout或DynamicLayout），因为原生Layout不会自动识别Span的额外占位空间。

核心思路是：

1. 提前解析文本中的图片Span，记录每个图片的位置、尺寸
2. 重写Layout的排版逻辑，计算每一行的可用宽度时，扣除图片占用的空间
3. 绘制时先画图片，再画文字，让文字避开图片区域

简化示例代码：

public class FloatImageLayout extends StaticLayout {
    private final List<FloatImageSpan> mImageSpans = new ArrayList<>();

    public FloatImageLayout(CharSequence source, Paint paint, int width, Alignment align, float spacingmult, float spacingadd, boolean includepad) {
        super(source, paint, width, align, spacingmult, spacingadd, includepad);
        // 解析文本中的图片Span
        if (source instanceof Spanned) {
            Spanned spanned = (Spanned) source;
            FloatImageSpan[] spans = spanned.getSpans(0, source.length(), FloatImageSpan.class);
            Collections.addAll(mImageSpans, spans);
        }
    }

    @Override
    protected void drawText(Canvas canvas, int start, int end, float x, int top) {
        int currentLine = getLineForOffset(start);
        // 先绘制当前行的图片
        for (FloatImageSpan span : mImageSpans) {
            if (getLineForOffset(span.getStart()) == currentLine) {
                span.draw(canvas, getText(), span.getStart(), span.getEnd(), x, top, top + getLineHeight(), top + getLineHeight(), getPaint());
            }
        }
        // 调整文字绘制的X坐标，避开图片宽度
        float adjustedX = x + getImageWidthForLine(currentLine);
        super.drawText(canvas, start, end, adjustedX, top);
    }

    private int getImageWidthForLine(int line) {
        for (FloatImageSpan span : mImageSpans) {
            if (getLineForOffset(span.getStart()) == line) {
                return span.getDrawable().getIntrinsicWidth();
            }
        }
        return 0;
    }
}

这个方案需要处理很多细节（比如图片跨多行、换行逻辑、不同屏幕适配），但能实现最贴近原生排版的文字环绕效果。

方案三：用WebView快速实现（折中方案） #

如果不想折腾自定义Layout，也可以把富文本内容转换成HTML，用WebView渲染。HTML天然支持float:left/float:right属性，能轻松实现文字环绕图片，而且WebView的排版引擎成熟，不用自己处理复杂的排版逻辑。

比如把你的Spannable内容转成HTML：

• 粗体 → <b>文本</b>
• 斜体 → <i>文本</i>
• 块引用 → <blockquote>文本</blockquote>
• 图片 → <img src="file:///android_asset/xxx.jpg" style="float:left; margin: 0 8px 8px 0; width:100px;" />

然后加载到WebView里即可。缺点是WebView的性能和交互体验可能不如原生控件，适合对编辑器交互要求不高的场景。

内容的提问来源于stack exchange，提问作者Circle