Telefonnummern in Textfeldern automatisch formatieren

Sie können eine Telefonnummer in einem Textfeld in Ihrer App automatisch formatieren. So sparen Nutzer Zeit, da die Telefonnummer formatiert wird, während sie Ziffern eingeben. So formatieren Sie eine Telefonnummer automatisch:

• Erstellen Sie das Textfeld.
• Zahlen im Textfeld automatisch formatieren

Versionskompatibilität

Für diese Implementierung muss das minSDK Ihres Projekts auf API-Level 21 oder höher festgelegt sein.

Abhängigkeiten

Textfeld erstellen

Konfigurieren Sie zuerst die TextField. In diesem Beispiel wird eine Telefonnummer gemäß dem North American Numbering Plan (NANP) formatiert.NanpVisualTransformation formatiert einen Rohstring von Zahlen in NANP, z. B. 1234567890 an (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

Wichtige Punkte zum Code

• Ein TextField-Kompositelement, bei dem die onValueChange mit einem regulären Ausdruck alle nicht numerischen Zeichen entfernt und die Länge auf maximal 10 Zeichen begrenzt, bevor der phoneNumber-Status aktualisiert wird.
• Für das TextField-Attribut ist eine benutzerdefinierte VisualTransformation-Instanz festgelegt.visualTransformation NanpVisualTransformation, die hier instanziierte benutzerdefinierte Klasse, wird im folgenden Abschnitt definiert.

Zahlen im Textfeld automatisch formatieren

Verwenden Sie die Implementierung der benutzerdefinierten Klasse NanpVisualTransformation, um einen Rohstring mit Zahlen zu formatieren:

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

Wichtige Punkte zum Code

• Die Funktion filter() fügt die nicht numerischen Formatierungszeichen an den entsprechenden Stellen ein.
• Das phoneNumberOffsetTranslator-Objekt enthält zwei Methoden. Mit der einen werden die Abweichungen zwischen dem ursprünglichen String und dem formatierten String zugeordnet, mit der anderen die umgekehrte Zuordnung. Durch diese Zuordnungen können die Formatierungszeichen übersprungen werden, wenn der Nutzer die Position des Cursors im Textfeld ändert.
• Der formatierte String und phoneNumberOffsetTranslator werden als Argumente für eine TransformedText-Instanz verwendet, die zurückgegeben und von TextField zur Formatierung verwendet wird.

Ergebnisse

Sammlungen, die diesen Leitfaden enthalten

Dieser Leitfaden ist Teil der folgenden ausgewählten Sammlungen von Kurzanleitungen, die allgemeinere Ziele der Android-Entwicklung abdecken:

Anzeigetext

Text ist ein zentrales Element jeder Benutzeroberfläche. Hier erfahren Sie, wie Sie Text in Ihrer App präsentieren können, um die Nutzerfreundlichkeit zu verbessern.

Sammlung von Kurzanleitungen

Nutzereingabe anfordern

Hier erfahren Sie, wie Sie Nutzern die Möglichkeit geben, durch Eingabe von Text und andere Eingabemethoden mit Ihrer App zu interagieren.

Sammlung von Kurzanleitungen

Hast du Fragen oder Feedback?

Auf unserer Seite mit häufig gestellten Fragen finden Sie Kurzanleitungen. Sie können sich auch gern an uns wenden.

Zu den FAQs Feedback geben