Memformat nomor telepon secara otomatis di kolom teks
Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
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 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:
classNanpVisualTransformation:VisualTransformation{overridefunfilter(text:AnnotatedString):TransformedText{valtrimmed=if(text.text.length>=10)text.text.substring(0..9)elsetext.textvarout=if(trimmed.isNotEmpty())"("else""for(iintrimmed.indices){if(i==3)out+=") "if(i==6)out+="-"out+=trimmed[i]}returnTransformedText(AnnotatedString(out),phoneNumberOffsetTranslator)}privatevalphoneNumberOffsetTranslator=object:OffsetMapping{overridefunoriginalToTransformed(offset:Int):Int=when(offset){0->offset// Add 1 for opening parenthesis.in1..3->offset+1// Add 3 for both parentheses and a space.in4..6->offset+3// Add 4 for both parentheses, space, and hyphen.else->offset+4}overridefuntransformedToOriginal(offset:Int):Int=when(offset){0->offset// Subtract 1 for opening parenthesis.in1..5->offset-1// Subtract 3 for both parentheses and a space.in6..10->offset-3// Subtract 4 for both parentheses, space, and hyphen.else->offset-4}}}
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
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 tampilan
Teks adalah bagian utama dari setiap UI. Cari tahu berbagai cara
untuk menyajikan teks di aplikasi Anda guna memberikan pengalaman pengguna yang menyenangkan.
Konten dan contoh kode di halaman ini tunduk kepada lisensi yang dijelaskan dalam Lisensi Konten. Java dan OpenJDK adalah merek dagang atau merek dagang terdaftar dari Oracle dan/atau afiliasinya.
Terakhir diperbarui pada 2025-02-06 UTC.
[[["Mudah dipahami","easyToUnderstand","thumb-up"],["Memecahkan masalah saya","solvedMyProblem","thumb-up"],["Lainnya","otherUp","thumb-up"]],[["Informasi yang saya butuhkan tidak ada","missingTheInformationINeed","thumb-down"],["Terlalu rumit/langkahnya terlalu banyak","tooComplicatedTooManySteps","thumb-down"],["Sudah usang","outOfDate","thumb-down"],["Masalah terjemahan","translationIssue","thumb-down"],["Masalah kode / contoh","samplesCodeIssue","thumb-down"],["Lainnya","otherDown","thumb-down"]],["Terakhir diperbarui pada 2025-02-06 UTC."],[],[],null,["# Auto-format a phone number in a text field\n\n\u003cbr /\u003e\n\nYou can auto format a phone number in a text field in your app, saving users\ntime by formatting the phone number as they input digits. Follow this guidance\nto auto format a phone number:\n\n- Create the text field.\n- Auto-format a number in the text field.\n\nVersion compatibility\n---------------------\n\nThis implementation requires that your project minSDK be set to API level 21 or\nhigher.\n\n### Dependencies\n\n### Kotlin\n\n\u003cbr /\u003e\n\n```kotlin\n implementation(platform(\"androidx.compose:compose-bom:2025.08.00\"))\n implementation(\"androidx.compose.material3:material3\")\n \n```\n\n\u003cbr /\u003e\n\n### Groovy\n\n\u003cbr /\u003e\n\n```groovy\n implementation platform('androidx.compose:compose-bom:2025.08.00')\n implementation 'androidx.compose.material3:material3'\n \n```\n\n\u003cbr /\u003e\n\nCreate the text field\n---------------------\n\nFirst, configure the [`TextField`](/reference/kotlin/androidx/compose/material/package-summary#TextField(androidx.compose.ui.text.input.TextFieldValue,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.text.TextStyle,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Boolean,androidx.compose.ui.text.input.VisualTransformation,androidx.compose.foundation.text.KeyboardOptions,androidx.compose.foundation.text.KeyboardActions,kotlin.Boolean,kotlin.Int,kotlin.Int,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Shape,androidx.compose.material.TextFieldColors)). This example shows a phone number\nformatted per the North American Numbering Plan\n(NANP).`NanpVisualTransformation` formats a raw string of numbers to NANP, eg.\n1234567890 to (123) 456-7890.\n\n\n```kotlin\n@Composable\nfun PhoneNumber() {\n var phoneNumber by rememberSaveable { mutableStateOf(\"\") }\n val numericRegex = Regex(\"[^0-9]\")\n TextField(\n value = phoneNumber,\n onValueChange = {\n // Remove non-numeric characters.\n val stripped = numericRegex.replace(it, \"\")\n phoneNumber = if (stripped.length \u003e= 10) {\n stripped.substring(0..9)\n } else {\n stripped\n }\n },\n label = { Text(\"Enter Phone Number\") },\n visualTransformation = NanpVisualTransformation(),\n keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number)\n )\n}https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/text/TextSnippets.kt#L797-L816\n```\n\n\u003cbr /\u003e\n\n### Key points about the code\n\n- A `TextField` composable where the `onValueChange` uses a regular expression to remove all non-numeric characters and limits the length to a maximum of 10 characters before updating the `phoneNumber` state.\n- The `TextField` has a custom [`VisualTransformation`](/reference/kotlin/androidx/compose/ui/text/input/VisualTransformation) instance set on the `visualTransformation` attribute. `NanpVisualTransformation`, the custom class instantiated here, is defined in the following section.\n\nAuto-format a number in the text field\n--------------------------------------\n\nTo format a raw string of numbers, use the implementation of the custom\n`NanpVisualTransformation` class:\n\n\n```kotlin\nclass NanpVisualTransformation : VisualTransformation {\n\n override fun filter(text: AnnotatedString): TransformedText {\n val trimmed = if (text.text.length \u003e= 10) text.text.substring(0..9) else text.text\n\n var out = if (trimmed.isNotEmpty()) \"(\" else \"\"\n\n for (i in trimmed.indices) {\n if (i == 3) out += \") \"\n if (i == 6) out += \"-\"\n out += trimmed[i]\n }\n return TransformedText(AnnotatedString(out), phoneNumberOffsetTranslator)\n }\n\n private val phoneNumberOffsetTranslator = object : OffsetMapping {\n\n override fun originalToTransformed(offset: Int): Int =\n when (offset) {\n 0 -\u003e offset\n // Add 1 for opening parenthesis.\n in 1..3 -\u003e offset + 1\n // Add 3 for both parentheses and a space.\n in 4..6 -\u003e offset + 3\n // Add 4 for both parentheses, space, and hyphen.\n else -\u003e offset + 4\n }\n\n override fun transformedToOriginal(offset: Int): Int =\n when (offset) {\n 0 -\u003e offset\n // Subtract 1 for opening parenthesis.\n in 1..5 -\u003e offset - 1\n // Subtract 3 for both parentheses and a space.\n in 6..10 -\u003e offset - 3\n // Subtract 4 for both parentheses, space, and hyphen.\n else -\u003e offset - 4\n }\n }\n}https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/text/TextSnippets.kt#L820-L859\n```\n\n\u003cbr /\u003e\n\n### Key points about the code\n\n- The `filter()` function inserts the non-numeric formatting characters at the appropriate places.\n- The `phoneNumberOffsetTranslator` object contains two methods. One maps the offsets between the original string and the formatted one, and the other does the reverse mapping. These mappings enable the skipping of the formatting characters when the user changes the cursor location in the text field.\n- The formatted string and `phoneNumberOffsetTranslator` are used as arguments for a `TransformedText` instance that is returned and used by the `TextField` to perform the formatting.\n\nResults\n-------\n\n**Figure 1.** An auto-formatted phone number in the text field.\n\nCollections that contain this guide\n-----------------------------------\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\n### Display text\n\nText is a central piece of any UI. Find out different ways you can present text in your app to provide a delightful user experience. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-text) \n\n### Request user input\n\nLearn how to implement ways for users to interact with your app by entering text and using other means of input. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/request-user-input) \n\nHave questions or feedback\n--------------------------\n\nGo to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts. \n[Go to FAQ](/quick-guides/faq) [Leave feedback](https://issuetracker.google.com/issues/new?component=1573691&template=1993320)"]]