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 sformatować numer telefonu, postępuj zgodnie z tymi wskazówkami:

  • Utwórz pole tekstowe.
  • Automatyczne formatowanie liczby w polu tekstowym.

Zgodność wersji

Ta implementacja wymaga, aby minimalny pakiet SDK projektu był ustawiony 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 zgodnie z 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)
    )
}
TextSnippets.kt

Najważniejsze informacje o kodzie

  • Funkcja 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.
  • Element TextField ma niestandardową instancję VisualTransformation ustawioną w atrybucie visualTransformation. NanpVisualTransformation, niestandardowa klasa utworzona w tym miejscu, jest zdefiniowana w następnej sekcji.

Automatyczne formatowanie numeru w polu tekstowym

Aby sformatować ciąg liczb, użyj implementacji klasy custom 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
            }
    }
}
TextSnippets.kt

Najważniejsze informacje o kodzie

  • Funkcja filter() wstawia znaki formatowania nieliczbowego w odpowiednich miejscach.
  • Obiekt phoneNumberOffsetTranslator zawiera 2 metody. Jeden z nich mapuje przesunięcia między ciągiem oryginalnym a sformatowanym, a drugi wykonuje mapowanie odwrotne. 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.

Wyniki

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

Kolekcje, które zawierają ten przewodnik

Ten przewodnik jest częścią wyselekcjonowanych kolekcji przewodników, które obejmują szersze cele związane z programowaniem na Androida:

Tekst wyświetlany

Tekst jest kluczowym elementem każdego interfejsu. Poznaj różne sposoby wyświetlania tekstu w aplikacji, aby zapewnić użytkownikom jak najlepsze wrażenia.
Zbiór krótkich przewodników
Dowiedz się, jak umożliwić użytkownikom interakcję z aplikacją przez wpisywanie tekstu i korzystanie z innych metod wprowadzania danych.
Zbiór krótkich przewodników

Masz pytania lub chcesz podzielić się opinią?

Odwiedź stronę z najczęstszymi pytaniami, aby zapoznać się z przewodnikami, lub skontaktuj się z nami i podziel się swoimi przemyśleniami.
Zobacz najczęstsze pytania Prześlij opinię