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 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).NanpVisualTransformationsformatuj 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)
    )
}
TextSnippets.kt

Najważniejsze informacje o kodzie

  • Składnik TextField, w którym komponent onValueChange 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 stanu phoneNumber.
  • Element TextField ma niestandardowy egzemplarz VisualTransformation ustawiony w atrybucie visualTransformation. 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
            }
    }
}
TextSnippets.kt

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 instancji TransformedText, która jest zwracana i używana przez funkcję TextField do formatowania.

Wyniki

automatycznie sformatowany numer telefonu w polu tekstowym,
Rysunek 1. W polu tekstowym znajduje się automatycznie sformatowany numer telefonu.

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:

Tekst wyświetlany

Tekst jest centralnym elementem każdego interfejsu użytkownika. Dowiedz się, jak możesz wyświetlać tekst w aplikacji, aby zapewnić użytkownikom przyjemne wrażenia.
Kolekcja krótkich przewodników
Dowiedz się, jak wdrożyć sposoby interakcji użytkowników z aplikacją przez wpisywanie tekstu i używanie innych metod wprowadzania danych.
Kolekcja krótkich przewodników

Masz pytania lub chcesz przekazać opinię?

Otwórz stronę z najczęstszymi pytaniami i poznaj krótkie przewodniki lub skontaktuj się z nami i powiedz nam, co o tym myślisz.
Najczęstsze pytania Prześlij opinię