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

Vous pouvez mettre automatiquement en forme un numéro de téléphone dans un champ de texte de votre application, ce qui permet aux utilisateurs de gagner du temps en mettant en forme le numéro de téléphone à mesure qu'ils saisissent des chiffres. Pour mettre automatiquement en forme un numéro de téléphone, suivez ces instructions :

• Créez le champ de texte.
• Mettez automatiquement en forme un numéro dans le champ de texte.

Résultats

Compatibilité des versions

Cette implémentation nécessite que le minSDK de votre projet soit défini sur le niveau d'API 21 ou supérieur.

Dépendances

Créer le champ de texte

Commencez par configurer le TextField. Cet exemple montre un numéro de téléphone mis en forme conformément au plan de numérotation nord-américain (NANP).NanpVisualTransformation met en forme une chaîne brute de numéros au format NANP, par exemple 1234567890 au format (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.
• Le TextField comporte une instance VisualTransformation personnalisée définie sur l' visualTransformation attribut. NanpVisualTransformation, la classe personnalisée instanciée ici, est définie dans la section suivante.

Mettre automatiquement en forme un numéro dans le champ de texte

Pour mettre en forme une chaîne brute de numéros, 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 emplacements appropriés.
• L'objet phoneNumberOffsetTranslator contient deux méthodes. L'une mappe les décalages entre la chaîne d'origine et la chaîne mise en forme, 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 qui est renvoyée et utilisée par le TextField pour effectuer la mise en forme.

Collections contenant ce guide

Ce guide fait partie de ces collections de guides rapides organisé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 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 implémenter des moyens permettant aux utilisateurs d'interagir avec votre application en saisissant du texte et en utilisant d'autres méthodes de saisie.

Collection de guides rapides

Vous avez des questions ou des commentaires ?

Consultez notre page de questions fréquentes pour en savoir plus sur les guides rapides ou contactez-nous pour nous faire part de vos commentaires.

Accéder aux questions fréquentes Laisser un commentaire