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

Puedes dar formato automáticamente a un número de teléfono en un campo de texto de tu app, lo que les ahorra tiempo a los usuarios, ya que el número de teléfono se formatea a medida que ingresan dígitos. Sigue esta guía para dar formato automáticamente a un número de teléfono:

• Crea el campo de texto.
• Aplica formato automáticamente 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 Norteamérica (NANP).NanpVisualTransformation da formato a una cadena sin procesar de números a 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 componible TextField en el que 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 una instancia personalizada de VisualTransformation establecida en el atributo visualTransformation. NanpVisualTransformation, la clase personalizada de la que se crea una instancia aquí, se define en la siguiente sección.

Aplica 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 adecuados.
• El objeto phoneNumberOffsetTranslator contiene dos métodos. Una asigna los desplazamientos entre la cadena original y la con formato, 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 de TransformedText que muestra y usa TextField para aplicar el formato.

Resultados

Colecciones que contienen esta guía

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

Texto visible

El texto es una pieza central de cualquier IU. Descubre las diferentes formas en que puedes presentar texto en tu app para proporcionar una experiencia del usuario encantadora.

Colección de guías rápidas

Cómo solicitar la entrada del usuario

Aprende a implementar formas en las que los usuarios puedan interactuar con tu app ingresando texto y usando otros medios de entrada.

Colección de guías rápidas

Tienes preguntas o comentarios

Ve a nuestra página de preguntas frecuentes para obtener información sobre las guías rápidas o comunícate con nosotros para contarnos tu opinión.

Ir a las Preguntas frecuentes Enviar comentarios