此页面由 Cloud Translation API 翻译。

自动设置文本字段中的电话号码格式

您可以在应用中自动设置文本字段中的电话号码格式，这样用户在输入数字时，系统就会自动设置电话号码格式，从而节省用户的时间。按照以下指南自动设置电话号码格式：

创建文本字段。
自动设置文本字段中数字的格式。

版本兼容性

此实现要求将项目的 minSDK 设置为 API 级别 21 或更高级别。

依赖项

创建文本字段

首先，配置 TextField。此示例展示了根据北美电话号码分配规则 (NANP) 设置格式的电话号码。NanpVisualTransformation 可将原始数字字符串格式化为 NANP，例如 1234567890 改为 (123) 456-7890。

@Composable
fun PhoneNumber() {
    var phoneNumber by rememberSaveable { mutableStateOf("") }
    val numericRegex = Regex("[^0-9]")
    TextField(
        value = phoneNumber,
        onValueChange = {
            // Remove non-numeric characters.
            val stripped = numericRegex.replace(it, "")
            phoneNumber = if (stripped.length >= 10) {
                stripped.substring(0..9)
            } else {
                stripped
            }
        },
        label = { Text("Enter Phone Number") },
        visualTransformation = NanpVisualTransformation(),
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number)
    )
}TextSnippets.kt

代码要点

一个可组合的 TextField，其中 onValueChange 使用正则表达式移除所有非数字字符，并将长度限制为最多 10 个字符，然后更新 phoneNumber 状态。
TextField 的 visualTransformation 属性上设置了自定义 VisualTransformation 实例。NanpVisualTransformation（此处实例化的自定义类）在下一部分中定义。

自动设置文本字段中数字的格式

如需设置原始数字字符串的格式，请使用自定义 NanpVisualTransformation 类的实现：

class NanpVisualTransformation : VisualTransformation {

    override fun filter(text: AnnotatedString): TransformedText {
        val trimmed = if (text.text.length >= 10) text.text.substring(0..9) else text.text

        var out = if (trimmed.isNotEmpty()) "(" else ""

        for (i in trimmed.indices) {
            if (i == 3) out += ") "
            if (i == 6) out += "-"
            out += trimmed[i]
        }
        return TransformedText(AnnotatedString(out), phoneNumberOffsetTranslator)
    }

    private val phoneNumberOffsetTranslator = object : OffsetMapping {

        override fun originalToTransformed(offset: Int): Int =
            when (offset) {
                0 -> offset
                // Add 1 for opening parenthesis.
                in 1..3 -> offset + 1
                // Add 3 for both parentheses and a space.
                in 4..6 -> offset + 3
                // Add 4 for both parentheses, space, and hyphen.
                else -> offset + 4
            }

        override fun transformedToOriginal(offset: Int): Int =
            when (offset) {
                0 -> offset
                // Subtract 1 for opening parenthesis.
                in 1..5 -> offset - 1
                // Subtract 3 for both parentheses and a space.
                in 6..10 -> offset - 3
                // Subtract 4 for both parentheses, space, and hyphen.
                else -> offset - 4
            }
    }
}TextSnippets.kt

代码要点

filter() 函数会在适当的位置插入非数字格式字符。
phoneNumberOffsetTranslator 对象包含两种方法。一个用于映射原始字符串与格式化字符串之间的偏移量，另一个用于进行反向映射。这些映射可在用户更改文本字段中的光标位置时跳过格式设置字符。
格式化后的字符串和 phoneNumberOffsetTranslator 用作 TransformedText 实例的实参，该实例由 TextField 返回并用于执行格式化。