Formatar automaticamente um número de telefone em um campo de texto

É possível formatar automaticamente um número de telefone em um campo de texto no app, economizando tempo dos usuários ao formatar o número de telefone à medida que eles inserem os dígitos. Siga estas orientações para formatar automaticamente um número de telefone:

• Crie o campo de texto.
• Formate automaticamente um número no campo de texto.

Resultados

Compatibilidade de versões

Essa implementação exige que o minSDK do projeto seja definido como o nível 21 da API ou mais recente.

Dependências

Criar o campo de texto

Primeiro, configure o TextField. Este exemplo mostra um número de telefone formatado de acordo com o Plano de numeração da América do Norte (NANP, na sigla em inglês).NanpVisualTransformation formata uma string bruta de números para NANP, por exemplo, 1234567890 para (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

Pontos principais sobre o código

• Um elemento combinável TextField em que onValueChange usa uma expressão regular para remover todos os caracteres não numéricos e limita o comprimento a um máximo de 10 caracteres antes de atualizar o estado phoneNumber.
• O TextField tem uma instância VisualTransformation personalizada definida no atributo visualTransformation. NanpVisualTransformation, a classe personalizada instanciada aqui, é definida na seção a seguir.

Formatar automaticamente um número no campo de texto

Para formatar uma string bruta de números, use a implementação da classe 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

Pontos principais sobre o código

• A função filter() insere os caracteres de formatação não numéricos nos lugares apropriados.
• O objeto phoneNumberOffsetTranslator contém dois métodos. Um mapeia os deslocamentos entre a string original e a formatada, e o outro faz o mapeamento inverso. Esses mapeamentos permitem pular os caracteres de formatação quando o usuário muda o local do cursor no campo de texto.
• A string formatada e phoneNumberOffsetTranslator são usados como argumentos para uma instância TransformedText que é retornada e usada pelo TextField para realizar a formatação.

Coleções que contêm este guia

Este guia faz parte destas coleções selecionadas de guias de início rápido que abrangem metas mais amplas de desenvolvimento do Android:

Texto de exibição

O texto é uma parte central de qualquer interface. Descubra diferentes maneiras de apresentar texto no seu app para proporcionar uma experiência agradável ao usuário.

Coleção de guias de início rápido

Solicitar entrada do usuário

Saiba como implementar maneiras para que os usuários interajam com seu app inserindo texto e usando outros meios de entrada.

Coleção de guias de início rápido

Tem dúvidas ou quer dar feedback?

Acesse nossa página de perguntas frequentes e saiba mais sobre os guias de início rápido ou entre em contato e compartilhe sua opinião.

Acessar as perguntas frequentes Deixar feedback