टेक्स्ट फ़ील्ड कॉन्फ़िगर करना

संग्रह की मदद से व्यवस्थित रहें अपनी प्राथमिकताओं के आधार पर, कॉन्टेंट को सेव करें और कैटगरी में बांटें.

TextField का इस्तेमाल करके, उपयोगकर्ता टेक्स्ट डाल सकते हैं और उसमें बदलाव कर सकते हैं. दो तरह के टेक्स्ट फ़ील्ड इस्तेमाल किए जा सकते हैं: स्टेटस पर आधारित टेक्स्ट फ़ील्ड और वैल्यू पर आधारित टेक्स्ट फ़ील्ड. वह टाइप चुनें जिसके लिए आपको कॉन्टेंट दिखाना है:

हमारा सुझाव है कि आप स्टेटस पर आधारित टेक्स्ट फ़ील्ड का इस्तेमाल करें. इससे TextField की स्थिति को मैनेज करने का बेहतर और भरोसेमंद तरीका मिलता है. यहां दी गई टेबल में, इन तरह के टेक्स्ट फ़ील्ड के बीच के अंतर के बारे में बताया गया है. साथ ही, इसमें स्टेटस पर आधारित टेक्स्ट फ़ील्ड के मुख्य फ़ायदों के बारे में भी बताया गया है:

इस पेज पर बताया गया है कि TextField को कैसे लागू किया जा सकता है, TextField इनपुट को स्टाइल कैसे दिया जा सकता है, और TextField के अन्य विकल्पों को कैसे कॉन्फ़िगर किया जा सकता है. जैसे, कीबोर्ड के विकल्प और उपयोगकर्ता के इनपुट को विज़ुअल तौर पर बदलना.

TextField लागू करने का तरीका चुनना

TextField को लागू करने के दो लेवल होते हैं:

1. TextField, मटीरियल डिज़ाइन को लागू करने का तरीका है. हमारा सुझाव है कि आप इसे लागू करने का यह तरीका चुनें, क्योंकि यह मटीरियल डिज़ाइन के दिशा-निर्देशों के मुताबिक है:
   • डिफ़ॉल्ट स्टाइल भरी हुई है
   • OutlinedTextField, स्टाइल वाला ऐसा वर्शन है जिसमें आउटलाइन की गई है
2. BasicTextField की मदद से, उपयोगकर्ता हार्डवेयर या सॉफ़्टवेयर कीबोर्ड का इस्तेमाल करके टेक्स्ट में बदलाव कर सकते हैं. हालांकि, इसमें हिंट या प्लेसहोल्डर जैसी कोई सजावट नहीं होती.

TextField(
    state = rememberTextFieldState(initialText = "Hello"),
    label = { Text("Label") }
)
StateBasedText.kt

OutlinedTextField(
    state = rememberTextFieldState(),
    label = { Text("Label") }
)
StateBasedText.kt

शैली TextField

TextField और BasicTextField, पसंद के मुताबिक बनाने के लिए कई सामान्य पैरामीटर शेयर करते हैं. TextField की पूरी सूची, TextField के सोर्स कोड में उपलब्ध है. यहां कुछ काम के पैरामीटर की सूची दी गई है. हालांकि, इसमें और भी पैरामीटर शामिल हो सकते हैं:

• textStyle
• lineLimits

TextField(
    state = rememberTextFieldState("Hello\nWorld\nInvisible"),
    lineLimits = TextFieldLineLimits.MultiLine(maxHeightInLines = 2),
    placeholder = { Text("") },
    textStyle = TextStyle(color = Color.Blue, fontWeight = FontWeight.Bold),
    label = { Text("Enter text") },
    modifier = Modifier.padding(20.dp)
)
StateBasedText.kt

अगर आपके डिज़ाइन में मैटेरियल TextField या OutlinedTextField की ज़रूरत है, तो हमारा सुझाव है कि आप BasicTextField के बजाय TextField का इस्तेमाल करें. हालांकि, BasicTextField का इस्तेमाल ऐसे डिज़ाइन बनाते समय किया जाना चाहिए जिनमें Material स्पेसिफ़िकेशन के मुताबिक सजावट की ज़रूरत न हो.

