Formattare automaticamente un numero di telefono in un campo di testo

Puoi formattare automaticamente un numero di telefono in un campo di testo della tua app, risparmiando tempo agli utenti perché il numero viene formattato man mano che inseriscono le cifre. Segui queste indicazioni per formattare automaticamente un numero di telefono:

• Crea il campo di testo.
• Formatta automaticamente un numero nel campo di testo.

Compatibilità delle versioni

Questa implementazione richiede che il valore minSDK del progetto sia impostato sul livello API 21 o superiore.

Dipendenze

Crea il campo di testo

Innanzitutto, configura TextField. Questo esempio mostra un numero di telefono formattato in base al piano di numerazione nordamericano (NANP).NanpVisualTransformation formatta una stringa non elaborata di numeri in NANP, ad es. 1234567890 al numero (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

Punti chiave del codice

• Un composable TextField in cui onValueChange utilizza un'espressione regolare per rimuovere tutti i caratteri non numerici e limita la lunghezza a un massimo di 10 caratteri prima di aggiornare lo stato phoneNumber.
• TextField ha un'istanza VisualTransformation personalizzata impostata sull'attributo visualTransformation. NanpVisualTransformation, la classe personalizzata istanzata qui, è definita nella sezione seguente.

Formattare automaticamente un numero nel campo di testo

Per formattare una stringa non elaborata di numeri, utilizza l'implementazione della classe personalizzataNanpVisualTransformation:

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

Punti chiave del codice

• La funzione filter() inserisce i caratteri di formattazione non numerici nelle posizioni appropriate.
• L'oggetto phoneNumberOffsetTranslator contiene due metodi. Uno mappa gli offset tra la stringa originale e quella formattata, mentre l'altro esegue la mappatura inversa. Queste mappature consentono di saltare i caratteri di formattazione quando l'utente modifica la posizione del cursore nel campo di testo.
• La stringa formattata e phoneNumberOffsetTranslator vengono utilizzati come argomenti per un'istanza TransformedText restituita e utilizzata da TextField per eseguire la formattazione.

Risultati

Raccolte che contengono questa guida

Questa guida fa parte di queste raccolte di guide rapide selezionate che coprono obiettivi di sviluppo Android più ampi:

Testo visualizzato

Il testo è un elemento centrale di qualsiasi interfaccia utente. Scopri diversi modi per presentare il testo nella tua app in modo da offrire un'esperienza utente piacevole.

Collezione di guide rapide

Richiedi input utente

Scopri come implementare modi per consentire agli utenti di interagire con la tua app inserendo testo e utilizzando altri metodi di inserimento.

Collezione di guide rapide

Domande o feedback

Visita la nostra pagina delle domande frequenti e scopri le guide rapide o contattaci per farci sapere cosa ne pensi.

Vai alle domande frequenti Lascia un feedback