如何使用TextView实现网格笔记文本视图？字符宽度问题求解

想要实现网格笔记视图（每个字符对应一个方格的效果），尝试通过TextView.setLetterSpacing和Canvas.drawLine实现，但发现"."、"?"、"/"以及大小写字母这类字符的宽度不一致，导致字符无法和网格对齐。

使用的XML代码如下：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <EditText
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="AAAAAAAAaAaAaaAA.,A,A..A"
        android:textSize="30sp"
        android:letterSpacing="1"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

当前实现未达到预期效果，字符与网格无法整齐对应。

1. 切换为等宽字体 #

普通字体是比例字体，不同字符宽度存在差异，而等宽字体（Monospace）的每个字符宽度完全一致，这是让字符对齐网格的核心前提。

修改EditText的字体属性：

<EditText
    ...
    android:typeface="monospace"
    <!-- 也可指定具体等宽字体，比如系统内置的Roboto Mono -->
    android:fontFamily="sans-serif-monospace"
    />

设置后，所有字符（包括标点、大小写字母）都会拥有相同宽度，配合letterSpacing可让字符间距均匀。

2. 自定义EditText绘制精准对齐的网格 #

仅靠字体无法实现网格与字符的精准对齐，需要自定义EditText，在onDraw中绘制匹配字符位置的网格：

class GridNoteEditText @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = android.R.attr.editTextStyle
) : androidx.appcompat.widget.AppCompatEditText(context, attrs, defStyleAttr) {

    private val gridPaint = Paint().apply {
        color = Color.parseColor("#E0E0E0")
        strokeWidth = 1f
        style = Paint.Style.STROKE
    }
    private var cellWidth = 0f
    private var cellHeight = 0f

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)
        // 获取单个字符的实际宽度（含letterSpacing）
        val textBounds = Rect()
        paint.getTextBounds("A", 0, 1, textBounds)
        cellWidth = textBounds.width() * (1 + paint.letterSpacing)
        // 单元格高度取行高，保证和文本行对齐
        cellHeight = lineHeight.toFloat()
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        // 绘制竖线网格
        var x = paddingLeft.toFloat()
        while (x < width - paddingRight) {
            canvas.drawLine(x, paddingTop.toFloat(), x, height - paddingBottom.toFloat(), gridPaint)
            x += cellWidth
        }
        // 绘制横线网格
        var y = paddingTop.toFloat()
        while (y < height - paddingBottom) {
            canvas.drawLine(paddingLeft.toFloat(), y, width - paddingRight.toFloat(), y, gridPaint)
            y += cellHeight
        }
    }
}

在XML中使用这个自定义View：

<com.yourpackage.GridNoteEditText
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:text="AAAAAAAAaAaAaaAA.,A,A..A"
    android:textSize="30sp"
    android:letterSpacing="1"
    android:typeface="monospace"
    android:padding="12dp"
    />

3. 手动调整单元格尺寸（可选） #

如果letterSpacing的自动计算不够精准，可以直接手动定义单元格宽度，确保网格与字符完全匹配：

// 替换onSizeChanged中的cellWidth计算
val baseCharWidth = textBounds.width()
val extraSpacing = 12f // 自定义字符间额外间距
cellWidth = baseCharWidth + extraSpacing

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