Brush API की मदद से इनपुट को स्टाइल करना

TextField में बेहतर स्टाइल देने के लिए, Brush API का इस्तेमाल किया जा सकता है. नीचे दिए गए सेक्शन में बताया गया है कि TextField इनपुट में रंगीन ग्रेडिएंट जोड़ने के लिए, ब्रश का इस्तेमाल कैसे किया जा सकता है.

टेक्स्ट को स्टाइल करने के लिए, Brush API का इस्तेमाल करने के बारे में ज़्यादा जानने के लिए, Brush API की मदद से बेहतर स्टाइलिंग की सुविधा चालू करना लेख पढ़ें.

TextStyle का इस्तेमाल करके रंगीन ग्रेडिएंट लागू करना

TextField में टाइप करते समय रंगीन ग्रेडिएंट लागू करने के लिए, अपने TextField के लिए अपने पसंदीदा ब्रश को TextStyle के तौर पर सेट करें. इस उदाहरण में, हमने linearGradient के साथ पहले से मौजूद ब्रश का इस्तेमाल किया है, ताकि TextField में टेक्स्ट टाइप करने पर, रेनबो ग्रेडिएंट इफ़ेक्ट दिखे.

val brush = remember {
    Brush.linearGradient(
        colors = listOf(Color.Red, Color.Yellow, Color.Green, Color.Blue, Color.Magenta)
    )
}
TextField(
    state = rememberTextFieldState(), textStyle = TextStyle(brush = brush)
)
StateBasedText.kt

टेक्स्ट फ़ील्ड की स्थिति मैनेज करना

TextField, अपने कॉन्टेंट और मौजूदा चुनी गई वैल्यू के लिए, TextFieldState नाम की खास स्टेट होल्डर क्लास का इस्तेमाल करता है. TextFieldState को इस तरह से डिज़ाइन किया गया है कि इसे आपके आर्किटेक्चर में कहीं भी होस्ट किया जा सकता है. TextFieldState से दो मुख्य प्रॉपर्टी मिलती हैं:

• initialText: TextField का कॉन्टेंट.
• initialSelection: इससे पता चलता है कि कर्सर या चुना गया टेक्स्ट फ़िलहाल कहां है.

TextFieldState को onValueChange कॉलबैक जैसे अन्य तरीकों से अलग करने वाली बात यह है कि TextFieldState पूरे इनपुट फ़्लो को पूरी तरह से कवर करता है. इसमें बैकिंग डेटा के सही स्ट्रक्चर का इस्तेमाल करना, फ़िल्टर और फ़ॉर्मैटर को इनलाइन करना, और अलग-अलग सोर्स से किए गए सभी बदलावों को सिंक करना शामिल है.

TextField में होस्ट की गई स्थिति देखने के लिए, TextFieldState() का इस्तेमाल किया जा सकता है. इसके लिए, हमारा सुझाव है कि आप rememberTextFieldState() फ़ंक्शन का इस्तेमाल करें. rememberTextFieldState() आपके कॉम्पोज़ेबल में TextFieldState इंस्टेंस बनाता है. साथ ही, यह पक्का करता है कि स्टेट ऑब्जेक्ट को याद रखा जाए. साथ ही, इसमें सेव करने और वापस लाने की सुविधा भी पहले से मौजूद होती है:

val usernameState = rememberTextFieldState()
TextField(
    state = usernameState,
    lineLimits = TextFieldLineLimits.SingleLine,
    placeholder = { Text("Enter Username") }
)
StateBasedText.kt

rememberTextFieldState में कोई खाली पैरामीटर हो सकता है या इसमें कोई शुरुआती वैल्यू हो सकती है, ताकि शुरू करने पर टेक्स्ट की वैल्यू दिखाई जा सके. अगर बाद में फिर से कॉम्पोज़ करने के दौरान कोई अलग वैल्यू दी जाती है, तो स्टेटस की वैल्यू अपडेट नहीं होती. शुरू करने के बाद, स्थिति को अपडेट करने के लिए, TextFieldState पर बदलाव करने के तरीके कॉल करें.

