Aplicar formato automático a un número de teléfono en un campo de texto

Puedes darle formato automático a un número de teléfono en un campo de texto de tu app, lo que les ahorrará tiempo a los usuarios, ya que el número se formateará a medida que ingresen los dígitos. Sigue esta guía para aplicar el formato automático a un número de teléfono:

• Crea el campo de texto.
• Darle formato automático a un número en el campo de texto

Compatibilidad de versiones

Esta implementación requiere que el minSDK de tu proyecto se establezca en el nivel de API 21 o superior.

Dependencias

Crea el campo de texto

Primero, configura TextField. En este ejemplo, se muestra un número de teléfono con el formato del Plan de Numeración de América del Norte (NANP).NanpVisualTransformation da formato a una cadena sin procesar de números según el NANP, p. ej., 1234567890 a (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

Puntos clave sobre el código

• Un elemento TextField componible en el que el elemento onValueChange usa una expresión regular para quitar todos los caracteres no numéricos y limita la longitud a un máximo de 10 caracteres antes de actualizar el estado phoneNumber.
• El TextField tiene un conjunto de instancias de VisualTransformation personalizado en el atributo visualTransformation. NanpVisualTransformation, la clase personalizada de la que se crea una instancia aquí, se define en la siguiente sección.

Cómo dar formato automático a un número en el campo de texto

Para dar formato a una cadena sin procesar de números, usa la implementación de la clase NanpVisualTransformation personalizada:

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

Puntos clave sobre el código

• La función filter() inserta los caracteres de formato no numéricos en los lugares correspondientes.
• El objeto phoneNumberOffsetTranslator contiene dos métodos. Una asigna las compensaciones entre la cadena original y la formateada, y la otra realiza la asignación inversa. Estas asignaciones permiten omitir los caracteres de formato cuando el usuario cambia la ubicación del cursor en el campo de texto.
• La cadena con formato y phoneNumberOffsetTranslator se usan como argumentos para una instancia TransformedText que devuelve y usa el TextField para realizar el formato.

Resultados

Colecciones que contienen esta guía

Esta guía forma parte de las colecciones seleccionadas de Guías rápidas que abarcan objetivos más amplios de desarrollo para Android:

Texto visible

El texto es una pieza central de cualquier IU. Descubre diferentes formas de presentar texto en tu app para brindar una experiencia del usuario agradable.

Colección de guías rápidas

Solicita la entrada del usuario

Aprende a implementar formas para que los usuarios interactúen con tu app ingresando texto y usando otros medios de entrada.

Colección de guías rápidas

Preguntas o comentarios

Visita nuestra página de preguntas frecuentes y consulta las guías rápidas, o bien comunícate con nosotros para contarnos tu opinión.

Ir a las preguntas frecuentes Enviar comentarios