如何按屏幕宽高拆分保留HTML样式的文本至多个屏幕？

刚好我之前做过类似的需求，踩过一些坑，下面几个方案应该能完美解决你的问题——既能按屏幕尺寸拆分文本，又能完整保留HTML样式：

方案一：利用Android原生API手动分页（适合简单HTML样式） #

如果你的HTML只是包含粗体、斜体、上下标这类基础样式，用原生的StaticLayout（静态文本）或DynamicLayout（可编辑文本）来分页是最优解，因为它能直接处理带样式的Spanned对象，完全保留原有格式。

实现步骤： #

1. 先把HTML字符串转换成带样式的Spanned对象（API 24+用Html.fromHtml()的带模式参数版本）；
2. 根据屏幕尺寸计算单页的可用宽高（要减去状态栏、边距等）；
3. 逐页计算能容纳的文本范围，截取Spanned子序列作为单页内容。

代码示例（Kotlin）： #

import android.text.Html
import android.text.Spanned
import android.text.StaticLayout
import android.text.TextPaint
import android.util.TypedValue

fun splitHtmlIntoPages(
    html: String,
    pageWidth: Int,
    pageHeight: Int,
    context: Context
): List<Spanned> {
    // 将HTML转为带样式的Spanned对象
    val spannedText = Html.fromHtml(html, Html.FROM_HTML_MODE_COMPACT)
    val textPaint = TextPaint().apply {
        // 设置字体大小，可根据需求调整
        textSize = TypedValue.applyDimension(
            TypedValue.COMPLEX_UNIT_SP,
            16f,
            context.resources.displayMetrics
        )
    }

    val pages = mutableListOf<Spanned>()
    var startOffset = 0
    val totalTextLength = spannedText.length

    while (startOffset < totalTextLength) {
        // 构建StaticLayout计算文本布局
        val layout = StaticLayout.Builder.obtain(
            spannedText,
            startOffset,
            totalTextLength,
            textPaint,
            pageWidth
        )
            .setAlignment(StaticLayout.Alignment.ALIGN_NORMAL)
            .setLineSpacing(0f, 1.2f) // 设置行间距倍数
            .setIncludePad(true)
            .build()

        var endOffset = startOffset
        var currentPageHeight = 0

        // 逐行累加高度，直到超过单页高度
        for (lineIndex in 0 until layout.lineCount) {
            val lineHeight = layout.getLineBottom(lineIndex) - layout.getLineTop(lineIndex)
            if (currentPageHeight + lineHeight > pageHeight) {
                break
            }
            currentPageHeight += lineHeight
            endOffset = layout.getLineEnd(lineIndex)
        }

        // 截取当前页的带样式文本并加入列表
        pages.add(spannedText.subSequence(startOffset, endOffset) as Spanned)
        startOffset = endOffset
    }

    return pages
}

使用方式： #

计算好屏幕可用宽高后，调用这个方法得到每页的Spanned，然后用ViewPager2配合自定义的TextView适配器，把每页内容展示出来即可——TextView会自动识别Spanned里的样式。

方案二：WebView分页（适合复杂HTML） #

如果你的HTML包含图片、表格、复杂排版这类原生Spanned处理不了的元素，用WebView分页更合适，它能100%还原HTML的所有样式。

核心思路： #

1. 把完整HTML加载到一个隐藏的WebView中；
2. 通过JS计算内容总高度，结合单页高度算出总页数；
3. 拆分HTML为多个适配单页高度的片段，用ViewPager2加载每个WebView展示对应片段。

简化代码示例： #

import android.webkit.WebView
import android.webkit.WebViewClient

fun splitComplexHtml(
    fullHtml: String,
    pageHeight: Int,
    context: Context,
    onPagesReady: (List<String>) -> Unit
) {
    val hiddenWebView = WebView(context).apply {
        settings.javaScriptEnabled = true
    }

    hiddenWebView.webViewClient = object : WebViewClient() {
        override fun onPageFinished(view: WebView?, url: String?) {
            super.onPageFinished(view, url)
            view?.evaluateJavascript("document.body.scrollHeight") { totalHeightStr ->
                val totalHeight = totalHeightStr.toIntOrNull() ?: 0
                val pageCount = (totalHeight / pageHeight) + 1
                val pageHtmlList = mutableListOf<String>()

                for (pageIndex in 0 until pageCount) {
                    // 给每个页面添加高度限制，实现分页效果
                    val pageHtml = """
                        <html>
                            <body style="height: ${pageHeight}px; overflow: hidden; margin: 0;">
                                $fullHtml
                            </body>
                        </html>
                    """.trimIndent()
                    pageHtmlList.add(pageHtml)
                }

                onPagesReady(pageHtmlList)
                // 用完隐藏的WebView记得销毁
                hiddenWebView.destroy()
            }
        }
    }

    hiddenWebView.loadData(fullHtml, "text/html", "UTF-8")
}

注意事项 #

• 原生StaticLayout方案性能更好，适合大量文本的分页场景；
• WebView方案要注意内存占用，每个WebView都比较耗资源，用完记得及时销毁；
• 计算单页高度时，要扣除状态栏、标题栏、页面边距等占用的空间，避免内容被遮挡。

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