TextField(
    state = rememberTextFieldState(initialText = "Username"),
    lineLimits = TextFieldLineLimits.SingleLine,
)
StateBasedText.kt

TextFieldBuffer की मदद से टेक्स्ट में बदलाव करना

TextFieldBuffer, बदलाव किए जा सकने वाले टेक्स्ट कंटेनर के तौर पर काम करता है. यह StringBuilder की तरह ही काम करता है. इसमें टेक्स्ट कॉन्टेंट और मौजूदा चुने गए आइटम की जानकारी, दोनों होती है.

आपको अक्सर TextFieldBuffer, TextFieldState.edit, InputTransformation.transformInput या OutputTransformation.transformOutput जैसे फ़ंक्शन में, रिसीवर के दायरे के तौर पर TextFieldBuffer दिखता है. इन फ़ंक्शन में, TextFieldBuffer को ज़रूरत के हिसाब से पढ़ा या अपडेट किया जा सकता है. इसके बाद, इन बदलावों को TextFieldState में कमिट किया जाता है या OutputTransformation के मामले में, रेंडरिंग पाइपलाइन को पास किया जाता है.

बफ़र के कॉन्टेंट में बदलाव करने के लिए, append, insert, replace या delete जैसे स्टैंडर्ड बदलाव करने वाले फ़ंक्शन का इस्तेमाल किया जा सकता है. चुने गए वैरिएबल की स्थिति बदलने के लिए, उसका selection: TextRange वैरिएबल सीधे सेट करें या placeCursorAtEnd या selectAll जैसे यूटिलिटी फ़ंक्शन का इस्तेमाल करें. चुने गए हिस्से को TextRange से दिखाया जाता है. इसमें शुरू होने का इंडेक्स शामिल होता है और खत्म होने का इंडेक्स शामिल नहीं होता. (3, 3) की तरह, शुरू और खत्म होने की एक जैसी वैल्यू वाला TextRange, कर्सर की उस जगह को दिखाता है जहां फ़िलहाल कोई वर्ण चुना नहीं गया है.

val phoneNumberState = rememberTextFieldState()

LaunchedEffect(phoneNumberState) {
    phoneNumberState.edit { // TextFieldBuffer scope
        append("123456789")
    }
}

TextField(
    state = phoneNumberState,
    inputTransformation = InputTransformation { // TextFieldBuffer scope
        if (asCharSequence().isDigitsOnly()) {
            revertAllChanges()
        }
    },
    outputTransformation = OutputTransformation {
        if (length > 0) insert(0, "(")
        if (length > 4) insert(4, ")")
        if (length > 8) insert(8, "-")
    }
)
StateBasedText.kt

TextFieldState में टेक्स्ट में बदलाव करना

सीधे अपने स्टेट वैरिएबल की मदद से, स्टेट में बदलाव करने के कई तरीके हैं:

• edit: इसकी मदद से, स्टेटस के कॉन्टेंट में बदलाव किया जा सकता है. साथ ही, आपको TextFieldBuffer फ़ंक्शन मिलते हैं, ताकि insert, replace, append वगैरह जैसे तरीकों का इस्तेमाल किया जा सके.

  val usernameState = rememberTextFieldState("I love Android")
  // textFieldState.text : I love Android
  // textFieldState.selection: TextRange(14, 14)
  usernameState.edit { insert(14, "!") }
  // textFieldState.text : I love Android!
  // textFieldState.selection: TextRange(15, 15)
  usernameState.edit { replace(7, 14, "Compose") }
  // textFieldState.text : I love Compose!
  // textFieldState.selection: TextRange(15, 15)
  usernameState.edit { append("!!!") }
  // textFieldState.text : I love Compose!!!!
  // textFieldState.selection: TextRange(18, 18)
  usernameState.edit { selectAll() }
  // textFieldState.text : I love Compose!!!!
  // textFieldState.selection: TextRange(0, 18)
  StateBasedText.kt

