Tự động định dạng số điện thoại trong trường văn bản

Bạn có thể tự động định dạng số điện thoại trong một trường văn bản trong ứng dụng của mình, giúp người dùng tiết kiệm thời gian bằng cách định dạng số điện thoại khi họ nhập các chữ số. Làm theo hướng dẫn này để tự động định dạng số điện thoại:

  • Tạo trường văn bản.
  • Tự động định dạng một số trong trường văn bản.

Khả năng tương thích giữa các phiên bản

Việc triển khai này yêu cầu bạn đặt minSDK của dự án thành API cấp 21 trở lên.

Phần phụ thuộc

Tạo trường văn bản

Trước tiên, hãy định cấu hình TextField. Ví dụ này cho thấy số điện thoại được định dạng theo Kế hoạch đánh số Bắc Mỹ (NANP). NanpVisualTransformation định dạng một chuỗi số thô thành NANP, ví dụ: 1234567890 đến (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)
    )
}

Các điểm chính về mã

  • Một thành phần kết hợp TextField trong đó onValueChange sử dụng một biểu thức chính quy để xoá tất cả các ký tự không phải là số và giới hạn độ dài tối đa là 10 ký tự trước khi cập nhật trạng thái phoneNumber.
  • TextField có một thực thể VisualTransformation tuỳ chỉnh được đặt trên thuộc tính visualTransformation. NanpVisualTransformation, lớp tuỳ chỉnh được tạo thực thể ở đây, được xác định trong phần sau.

Tự động định dạng một số trong trường văn bản

Để định dạng một chuỗi số thô, hãy sử dụng việc triển khai lớp NanpVisualTransformation tuỳ chỉnh:

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
            }
    }
}

Các điểm chính về mã

  • Hàm filter() chèn các ký tự định dạng không phải là số vào các vị trí thích hợp.
  • Đối tượng phoneNumberOffsetTranslator chứa 2 phương thức. Một hàm ánh xạ các độ lệch giữa chuỗi ban đầu và chuỗi được định dạng, còn hàm kia thực hiện ánh xạ ngược. Các mối liên kết này cho phép bỏ qua các ký tự định dạng khi người dùng thay đổi vị trí con trỏ trong trường văn bản.
  • Chuỗi được định dạng và phoneNumberOffsetTranslator được dùng làm đối số cho một thực thể TransformedText được TextField trả về và dùng để thực hiện việc định dạng.

Kết quả

Số điện thoại được định dạng tự động trong trường văn bản
Hình 1. Số điện thoại được định dạng tự động trong trường văn bản.

Bộ sưu tập có chứa hướng dẫn này

Hướng dẫn này là một phần của các bộ sưu tập Hướng dẫn nhanh được tuyển chọn, bao gồm các mục tiêu phát triển Android rộng hơn:

Văn bản là phần chính của mọi giao diện người dùng. Tìm hiểu các cách trình bày văn bản trong ứng dụng để mang lại trải nghiệm thú vị cho người dùng.
Tìm hiểu cách triển khai các phương thức để người dùng tương tác với ứng dụng của bạn bằng cách nhập văn bản và sử dụng các phương thức nhập khác.

Bạn có câu hỏi hoặc ý kiến phản hồi

Truy cập vào trang câu hỏi thường gặp của chúng tôi để tìm hiểu về các hướng dẫn nhanh hoặc liên hệ với chúng tôi để chia sẻ ý kiến của bạn.