Memformat nomor telepon secara otomatis di kolom teks

Anda dapat memformat otomatis nomor telepon di kolom teks dalam aplikasi, sehingga menghemat waktu pengguna dengan memformat nomor telepon saat mereka memasukkan digit. Ikuti panduan ini untuk memformat otomatis nomor telepon:

  • Buat kolom teks.
  • Format otomatis angka di kolom teks.

Hasil

Nomor telepon yang diformat otomatis di kolom teks
Gambar 1. Nomor telepon yang diformat otomatis di kolom teks.

Kompatibilitas versi

Implementasi ini mengharuskan minSDK project Anda ditetapkan ke level API 21 atau yang lebih tinggi.

Dependensi

Membuat kolom teks

Pertama, konfigurasi TextField. Contoh ini menunjukkan nomor telepon yang diformat sesuai dengan North American Numbering Plan (NANP).NanpVisualTransformation memformat string angka mentah ke NANP, misalnya. 1234567890 ke (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)
    )
}

Poin utama tentang kode

  • Composable TextField tempat onValueChange menggunakan ekspresi reguler untuk menghapus semua karakter non-numerik dan membatasi panjangnya hingga maksimum 10 karakter sebelum memperbarui status phoneNumber.
  • TextField memiliki instance VisualTransformation kustom yang ditetapkan pada atribut visualTransformation. NanpVisualTransformation, class kustom yang dibuat instance-nya di sini, ditentukan di bagian berikut.

Memformat otomatis angka di kolom teks

Untuk memformat string angka mentah, gunakan implementasi class NanpVisualTransformation kustom:

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
            }
    }
}

Poin utama tentang kode

  • Fungsi filter() menyisipkan karakter pemformatan non-numerik di tempat yang sesuai.
  • Objek phoneNumberOffsetTranslator berisi dua metode. Satu memetakan offset antara string asli dan yang diformat, dan yang lainnya melakukan pemetaan terbalik. Pemetaan ini memungkinkan karakter pemformatan dilewati saat pengguna mengubah lokasi kursor di kolom teks.
  • String yang diformat dan phoneNumberOffsetTranslator digunakan sebagai argumen untuk instance TransformedText yang ditampilkan dan digunakan oleh TextField untuk melakukan pemformatan.

Koleksi yang berisi panduan ini

Panduan ini adalah bagian dari koleksi Panduan Singkat pilihan yang mencakup sasaran pengembangan Android yang lebih luas:

Teks tampilan

Teks adalah bagian penting dari UI. Temukan berbagai cara Anda dapat menampilkan teks di aplikasi Anda guna memberikan pengalaman pengguna yang menyenangkan.
Koleksi panduan singkat
Pelajari cara menerapkan cara bagi pengguna untuk berinteraksi dengan aplikasi Anda dengan memasukkan teks dan menggunakan cara input lainnya.
Koleksi panduan singkat

Ada pertanyaan atau masukan

Buka halaman pertanyaan umum (FAQ) kami dan pelajari panduan singkat atau hubungi kami dan sampaikan pendapat Anda.
Buka FAQ Berikan masukan