टेक्स्ट फ़ील्ड में फ़ोन नंबर का अपने-आप फ़ॉर्मैट होना

आपके पास अपने ऐप्लिकेशन में, टेक्स्ट फ़ील्ड में मौजूद फ़ोन नंबर को अपने-आप फ़ॉर्मैट करने का विकल्प होता है. इससे उपयोगकर्ताओं का समय बचता है, क्योंकि फ़ोन नंबर के अंक डालते ही वह फ़ॉर्मैट हो जाता है. फ़ोन नंबर को अपने-आप फ़ॉर्मैट करने के लिए, यहां दिया गया तरीका अपनाएं:

• टेक्स्ट फ़ील्ड बनाएं.
• टेक्स्ट फ़ील्ड में मौजूद किसी नंबर को अपने-आप फ़ॉर्मैट करें.

नतीजे

वर्शन के साथ काम करने वाली सुविधाएं

इस सुविधा को लागू करने के लिए, ज़रूरी है कि आपके प्रोजेक्ट का minSDK, एपीआई लेवल 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)
    )
}
TextSnippets.kt

कोड के बारे में अहम बातें

• एक TextField कंपोज़ेबल, जिसमें onValueChange रेगुलर एक्सप्रेशन का इस्तेमाल करके, गैर-संख्या वाले सभी वर्णों को हटाता है और phoneNumber की स्थिति को अपडेट करने से पहले, लंबाई को ज़्यादा से ज़्यादा 10 वर्णों तक सीमित करता है.
• 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
            }
    }
}
TextSnippets.kt

कोड के बारे में अहम बातें

• filter() फ़ंक्शन, गैर-संख्या वाले फ़ॉर्मैटिंग वर्णों को सही जगहों पर डालता है.
• phoneNumberOffsetTranslator ऑब्जेक्ट में दो तरीके शामिल हैं. पहला तरीका, ओरिजनल स्ट्रिंग और फ़ॉर्मैट की गई स्ट्रिंग के बीच ऑफ़सेट की मैपिंग करता है. वहीं, दूसरा तरीका रिवर्स मैपिंग करता है. इन मैपिंग की मदद से, उपयोगकर्ता के टेक्स्ट फ़ील्ड में कर्सर की जगह बदलने पर, फ़ॉर्मैटिंग वर्णों को स्किप किया जा सकता है.
• फ़ॉर्मैट की गई स्ट्रिंग और phoneNumberOffsetTranslator को, TransformedText इंस्टेंस के लिए आर्ग्युमेंट के तौर पर इस्तेमाल किया जाता है. इसे TextField से लौटाया जाता है और फ़ॉर्मैटिंग करने के लिए इस्तेमाल किया जाता है.

इस गाइड को शामिल करने वाले कलेक्शन

यह गाइड, चुने गए उन क्विक गाइड कलेक्शन का हिस्सा है जिनमें Android डेवलपमेंट के बड़े लक्ष्यों के बारे में बताया गया है:

डिसप्ले टेक्स्ट

टेक्स्ट, किसी भी यूज़र इंटरफ़ेस (यूआई) का अहम हिस्सा होता है. अपने ऐप्लिकेशन में टेक्स्ट दिखाने के अलग-अलग तरीकों के बारे में जानें, ताकि उपयोगकर्ता को बेहतर अनुभव मिल सके.

क्विक गाइड कलेक्शन

उपयोगकर्ता का इनपुट अनुरोध करें

जानें कि उपयोगकर्ताओं को टेक्स्ट डालकर और इनपुट के अन्य तरीकों का इस्तेमाल करके, आपके ऐप्लिकेशन से इंटरैक्ट करने की सुविधा कैसे दी जा सकती है.

क्विक गाइड कलेक्शन

सवाल पूछें, सुझाव/राय दें या शिकायत करें

अक्सर पूछे जाने वाले सवाल वाले पेज पर जाएं और क्विक गाइड के बारे में जानें. इसके अलावा, हमसे संपर्क करें और अपनी राय या सुझाव/शिकायत के बारे में बताएं.

'अक्सर पूछे जाने वाले सवाल' पर जाएं सुझाव/राय देना या शिकायत सबमिट करना