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áiphoneNumber
. TextField
có một thực thểVisualTransformation
tuỳ chỉnh được đặt trên thuộc tínhvisualTransformation
.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ởiTextField
để 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](https://developer.android.com/static/quick-guides/content/nanp_formatter.gif?hl=vi)
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:
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=vi)
Văn bản hiển thị
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=vi)