Android中TextView渲染HTML无显示问题求助

核心问题分析 #

TextView的Html.fromHtml（及兼容方法）对HTML和CSS的支持非常有限，你的代码里存在多个不被原生支持的特性，导致内容无法正常渲染：

• 不解析<style>标签和外部<link>样式
• 默认不加载网络<img>
• 多数inline CSS属性（如display: table、margin: auto、border-radius）不生效
• 旧版Html.fromHtml方法在高API版本中解析能力受限
• RTL布局仅靠HTML属性无法生效

分步解决方案 #

1. 修正HTML解析方法

使用AndroidX的HtmlCompat兼容库，确保全版本解析能力：

import androidx.core.text.HtmlCompat

val htmlContent = resources.getString(R.string.html)
// 使用COMPACT模式，保留基础HTML标签解析
binding.txtHtml.text = HtmlCompat.fromHtml(
    htmlContent,
    HtmlCompat.FROM_HTML_MODE_COMPACT
)

2. 实现ImageGetter加载网络图片

原生TextView不会自动加载网络图片，需要自定义ImageGetter（以Glide为例）：

val imageGetter = HtmlCompat.ImageGetter { source ->
    val placeholder = ColorDrawable(Color.LTGRAY)
    // 用Glide异步加载图片，加载完成后重新渲染HTML
    Glide.with(binding.txtHtml.context)
        .load(source)
        .into(object : CustomTarget<Drawable>() {
            override fun onResourceReady(resource: Drawable, transition: Transition<in Drawable>?) {
                resource.setBounds(0, 0, resource.intrinsicWidth, resource.intrinsicHeight)
                binding.txtHtml.text = HtmlCompat.fromHtml(
                    htmlContent,
                    HtmlCompat.FROM_HTML_MODE_COMPACT,
                    HtmlCompat.ImageGetter { if (it == source) resource else placeholder },
                    CustomTagHandler()
                )
            }

            override fun onLoadCleared(placeholder: Drawable?) {}
        })
    placeholder
}

3. 用TagHandler处理标题样式

原生不解析<style>中的h1/h5/h6样式，自定义TagHandler手动设置文本样式：

class CustomTagHandler : Html.TagHandler {
    override fun handleTag(opening: Boolean, tag: String, output: Editable, xmlReader: XMLReader) {
        when (tag.lowercase()) {
            "h1" -> applyHeadingStyle(output, opening, 24f, Color.BLACK, true, Layout.Alignment.ALIGN_CENTER)
            "h5" -> applyHeadingStyle(output, opening, 16f, Color.MAROON, false)
            "h6" -> applyHeadingStyle(output, opening, 11f, Color.GRAY, false)
        }
    }

    private fun applyHeadingStyle(
        output: Editable,
        opening: Boolean,
        textSizeSp: Float,
        textColor: Int,
        isBold: Boolean,
        alignment: Layout.Alignment = Layout.Alignment.ALIGN_NORMAL
    ) {
        val start = output.length
        if (opening) {
            // 设置字号、颜色、加粗
            val styleSpan = object : MetricAffectingSpan() {
                override fun updateMeasureState(paint: TextPaint) {
                    paint.textSize = TypedValue.applyDimension(
                        TypedValue.COMPLEX_UNIT_SP,
                        textSizeSp,
                        Resources.getSystem().displayMetrics
                    )
                    paint.color = textColor
                    paint.typeface = if (isBold) Typeface.DEFAULT_BOLD else Typeface.DEFAULT
                }

                override fun updateDrawState(paint: TextPaint) = updateMeasureState(paint)
            }
            output.setSpan(styleSpan, start, start, Spannable.SPAN_MARK_MARK)

            // 设置居中对齐（仅h1）
            if (alignment != Layout.Alignment.ALIGN_NORMAL) {
                val alignmentSpan = AlignmentSpan.Standard(alignment)
                output.setSpan(alignmentSpan, start, start, Spannable.SPAN_MARK_MARK)
            }
        } else {
            val end = output.length
            // 闭合标签时，将span应用到实际文本区间
            val spans = output.getSpans(start, end, Any::class.java)
            spans.forEach { output.setSpan(it, start, end, output.getSpanFlags(it)) }
        }
    }
}

4. 用布局替代HTML容器样式

HTML中的div边框、宽度、padding、RTL布局无法被TextView解析，直接在XML布局中实现：

<!-- 用CardView实现边框和80%宽度 -->
<androidx.cardview.widget.CardView
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    app:cardCornerRadius="0dp"
    app:cardElevation="0dp"
    app:cardBackgroundColor="@android:color/white"
    app:cardPreventCornerOverlap="false"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintWidth_percent="0.8">

    <TextView
        android:id="@+id/txtHtml"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="25dp"
        android:textDirection="rtl"
        android:lineSpacingMultiplier="2.0" <!-- 对应line-height:2em -->
        android:textSize="14sp"/> <!-- 对应body的font-size -->

</androidx.cardview.widget.CardView>

5. 自定义字体替代@font-face

原生不支持@font-face，将Vazir字体文件放入assets/fonts/目录，然后在代码中设置：

val vazirRegular = Typeface.createFromAsset(context.assets, "fonts/Vazir.ttf")
val vazirBold = Typeface.createFromAsset(context.assets, "fonts/Vazir-Bold.ttf")
binding.txtHtml.typeface = vazirRegular
// 可在TagHandler的applyHeadingStyle中，将Typeface.DEFAULT_BOLD替换为vazirBold

最终整合代码 #

// 初始化TextView样式
val vazirRegular = Typeface.createFromAsset(context.assets, "fonts/Vazir.ttf")
binding.txtHtml.apply {
    typeface = vazirRegular
    textDirection = View.TEXT_DIRECTION_RTL
    lineSpacingMultiplier = 2.0f
    textSize = 14.sp
}

// 渲染HTML
val htmlContent = resources.getString(R.string.html)
val imageGetter = HtmlCompat.ImageGetter { source ->
    val placeholder = ColorDrawable(Color.LTGRAY)
    Glide.with(this)
        .load(source)
        .into(object : CustomTarget<Drawable>() {
            override fun onResourceReady(resource: Drawable, transition: Transition<in Drawable>?) {
                resource.setBounds(0, 0, resource.intrinsicWidth, resource.intrinsicHeight)
                binding.txtHtml.text = HtmlCompat.fromHtml(
                    htmlContent,
                    HtmlCompat.FROM_HTML_MODE_COMPACT,
                    HtmlCompat.ImageGetter { if (it == source) resource else placeholder },
                    CustomTagHandler()
                )
            }

            override fun onLoadCleared(placeholder: Drawable?) {}
        })
    placeholder
}

binding.txtHtml.text = HtmlCompat.fromHtml(
    htmlContent,
    HtmlCompat.FROM_HTML_MODE_COMPACT,
    imageGetter,
    CustomTagHandler()
)

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