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

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

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

वर्शन के साथ काम करना

इसे लागू करने के लिए, ज़रूरी है कि आपके प्रोजेक्ट का 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 डेवलपमेंट के बड़े लक्ष्यों के बारे में बताया गया है:

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

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

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

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

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

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

क्या आपका कोई सवाल है या सुझाव/राय देनी है

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

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