• setTextAndPlaceCursorAtEnd: मौजूदा टेक्स्ट को मिटाता है और उसे दिए गए टेक्स्ट से बदल देता है. साथ ही, कर्सर को आखिर में सेट करता है.

  usernameState.setTextAndPlaceCursorAtEnd("I really love Android")
  // textFieldState.text : I really love Android
  // textFieldState.selection : TextRange(21, 21)
  StateBasedText.kt

• clearText: इससे पूरा टेक्स्ट मिट जाता है.

  usernameState.clearText()
  // textFieldState.text :
  // textFieldState.selection : TextRange(0, 0)
  StateBasedText.kt

TextFieldState फ़ंक्शन के बारे में ज़्यादा जानने के लिए, TextFieldState रेफ़रंस देखें.

उपयोगकर्ता के इनपुट में बदलाव करना

नीचे दिए गए सेक्शन में, उपयोगकर्ता के इनपुट में बदलाव करने का तरीका बताया गया है. इनपुट ट्रांसफ़ॉर्मेशन की मदद से, उपयोगकर्ता के टाइप करते समय TextField इनपुट को फ़िल्टर किया जा सकता है. वहीं, आउटपुट ट्रांसफ़ॉर्मेशन, उपयोगकर्ता के इनपुट को स्क्रीन पर दिखाए जाने से पहले फ़ॉर्मैट करता है.

इनपुट ट्रांसफ़ॉर्मेशन की मदद से, उपयोगकर्ता के इनपुट को फ़िल्टर करना

इनपुट ट्रांसफ़ॉर्मेशन की मदद से, उपयोगकर्ता से मिले इनपुट को फ़िल्टर किया जा सकता है. उदाहरण के लिए, अगर आपका TextField अमेरिकन फ़ोन नंबर लेता है, तो आपको सिर्फ़ 10 अंक स्वीकार करने हैं. InputTransformation के नतीजे, TextFieldState में सेव किए जाते हैं.

InputTransformation के सामान्य इस्तेमाल के उदाहरणों के लिए, पहले से मौजूद फ़िल्टर हैं. वीडियो की अवधि को सीमित करने के लिए, InputTransformation.maxLength() को कॉल करें:

TextField(
    state = rememberTextFieldState(),
    lineLimits = TextFieldLineLimits.SingleLine,
    inputTransformation = InputTransformation.maxLength(10)
)
StateBasedText.kt

कस्टम इनपुट ट्रांसफ़ॉर्मेशन

InputTransformation एक फ़ंक्शन वाला इंटरफ़ेस है. कस्टम InputTransformation लागू करते समय, आपको TextFieldBuffer.transformInput को बदलना होगा:

class CustomInputTransformation : InputTransformation {
    override fun TextFieldBuffer.transformInput() {
    }
}
StateBasedText.kt

फ़ोन नंबर के लिए, कस्टम इनपुट ट्रांसफ़ॉर्मेशन जोड़ें, ताकि TextField में सिर्फ़ अंक डाले जा सकें:

class DigitOnlyInputTransformation : InputTransformation {
    override fun TextFieldBuffer.transformInput() {
        if (!TextUtils.isDigitsOnly(asCharSequence())) {
            revertAllChanges()
        }
    }
}
StateBasedText.kt

चेन इनपुट ट्रांसफ़ॉर्मेशन

अपने टेक्स्ट इनपुट पर एक से ज़्यादा फ़िल्टर जोड़ने के लिए, then एक्सटेंशन फ़ंक्शन का इस्तेमाल करके InputTransformations को चेन करें. फ़िल्टर क्रम से लागू किए जाते हैं. सबसे सही तरीका यह है कि सबसे चुनिंदा फ़िल्टर पहले लागू करें, ताकि डेटा में ऐसे बदलाव न हों जो बाद में फ़िल्टर कर दिए जाएंगे.

TextField(
    state = rememberTextFieldState(),
    inputTransformation = InputTransformation.maxLength(6)
        .then(CustomInputTransformation()),
)
StateBasedText.kt

