Memformat nomor telepon secara otomatis di kolom teks

Anda dapat memformat nomor telepon secara otomatis di kolom teks di aplikasi, sehingga menghemat waktu pengguna dengan memformat nomor telepon saat mereka memasukkan angka. 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 API level 21 atau yang lebih tinggi.

Dependensi

Membuat kolom teks

Pertama, konfigurasikan 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-poin penting tentang kode

  • Composable TextField dengan 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 angka secara otomatis 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-poin penting tentang kode

  • Fungsi filter() menyisipkan karakter pemformatan non-numerik di tempat yang sesuai.
  • Objek phoneNumberOffsetTranslator berisi dua metode. Satu pemetaan offset antara string asli dan string yang diformat, dan yang lainnya melakukan pemetaan balik. Pemetaan ini memungkinkan karakter format dilewatkan saat pengguna mengubah lokasi kursor di kolom teks.
  • String berformat 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 membahas sasaran pengembangan Android yang lebih luas:

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

Ada pertanyaan atau masukan

Buka halaman pertanyaan umum (FAQ) dan pelajari panduan singkat atau hubungi kami dan beri tahu kami pendapat Anda.