如何在Android的EditText末尾添加"/5"提示文本？

当然可以实现，完全不需要额外的TextView，只用5个EditText就能达成需求。下面是两种实用方案：

方案一：自定义EditText（推荐） #

通过继承EditText并重写绘制逻辑，在输入框右侧固定显示"/5"后缀，这个后缀不会被用户编辑，也不会随输入内容消失。

自定义EditText代码 #

import android.content.Context
import android.graphics.Canvas
import android.graphics.Paint
import android.util.AttributeSet
import androidx.appcompat.widget.AppCompatEditText

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

    private val suffixText = "/5"
    private val suffixPaint = Paint().apply {
        // 匹配EditText的文本样式
        textSize = this@SuffixEditText.textSize
        color = this@SuffixEditText.currentTextColor
        isAntiAlias = true
    }

    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        // 计算后缀绘制位置：文本右侧，垂直居中
        val suffixWidth = suffixPaint.measureText(suffixText)
        val x = width - paddingRight - suffixWidth
        val y = (height + suffixPaint.textSize) / 2 - suffixPaint.descent() / 2
        canvas?.drawText(suffixText, x, y, suffixPaint)
    }

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        // 给后缀预留宽度，避免输入内容被遮挡
        val suffixWidth = suffixPaint.measureText(suffixText).toInt()
        super.onMeasure(
            MeasureSpec.makeMeasureSpec(
                MeasureSpec.getSize(widthMeasureSpec) + suffixWidth,
                MeasureSpec.getMode(widthMeasureSpec)
            ),
            heightMeasureSpec
        )
    }
}

XML中替换使用 #

把原来每个包含EditText和TextView的LinearLayout直接换成这个自定义EditText：

<你的包名.SuffixEditText
    android:id="@+id/series1"
    style="@style/editBoxExercises2"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:digits="012345"
    android:gravity="center|right"
    android:imeOptions="actionDone"
    android:importantForAutofill="no"
    android:inputType="number"
    android:maxLength="1"
    android:shadowDx="-4"
    android:shadowDy="-4"
    android:shadowRadius="2"
    tools:ignore="SpeakableTextPresentCheck" />

重复这个操作，把series2到series5都换成自定义EditText，就能去掉所有多余的TextView了。

方案二：用TextWatcher维护后缀（快速实现） #

如果不想自定义View，可以给普通EditText添加TextWatcher，自动在输入内容后附加"/5"，并阻止用户修改后缀：

代码示例（给单个EditText设置） #

val suffix = "/5"
series1.addTextChangedListener(object : TextWatcher {
    private var isUpdating = false

    override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {}

    override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {}

    override fun afterTextChanged(s: Editable?) {
        if (isUpdating) return
        isUpdating = true

        // 移除旧后缀，避免重复添加
        if (s.toString().endsWith(suffix)) {
            s?.replace(s.length - suffix.length, s.length, "")
        }
        // 添加新后缀
        s?.append(suffix)
        // 光标定位到输入内容末尾，不让用户编辑后缀
        setSelection(s?.length?.minus(suffix.length) ?: 0)
        isUpdating = false
    }
})

这种方法需要给5个EditText都设置监听，缺点是"/5"会作为文本内容的一部分，获取输入值时需要手动截取掉后缀，不如自定义View优雅。

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