इनपुट ट्रांसफ़ॉर्मेशन जोड़ने के बाद, TextField इनपुट में ज़्यादा से ज़्यादा 10 अंक डाले जा सकते हैं.

इनपुट को दिखाए जाने से पहले उसे फ़ॉर्मैट करना

OutputTransformation की मदद से, उपयोगकर्ता के इनपुट को स्क्रीन पर रेंडर होने से पहले फ़ॉर्मैट किया जा सकता है. InputTransformation के उलट, OutputTransformation के ज़रिए किया गया फ़ॉर्मैट, TextFieldState में सेव नहीं होता. फ़ोन नंबर के पिछले उदाहरण के आधार पर, आपको सही जगहों पर ब्रैकेट और डैश जोड़ने होंगे:

वैल्यू पर आधारित TextField में VisualTransformation को मैनेज करने का यह एक नया तरीका है. इसमें एक अहम अंतर यह है कि आपको उनके ऑफ़सेट मैपिंग का हिसाब नहीं लगाना पड़ता.

OutputTransformation एक सिंगल ऐब्स्ट्रैक्ट मैथड इंटरफ़ेस है. कस्टम OutputTransformation लागू करने के लिए, आपको transformOutput तरीके को बदलना होगा:

class CustomOutputTransformation : OutputTransformation {
    override fun TextFieldBuffer.transformOutput() {
    }
}
StateBasedText.kt

फ़ोन नंबर को फ़ॉर्मैट करने के लिए, अपने OutputTransformation में इंडेक्स 0 पर ब्रैकेट खोलने वाला चिह्न, इंडेक्स 4 पर ब्रैकेट बंद करने वाला चिह्न, और इंडेक्स 8 पर डैश जोड़ें:

class PhoneNumberOutputTransformation : OutputTransformation {
    override fun TextFieldBuffer.transformOutput() {
        if (length > 0) insert(0, "(")
        if (length > 4) insert(4, ")")
        if (length > 8) insert(8, "-")
    }
}
StateBasedText.kt

इसके बाद, TextField में अपना OutputTransformation जोड़ें:

TextField(
    state = rememberTextFieldState(),
    outputTransformation = PhoneNumberOutputTransformation()
)
StateBasedText.kt

ट्रांसफ़ॉर्मेशन एक साथ कैसे काम करते हैं

इस डायग्राम में, टेक्स्ट इनपुट से ट्रांसफ़ॉर्मेशन से लेकर आउटपुट तक का फ़्लो दिखाया गया है:

1. इनपुट सोर्स से इनपुट मिलता है.
2. इनपुट को InputTransformation से फ़िल्टर किया जाता है, जो TextFieldState में सेव हो जाता है.
3. इनपुट को फ़ॉर्मैट करने के लिए, OutputTransformation से पास किया जाता है.
4. इनपुट को TextField में दिखाया जाता है.

कीबोर्ड के विकल्प सेट करना

TextField की मदद से, कीबोर्ड के कॉन्फ़िगरेशन के विकल्प सेट किए जा सकते हैं. जैसे, कीबोर्ड का लेआउट. इसके अलावा, अगर कीबोर्ड पर ऑटो करेक्ट की सुविधा काम करती है, तो उसे चालू किया जा सकता है. अगर सॉफ़्टवेयर कीबोर्ड यहां दिए गए विकल्पों के मुताबिक नहीं है, तो हो सकता है कि कुछ विकल्पों के काम करने की गारंटी न मिले. इस्तेमाल किए जा सकने वाले कीबोर्ड के विकल्पों की सूची यहां दी गई है:

• capitalization
• autoCorrect
• keyboardType
• imeAction

अन्य संसाधन

• टेक्स्ट फ़ील्ड में फ़ोन नंबर को अपने-आप फ़ॉर्मैट करना
• उपयोगकर्ता के टॉगल के आधार पर पासवर्ड दिखाना या छिपाना
• उपयोगकर्ता के टाइप करते ही इनपुट की पुष्टि करना