Mettre automatiquement en forme un numéro de téléphone dans un champ de texte

Vous pouvez mettre en forme automatiquement un numéro de téléphone dans un champ de texte de votre application. Cela permet aux utilisateurs de gagner du temps en mettant en forme le numéro de téléphone au fur et à mesure qu'ils saisissent les chiffres. Suivez ces consignes pour mettre en forme automatiquement un numéro de téléphone:

• Créez le champ de texte.
• Mettre en forme automatiquement un nombre dans le champ de texte

Compatibilité des versions

Cette implémentation nécessite que la version minimale du SDK de votre projet soit définie sur le niveau d'API 21 ou supérieur.

Dépendances

Créer le champ de texte

Commencez par configurer TextField. Cet exemple montre un numéro de téléphone au format du plan de numérotation nord-américain (NANP).NanpVisualTransformation met en forme une chaîne brute de chiffres au format NANP, par exemple. 1234567890 au (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

Points clés concernant le code

• Composable TextField où onValueChange utilise une expression régulière pour supprimer tous les caractères non numériques et limite la longueur à 10 caractères maximum avant de mettre à jour l'état phoneNumber.
• TextField possède une instance VisualTransformation personnalisée définie sur l'attribut visualTransformation. NanpVisualTransformation, la classe personnalisée instanciée ici, est définie dans la section suivante.

Formater automatiquement un nombre dans le champ de texte

Pour mettre en forme une chaîne brute de nombres, utilisez l'implémentation de la classe NanpVisualTransformation personnalisée:

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

Points clés concernant le code

• La fonction filter() insère les caractères de mise en forme non numériques aux endroits appropriés.
• L'objet phoneNumberOffsetTranslator contient deux méthodes. L'un mappe les décalages entre la chaîne d'origine et la chaîne formatée, et l'autre effectue le mappage inverse. Ces mappages permettent d'ignorer les caractères de mise en forme lorsque l'utilisateur modifie l'emplacement du curseur dans le champ de texte.
• La chaîne mise en forme et phoneNumberOffsetTranslator sont utilisés comme arguments pour une instance TransformedText renvoyée et utilisée par TextField pour effectuer la mise en forme.

Résultats

Collections contenant ce guide

Ce guide fait partie de ces collections de guides rapides sélectionnées qui couvrent des objectifs de développement Android plus larges:

Texte à afficher

Le texte est un élément central de n'importe quelle interface utilisateur. Découvrez les différentes façons de présenter du texte dans votre application pour offrir une expérience utilisateur agréable.

Collection de guides rapides

Demander une entrée utilisateur

Découvrez comment permettre aux utilisateurs d'interagir avec votre application en saisissant du texte et en utilisant d'autres modes de saisie.

Collection de guides rapides

Vous avez des questions ou des commentaires ?

Consultez notre page des questions fréquentes et découvrez les guides rapides, ou contactez-nous pour nous faire part de vos commentaires.

Accéder aux questions fréquentes Envoyer des commentaires