使用Markwon时，如何让TextView中同行Drawable图片与文本垂直居中？

要让Markdown行内图片和文本垂直居中，核心是修改Markwon渲染图片时使用的ImageSpan对齐方式——默认的ImageSpan为底部对齐，我们需要替换为居中对齐的实现。

步骤1：自定义居中对齐的ImageSpan #

创建继承自ImageSpan的类，指定对齐方式为ALIGN_CENTER：

class CenteredImageSpan(drawable: Drawable) : ImageSpan(drawable, ALIGN_CENTER)

步骤2：配置ImagesPlugin使用自定义ImageSpanFactory #

在你的DrawableImagesConfigure中，添加imageSpanFactory配置，替换默认的Span创建逻辑：

class DrawableImagesConfigure(private val context: Context) : ImagesPlugin.ImagesConfigure {

    override fun configureImages(plugin: ImagesPlugin) {
        plugin.addSchemeHandler(schemeHandler)
        // 配置自定义ImageSpan工厂
        plugin.imageSpanFactory { drawable ->
            CenteredImageSpan(drawable)
        }
    }

    // 原有schemeHandler代码保持不变
    private val schemeHandler = object : SchemeHandler() {
        override fun handle(raw: String, uri: Uri): ImageItem {
            val rawSplitted = raw.split("drawable://", "?")
            val drawableName = rawSplitted[1]
            val queryMap =  parseQuery(rawSplitted.getOrNull(2))

            val drawableId = context.resources.getIdentifier(drawableName, "drawable", context.packageName)
            val drawable = AppCompatResources.getDrawable(context, drawableId)
                ?: throw Exception("The drawable with drawableId $drawableId does not exist")

            if (queryMap != null && queryMap["size"] != null) {
                val size = queryMap["size"]!!.toInt().toPx
                drawable.setBounds(0, 0, size, size)
            }

            return ImageItem.withResult(drawable)
        }

        override fun supportedSchemes(): Collection<String> {
            return setOf("drawable")
        }

        private fun parseQuery(rawQuery: String?): Map<String, String>? {
            return rawQuery?.split("&")
                ?.map { it.split("=") }
                ?.associate { (key, value) -> key to value }
        }
    }
}

原理说明 #

Markwon默认使用ImageSpan(drawable, ALIGN_BOTTOM)渲染行内图片，这会导致图片底部与文本基线对齐，出现图片偏移到文本下方的问题。通过替换为ALIGN_CENTER的ImageSpan，可让图片垂直中心与文本行中心对齐，实现预期的居中效果。

额外说明 #

你原有的TextView布局无需修改，保持现有配置即可。

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