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 trường văn bản trong ứng dụng, 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ố. Hãy 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 số trong trường văn bản.

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

Phương thức triển khai này yêu cầu bạn phải đặ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 một số điện thoại được định dạng theo Quy hoạch số điện thoại Bắc Mỹ (NANP).NanpVisualTransformation định dạng một chuỗi số thô thành NANP, ví dụ: 1234567890 thành (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ã

  • Thành phần kết hợp TextField, trong đó onValueChange sử dụng biểu thức chính quy để xoá tất cả ký tự không phải số và giới hạn độ dài ở mức 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 bản sao tại đây, được xác định trong phần sau.

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

Để định dạng một chuỗi số thô, hãy sử dụng cách 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 số ở các vị trí thích hợp.
  • Đối tượng phoneNumberOffsetTranslator chứa hai phương thức. Một hàm ánh xạ độ dời giữa chuỗi gốc và chuỗi đã định dạng, còn hàm còn lại thực hiện ánh xạ ngược. Các ánh xạ 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 trả về và sử dụng bởi TextField để 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.

Các bộ sưu tập 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 này, 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 khác nhau để trình bày văn bản trong ứng dụng nhằm 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 cách để 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

Hãy truy cập vào trang câu hỏi thường gặp để tìm hiểu về các hướng dẫn nhanh hoặc liên hệ với chúng tôi để cho chúng tôi biết suy nghĩ của bạn.