คุณสามารถจัดรูปแบบหมายเลขโทรศัพท์ในช่องข้อความในแอปโดยอัตโนมัติ ซึ่งจะช่วยประหยัดเวลาของผู้ใช้ ด้วยการจัดรูปแบบหมายเลขโทรศัพท์ขณะที่ผู้ใช้ป้อนตัวเลข ทำตามคำแนะนำนี้ เพื่อจัดรูปแบบหมายเลขโทรศัพท์โดยอัตโนมัติ
- สร้างช่องข้อความ
- จัดรูปแบบตัวเลขในช่องข้อความโดยอัตโนมัติ
ความเข้ากันได้ของเวอร์ชัน
การติดตั้งใช้งานนี้กำหนดให้ตั้งค่า minSDK ของโปรเจ็กต์เป็น API ระดับ 21 ขึ้นไป
การขึ้นต่อกัน
สร้างช่องข้อความ
ก่อนอื่น ให้กำหนดค่า 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ที่กำหนดเองซึ่งตั้งค่าไว้ในแอตทริบิวต์visualTransformationNanpVisualTransformationซึ่งเป็นคลาสที่กำหนดเอง ที่สร้างขึ้นที่นี่ จะกำหนดไว้ในส่วนต่อไปนี้
จัดรูปแบบตัวเลขในช่องข้อความโดยอัตโนมัติ
หากต้องการจัดรูปแบบสตริงตัวเลขดิบ ให้ใช้การติดตั้งใช้งานคลาส custom
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เพื่อทำการจัดรูปแบบ
ผลลัพธ์
คอลเล็กชันที่มีคำแนะนำนี้
คู่มือนี้เป็นส่วนหนึ่งของคอลเล็กชันคู่มือฉบับย่อที่คัดสรรมาแล้วซึ่งครอบคลุม เป้าหมายการพัฒนา Android ที่กว้างขึ้น
ข้อความที่แสดง