Automatyczne formatowanie numeru telefonu w polu tekstowym

Możesz automatycznie formatować numer telefonu w polu tekstowym w aplikacji, oszczędzając czas użytkowników, ponieważ numer telefonu będzie formatowany podczas wpisywania cyfr. Aby automatycznie formatować numer telefonu, postępuj zgodnie z tymi wskazówkami:

  • Utwórz pole tekstowe.
  • Automatycznie sformatuj numer w polu tekstowym.

Wyniki

automatycznie sformatowany numer telefonu w polu tekstowym;
Rysunek 1. Automatycznie sformatowany numer telefonu w polu tekstowym.

Zgodność wersji

Ta implementacja wymaga, aby minimalna wersja 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 północnoamerykańskim planem numeracji (NANP).NanpVisualTransformation formatuje ciąg cyfr na NANP, np. 1234567890 na (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

  • Kompozycja TextField, w której onValueChange używa wyrażenia regularnego do usunięcia wszystkich znaków nienumerycznych i ogranicza długość do maksymalnie 10 znaków przed zaktualizowaniem stanu phoneNumber.
  • TextField ma niestandardową VisualTransformation instancję ustawioną w atrybucie visualTransformation. NanpVisualTransformation, czyli niestandardowa klasa utworzona w tym miejscu, jest zdefiniowana w następnej sekcji.

Automatyczne formatowanie numeru w polu tekstowym

Aby sformatować ciąg cyfr, użyj implementacji niestandardowej klasy 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 nienumerycznego w odpowiednich miejscach.
  • Obiekt phoneNumberOffsetTranslator zawiera 2 metody. Jedna z nich mapuje przesunięcia między ciągiem oryginalnym a sformatowanym, a druga 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 phoneNumberOffsetTranslator są używane jako argumenty instancji TransformedText, która jest zwracana i używana przez TextField do formatowania.

Zbiory zawierające ten przewodnik

Ten przewodnik jest częścią tych wybranych zbiorów krótkich przewodników, które obejmują szersze cele związane z tworzeniem aplikacji na Androida:

Wyświetlanie tekstu

Tekst jest centralnym elementem każdego interfejsu. Dowiedz się, jak prezentować tekst w aplikacji, aby zapewnić użytkownikom jak najlepsze wrażenia.
Zbiór krótkich przewodników
Dowiedz się, jak implementować sposoby interakcji użytkowników z aplikacją przez wpisywanie tekstu i używanie innych metod wprowadzania danych.
Zbiór krótkich przewodników

Masz pytania lub opinie?

Otwórz stronę z najczęstszymi pytaniami i dowiedz się więcej o krótkich przewodnikach lub skontaktuj się z nami i podziel się swoimi przemyśleniami.
Otwórz najczęstsze pytania Prześlij opinię