Memformat nomor telepon secara otomatis di kolom teks

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

  • Buat kolom teks.
  • Memformat angka secara 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 mentah angka 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)
    )
}
TextSnippets.kt

Poin penting 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 di-instantiate di sini, ditentukan di bagian berikut.

Memformat angka secara otomatis di kolom teks

Untuk memformat string angka mentah, gunakan penerapan 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
            }
    }
}
TextSnippets.kt

Poin penting tentang kode

  • Fungsi filter() menyisipkan karakter pemformatan non-numerik di tempat yang sesuai.
  • Objek phoneNumberOffsetTranslator berisi dua metode. Salah satunya 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.

Hasil

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

Koleksi yang berisi panduan ini

Panduan ini adalah bagian dari koleksi Panduan Cepat pilihan yang mencakup tujuan pengembangan Android yang lebih luas:

Teks tampilan

Teks adalah bagian utama dari setiap UI. Cari tahu berbagai cara Anda dapat menyajikan teks di aplikasi untuk memberikan pengalaman pengguna yang menyenangkan.
Kumpulan panduan cepat
Pelajari cara menerapkan cara bagi pengguna untuk berinteraksi dengan aplikasi Anda dengan memasukkan teks dan menggunakan cara input lainnya.
Kumpulan panduan cepat

Ada pertanyaan atau masukan?

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