คุณสามารถจัดรูปแบบหมายเลขโทรศัพท์ในช่องข้อความในแอปโดยอัตโนมัติ ซึ่งจะช่วยประหยัดเวลาของผู้ใช้โดยจัดรูปแบบหมายเลขโทรศัพท์ขณะที่ผู้ใช้ป้อนตัวเลข ทําตามคําแนะนําต่อไปนี้เพื่อจัดรูปแบบหมายเลขโทรศัพท์โดยอัตโนมัติ
- สร้างช่องข้อความ
- จัดรูปแบบตัวเลขในช่องข้อความโดยอัตโนมัติ
ความเข้ากันได้ของเวอร์ชัน
การใช้งานนี้กำหนดให้โปรเจ็กต์ของคุณตั้งค่า minSDK เป็น API ระดับ 21 ขึ้นไป
ทรัพยากร Dependency
สร้างช่องข้อความ
ก่อนอื่น ให้กําหนดค่า TextField
ตัวอย่างนี้แสดงหมายเลขโทรศัพท์ที่จัดรูปแบบตามแผนการจัดลำดับหมายเลขโทรศัพท์ของอเมริกาเหนือ (NANP)NanpVisualTransformation
จัดรูปแบบสตริงตัวเลขดิบเป็น NANP เช่น
1234567890 เป็น (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) ) }
ประเด็นสำคัญเกี่ยวกับรหัส
TextField
แบบคอมโพสิเบิลที่onValueChange
ใช้นิพจน์ทั่วไปเพื่อนำอักขระที่ไม่ใช่ตัวเลขทั้งหมดออกและจำกัดความยาวไว้ที่ไม่เกิน 10 อักขระก่อนอัปเดตสถานะphoneNumber
TextField
มีอินสแตนซ์VisualTransformation
ที่กําหนดเองซึ่งตั้งค่าไว้ในแอตทริบิวต์visualTransformation
NanpVisualTransformation
ซึ่งเป็นคลาสที่กําหนดเองซึ่งสร้างอินสแตนซ์ที่นี่จะกําหนดไว้ในส่วนต่อไปนี้
จัดรูปแบบตัวเลขในช่องข้อความโดยอัตโนมัติ
หากต้องการจัดรูปแบบสตริงตัวเลขดิบ ให้ใช้การใช้งานคลาส 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 } } }
ประเด็นสำคัญเกี่ยวกับรหัส
- ฟังก์ชัน
filter()
จะแทรกอักขระการจัดรูปแบบที่ไม่ใช่ตัวเลขในตำแหน่งที่เหมาะสม - ออบเจ็กต์
phoneNumberOffsetTranslator
มีเมธอด 2 รายการ รายการหนึ่งจะแมปออฟเซตระหว่างสตริงต้นฉบับกับสตริงที่จัดรูปแบบแล้ว และอีกรายการหนึ่งจะทำการแมปย้อนกลับ การแมปเหล่านี้ช่วยให้ข้ามอักขระการจัดรูปแบบได้เมื่อผู้ใช้เปลี่ยนตำแหน่งเคอร์เซอร์ในช่องข้อความ - ระบบจะใช้สตริงที่จัดรูปแบบและ
phoneNumberOffsetTranslator
เป็นอาร์กิวเมนต์สำหรับอินสแตนซ์TransformedText
ที่แสดงผลและTextField
ใช้เพื่อจัดรูปแบบ
ผลลัพธ์
![หมายเลขโทรศัพท์ที่จัดรูปแบบอัตโนมัติในช่องข้อความ](https://developer.android.google.cn/static/quick-guides/content/nanp_formatter.gif?hl=th)
คอลเล็กชันที่มีคู่มือนี้
คู่มือนี้เป็นส่วนหนึ่งของคอลเล็กชันคู่มือฉบับย่อที่มีการดูแลจัดการ ซึ่งครอบคลุมเป้าหมายการพัฒนา Android ที่กว้างขึ้น ดังนี้
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=th)
ข้อความที่แสดง
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=th)