จัดรูปแบบหมายเลขโทรศัพท์ในช่องข้อความโดยอัตโนมัติ

คุณสามารถจัดรูปแบบหมายเลขโทรศัพท์ในช่องข้อความในแอปโดยอัตโนมัติ ซึ่งจะช่วยประหยัดเวลาของผู้ใช้โดยจัดรูปแบบหมายเลขโทรศัพท์ขณะที่ผู้ใช้ป้อนตัวเลข ทําตามคําแนะนําต่อไปนี้เพื่อจัดรูปแบบหมายเลขโทรศัพท์โดยอัตโนมัติ

  • สร้างช่องข้อความ
  • จัดรูปแบบตัวเลขในช่องข้อความโดยอัตโนมัติ

ความเข้ากันได้ของเวอร์ชัน

การใช้งานนี้กำหนดให้โปรเจ็กต์ของคุณตั้งค่า 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 ใช้เพื่อจัดรูปแบบ

ผลลัพธ์

หมายเลขโทรศัพท์ที่จัดรูปแบบอัตโนมัติในช่องข้อความ
รูปที่ 1 หมายเลขโทรศัพท์ที่จัดรูปแบบอัตโนมัติในช่องข้อความ

คอลเล็กชันที่มีคู่มือนี้

คู่มือนี้เป็นส่วนหนึ่งของคอลเล็กชันคู่มือฉบับย่อที่มีการดูแลจัดการ ซึ่งครอบคลุมเป้าหมายการพัฒนา Android ที่กว้างขึ้น ดังนี้

ข้อความเป็นส่วนสําคัญของ UI ดูวิธีต่างๆ ที่คุณสามารถนำเสนอข้อความในแอปเพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่น่าพึงพอใจ
ดูวิธีใช้วิธีที่ผู้ใช้โต้ตอบกับแอปของคุณโดยการป้อนข้อความและใช้วิธีป้อนข้อมูลอื่นๆ

หากมีคำถามหรือความคิดเห็น

ไปที่หน้าคำถามที่พบบ่อยเพื่อดูคู่มือฉบับย่อหรือติดต่อเราเพื่อบอกความคิดเห็นของคุณ