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) ) }
Wichtige Punkte zum Code
- Ein
TextField
-Kompositelement, bei dem dieonValueChange
mit einem regulären Ausdruck alle nicht numerischen Zeichen entfernt und die Länge auf maximal 10 Zeichen begrenzt, bevor derphoneNumber
-Status aktualisiert wird. - Für das
TextField
-Attribut ist eine benutzerdefinierteVisualTransformation
-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 } } }
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 eineTransformedText
-Instanz verwendet, die zurückgegeben und vonTextField
zur Formatierung verwendet wird.
Ergebnisse
![Eine automatisch formatierte Telefonnummer im Textfeld](https://developer.android.com/static/quick-guides/content/nanp_formatter.gif?hl=de)
Sammlungen, die diesen Leitfaden enthalten
Dieser Leitfaden ist Teil der folgenden ausgewählten Sammlungen von Kurzanleitungen, die allgemeinere Ziele der Android-Entwicklung abdecken:
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=de)
Anzeigetext
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=de)