تنسيق رقم هاتف تلقائيًا في حقل نصي

يمكنك تنسيق رقم هاتف تلقائيًا في حقل نصي في تطبيقك، ما يوفر للمستخدمين الوقت من خلال تنسيق رقم الهاتف أثناء إدخال الأرقام. اتّبِع هذه الإرشادات لتنسيق رقم هاتف تلقائيًا:

  • أنشئ حقل النص.
  • تنسيق رقم تلقائيًا في حقل النص

توافق الإصدار

يتطلّب هذا التنفيذ ضبط الحد الأدنى من إصدار حزمة 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 لتنفيذ عملية التنسيق.

النتائج

رقم هاتف بتنسيق تلقائي في حقل النص
الشكل 1. رقم هاتف بتنسيق تلقائي في حقل النص

المجموعات التي تتضمّن هذا الدليل

هذا الدليل هو جزء من مجموعات الأدلة السريعة المنظَّمة التي تتناول أهداف تطوير Android الأوسع نطاقًا:

يشكّل النص جزءًا أساسيًا من أي واجهة مستخدم. تعرَّف على الطرق المختلفة التي يمكنك من خلالها عرض النص في تطبيقك لتوفير تجربة رائعة للمستخدم.
تعرَّف على كيفية توفير طرق للمستخدمين للتفاعل مع تطبيقك من خلال إدخال نص واستخدام وسائل إدخال أخرى.

إذا كانت لديك أسئلة أو ملاحظات

يمكنك الانتقال إلى صفحة الأسئلة الشائعة والاطّلاع على الأدلة السريعة أو التواصل معنا وإعلامنا برأيك.