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) ) }
Puntos clave sobre el código
- Un elemento componible
TextField
en el queonValueChange
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 estadophoneNumber
. - El
TextField
tiene una instancia personalizada deVisualTransformation
establecida en el atributovisualTransformation
.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 } } }
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 deTransformedText
que muestra y usaTextField
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
