Możesz automatycznie formatować numer telefonu w polu tekstowym w aplikacji, oszczędzając czas użytkowników dzięki formatowaniu numeru telefonu podczas wpisywania cyfr. Aby automatycznie sformatować numer telefonu:
- Utwórz pole tekstowe.
- Automatyczne formatowanie liczby w polu tekstowym.
Zgodność wersji
Ta implementacja wymaga, aby minimalna wersja pakietu SDK projektu była ustawiona na poziom API 21 lub wyższy.
Zależności
Tworzenie pola tekstowego
Najpierw skonfiguruj TextField
. Ten przykład pokazuje numer telefonu sformatowany zgodnie z planem numeracji w Ameryce Północnej (NANP).NanpVisualTransformation
sformatuj ciąg znaków liczbowych na NANP, np.
1234567890 to (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) ) }
Najważniejsze informacje o kodzie
- Składnik
TextField
, w którym komponentonValueChange
używa wyrażenia regularnego do usuwania wszystkich znaków niebędących cyframi i ogranicza długość do maksymalnie 10 znaków przed zaktualizowaniem stanuphoneNumber
. - Element
TextField
ma niestandardowy egzemplarzVisualTransformation
ustawiony w atrybucievisualTransformation
.NanpVisualTransformation
, klasa niestandardowa utworzona tutaj, jest zdefiniowana w sekcji poniżej.
Automatyczne formatowanie liczby w polu tekstowym
Aby sformatować surowy ciąg znaków liczbowych, użyj implementacji klasy niestandardowej NanpVisualTransformation
:
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 } } }
Najważniejsze informacje o kodzie
- Funkcja
filter()
wstawia znaki formatowania niebędące cyframi w odpowiednich miejscach. - Obiekt
phoneNumberOffsetTranslator
zawiera 2 metody. Jeden z nich mapuje przesunięcia między pierwotnym ciągiem znaków a sformatowanym ciągiem znaków, a drugi wykonuje odwrotne mapowanie. Te mapowania umożliwiają pomijanie znaków formatowania, gdy użytkownik zmienia położenie kursora w polu tekstowym. - Sformatowany ciąg znaków i wartość
phoneNumberOffsetTranslator
są używane jako argumenty instancjiTransformedText
, która jest zwracana i używana przez funkcjęTextField
do formatowania.
Wyniki
![automatycznie sformatowany numer telefonu w polu tekstowym,](https://developer.android.google.cn/static/quick-guides/content/nanp_formatter.gif?hl=pl)
Kolekcje zawierające ten przewodnik
Ten przewodnik należy do tych kolekcji krótkich przewodników, które obejmują szersze zagadnienia związane z tworzeniem aplikacji na Androida:
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=pl)
Tekst wyświetlany
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=pl)