يمكنك تنسيق رقم هاتف تلقائيًا في حقل نصي في تطبيقك، ما يوفر للمستخدمين الوقت من خلال تنسيق رقم الهاتف أثناء إدخال الأرقام. اتّبِع هذه الإرشادات لتنسيق رقم هاتف تلقائيًا:
- أنشئ حقل النص.
- تنسيق رقم تلقائيًا في حقل النص
توافق الإصدار
يتطلّب هذا التنفيذ ضبط الحد الأدنى من إصدار حزمة SDK لمشروعك على المستوى 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
تم ضبطه على السمة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
على طريقتَين. يحدِّد أحدهما الموضع النسبي بين السلسلة الأصلية والسلسلة المنسَّقة، ويحدِّد الآخر الربط العكسي. تتيح عمليات الربط هذه تخطّي رموزها عند تغيير - يتم استخدام السلسلة المنسَّقة و
phoneNumberOffsetTranslator
كوسيطات لمثيلTransformedText
الذي يتم إرجاعه واستخدامه من قِبلTextField
لتنفيذ عملية التنسيق.
النتائج
![رقم هاتف بتنسيق تلقائي في حقل النص](https://developer.android.google.cn/static/quick-guides/content/nanp_formatter.gif?hl=ar)
المجموعات التي تتضمّن هذا الدليل
هذا الدليل هو جزء من مجموعات الأدلة السريعة المنظَّمة التي تتناول أهداف تطوير Android الأوسع نطاقًا:
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=ar)
النص الذي يظهر للمستخدم
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=ar)