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

Puedes aplicar formato automático 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 aplicar formato automático a un número de teléfono:

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

Resultados

Un número de teléfono con formato automático en el campo de texto
Figura 1. Un número de teléfono con formato automático en el campo de texto.

Compatibilidad de versiones

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

Dependencias

Crea el campo de texto

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

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 VisualTransformation personalizada establecida en el visualTransformation atributo. 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 de números sin procesar, 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
            }
    }
}

Puntos clave sobre el código

  • La función filter() inserta los caracteres de formato no numéricos en los lugares apropiados.
  • El objeto phoneNumberOffsetTranslator contiene dos métodos. Uno asigna los desplazamientos entre la cadena original y la formateada, y el otro 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 formateada y phoneNumberOffsetTranslator se usan como argumentos para una instancia TransformedText que muestra y usa el TextField para realizar el formato.

Colecciones que contienen esta guía

Esta guía forma parte de estas colecciones seleccionadas de Guías rápidas 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 agradable.
Colección de guías rápidas
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

¿Tienes preguntas o comentarios?

Ve a nuestra página de preguntas frecuentes y obtén información sobre las guías rápidas, o bien comunícate con nosotros y cuéntanos lo que piensas.
Ir a las Preguntas frecuentes Cómo enviar comentarios