Kotlin中TextView能否横向扩展？平板多列文本显示问题

你的场景需要文本在垂直方向填满后自动流入右侧列，同时支持横向滚动，但原生TextView默认不支持这种流式多列排版，之前尝试的scrollHorizontally="true"和HTML格式都无法解决核心问题，以下是可行的实现思路：

解决方案一：动态分割文本到多列TextView #

布局调整 #

保留HorizontalScrollView，内部改为横向LinearLayout用于承载多个TextView：

<HorizontalScrollView
    android:id="@+id/scrollView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <LinearLayout
        android:id="@+id/columnContainer"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:padding="20dp"/>

</HorizontalScrollView>

代码实现 #

在Activity或Fragment中，计算单个TextView可容纳的文本量，分割原始文本并动态创建TextView：

// 定义单列TextView的模板参数
val columnWidth = 500.dpToPx()
val textSize = 16f
val columnMargin = 12.dpToPx()

val templateTv = TextView(this).apply {
    layoutParams = LinearLayout.LayoutParams(columnWidth, ViewGroup.LayoutParams.MATCH_PARENT)
    setPadding(0, 0, columnMargin, 0)
    this.textSize = textSize
}

// 计算单列可容纳的最大行数
val maxLines = templateTv.height / templateTv.lineHeight

// 分割文本为多列内容
val columnTexts = mutableListOf<String>()
var currentStartIndex = 0
val originalText = notice.text

while (currentStartIndex < originalText.length) {
    // 创建静态布局计算文本换行位置
    val staticLayout = StaticLayout.Builder
        .obtain(originalText, currentStartIndex, originalText.length, templateTv.paint, columnWidth)
        .build()

    // 取当前列能容纳的最后一行的结束索引
    val endIndex = if (staticLayout.lineCount > maxLines) {
        staticLayout.getLineEnd(maxLines - 1)
    } else {
        originalText.length
    }

    columnTexts.add(originalText.substring(currentStartIndex, endIndex))
    currentStartIndex = endIndex

    // 文本已处理完则退出循环
    if (currentStartIndex >= originalText.length) break
}

// 将分栏文本添加到容器
columnTexts.forEach { text ->
    val columnTv = TextView(this).apply {
        layoutParams = templateTv.layoutParams
        setPadding(0, 0, columnMargin, 0)
        this.textSize = textSize
        this.text = text
    }
    columnContainer.addView(columnTv)
}

// 扩展函数：dp转像素
fun Int.dpToPx(): Int {
    return (this * resources.displayMetrics.density).toInt()
}

解决方案二：自定义分栏文本View（更灵活） #

如果需要更精准的排版控制，比如自定义行间距、列间距，可以自定义View手动绘制多列文本：

class ColumnTextView @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {

    private var contentText: String = ""
    private val textPaint = Paint().apply {
        textSize = 16.spToPx()
        color = Color.BLACK
        isAntiAlias = true
    }
    private val columnWidth = 500.dpToPx()
    private val columnSpacing = 12.dpToPx()

    fun setContentText(text: String) {
        contentText = text
        invalidate()
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        var currentColumnX = 0f
        var currentLineY = textPaint.fontSpacing
        val maxColumnHeight = height.toFloat()

        var currentTextStart = 0
        val textLength = contentText.length

        while (currentTextStart < textLength) {
            // 创建当前剩余文本的静态布局
            val staticLayout = StaticLayout.Builder
                .obtain(contentText, currentTextStart, textLength, textPaint, columnWidth)
                .build()

            var lineIndex = 0
            val totalLines = staticLayout.lineCount

            while (lineIndex < totalLines) {
                val lineTop = staticLayout.getLineTop(lineIndex)
                // 当前列剩余空间不足时，切换到下一列
                if (currentLineY + lineTop > maxColumnHeight) {
                    currentColumnX += columnWidth + columnSpacing
                    currentLineY = textPaint.fontSpacing
                }

                val lineStart = staticLayout.getLineStart(lineIndex)
                val lineEnd = staticLayout.getLineEnd(lineIndex)
                // 绘制当前行文本
                canvas.drawText(contentText, lineStart, lineEnd, currentColumnX, currentLineY + lineTop, textPaint)
                lineIndex++
            }

            currentTextStart += staticLayout.getLineEnd(totalLines - 1)
        }
    }

    // 扩展函数：sp转像素
    private fun Float.spToPx(): Float {
        return this * resources.displayMetrics.scaledDensity
    }

    // 扩展函数：dp转像素
    private fun Int.dpToPx(): Int {
        return (this * resources.displayMetrics.density).toInt()
    }
}

布局使用 #

将自定义View包裹在HorizontalScrollView中：

<HorizontalScrollView
    android:id="@+id/scrollView"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.yourpackage.ColumnTextView
        android:id="@+id/columnTextView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:padding="20dp"/>
</HorizontalScrollView>

代码设置文本 #

columnTextView.setContentText(notice.text)

两种方案中，方案一实现简单，适合快速开发；方案二更灵活，能适配复杂排版需求，可根据实际场景选择。

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