Android Kotlin की बुनियादी बातें 02.2: उपयोगकर्ता के साथ बातचीत करने के तरीके जोड़ना

यह कोडलैब Android Kotlin के बुनियादी कोर्स में शामिल है. अगर आप कोडलैब के क्रम में काम करते हैं, तो आपको इस कोर्स का ज़्यादा से ज़्यादा फ़ायदा मिलेगा. सभी कोर्स कोडलैब Android Kotlin से जुड़े बेसिक कोडलैब के लैंडिंग पेज पर दिए गए हैं.

ये कोडलैब, Android Kotlin के बुनियादी कोर्स का हिस्सा हैं. अगर आप कोडलैब के क्रम में काम करते हैं, तो आपको इस कोर्स का ज़्यादा से ज़्यादा फ़ायदा मिलेगा.

इस सीरीज़ में कोडलैब इस तरह हैं:

• 2.1 लेआउट एडिटर का इस्तेमाल करके लीनियर लेआउट
• 2.2 उपयोगकर्ता के साथ बातचीत करना
• 2.3 लेआउट एडिटर का इस्तेमाल करके कंस्ट्रेंट लेआउट
• 2.4 डेटा-बाइंडिंग की बुनियादी बातें

आपको क्या पता होना चाहिए

• Kotlin में एक बेसिक Android ऐप्लिकेशन बनाना.
• किसी एम्युलेटर या डिवाइस पर Android ऐप्लिकेशन चलाएं.
• Android Studio's लेआउट एडिटर का इस्तेमाल करके लीनियर लेआउट बनाना .
• ऐसा आसान ऐप्लिकेशन बनाना जिसमें LinearLayout, TextView, ScrollView, और क्लिक हैंडलर वाला बटन हो.

आप इन चीज़ों के बारे में जानेंगे

• EditText व्यू का इस्तेमाल करके, उपयोगकर्ता के इनपुट पाने का तरीका.
• EditText व्यू के टेक्स्ट का इस्तेमाल करके, TextView व्यू पर टेक्स्ट सेट करने का तरीका.
• View और ViewGroup के साथ काम करने का तरीका.
• View के दिखने की सेटिंग बदलने का तरीका.

आप क्या कर पाएंगे!

• aboutMe ऐप्लिकेशन में इंटरैक्टिव जोड़ें, जो पिछले कोडलैब से जुड़ा है.
• EditText जोड़ें, ताकि उपयोगकर्ता टेक्स्ट डाल सके.
• Button जोड़ें और उसका क्लिक हैंडलर लागू करें.

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

इस टास्क में, EditText इनपुट फ़ील्ड जोड़ा जाता है, ताकि उपयोगकर्ता को निकनेम डाला जा सके.

पहला चरण: शुरू करना

1. अगर आपके पास पहले से किसी पिछले कोडलैब से जानकारी वाला ऐप्लिकेशन नहीं है, तो स्टार्टर कोड AboutMeInteractive-Starter डाउनलोड करें. यह वही कोड है जिसे आपने पिछले कोडलैब में खत्म किया था.
2. Android Studio में, aboutMeInteractive-Starter प्रोजेक्ट खोलें.
3. ऐप्लिकेशन चलाएं. आपको स्क्रोल व्यू में नाम का टेक्स्ट व्यू, स्टार इमेज, और टेक्स्ट का एक लंबा सेगमेंट दिखता है.
   
   
   
   ध्यान दें कि उपयोगकर्ता कोई भी टेक्स्ट बदल नहीं सकता.

अगर उपयोगकर्ता ऐप्लिकेशन से इंटरैक्ट कर सकता है, तो ऐप्लिकेशन ज़्यादा दिलचस्प होते हैं. उदाहरण के लिए, जब उपयोगकर्ता टेक्स्ट डाल सकते हैं. टेक्स्ट इनपुट स्वीकार करने के लिए, Android यूज़र इंटरफ़ेस (यूआई) विजेट उपलब्ध कराता है, जिसे टेक्स्ट में बदलाव करें कहते हैं. आप EditText, TextView का एक सब-क्लास इस्तेमाल करके, बदलाव के लिए टेक्स्ट तय करते हैं. बदलाव टेक्स्ट से उपयोगकर्ता, टेक्स्ट इनपुट डाल सकते हैं और उसमें बदलाव कर सकते हैं, जैसा कि नीचे स्क्रीनशॉट में दिखाया गया है.

दूसरा चरण: EditText जोड़ना

1. Android Studio में, डिज़ाइन टैब में activity_main.xml लेआउट फ़ाइल खोलें.
2. पैलेट पैनल में, टेक्स्ट पर क्लिक करें.
   
   
   
   Ab TextView, जो कि एक TextView है, पैलेट पैनल में टेक्स्ट एलिमेंट की सूची के सबसे ऊपर दिखता है. Ab TextView के नीचे एक से ज़्यादा EditText व्यू हैं.
   
   पैलेट पैनल में, देखें कि TextView के आइकॉन में Ab वर्ण कैसे दिखता है, लेकिन इसका स्कोर कम है. हालांकि, EditText आइकॉन अब अंडरस्कोर में दिखते हैं. कम स्कोर बताता है कि व्यू में बदलाव किया जा सकता है.
   
   हर EditText व्यू के लिए, Android अलग-अलग एट्रिब्यूट सेट करता है और सिस्टम सही सॉफ़्ट इनपुट का तरीका (जैसे कि ऑन-स्क्रीन कीबोर्ड) दिखाता है.
3. PainText में बदलाव करने वाले टेक्स्ट को कॉम्पोनेंट ट्री में खींचें और उसे name_text के नीचे star_image के ऊपर रखें.
   
   
   
4. नीचे दिए गए एट्रिब्यूट को EditText व्यू में सेट करने के लिए, एट्रिब्यूट पैन का इस्तेमाल करें.

एट्रिब्यूट	वैल्यू
id	nickname_edit
layout_width	match_parent (डिफ़ॉल्ट)
layout_height	wrap_content (डिफ़ॉल्ट)

5. अपना ऐप्लिकेशन चलाएं. स्टार की इमेज के ऊपर, डिफ़ॉल्ट टेक्स्ट के साथ टेक्स्ट में बदलाव करें &&ott;नाम और कोट;.
   
   
   

इस टास्क में, आप एक संकेत जोड़कर, टेक्स्ट के अलाइनमेंट में बदलाव करके, स्टाइल को NameStyle में बदलकर, इनपुट टाइप सेट करके अपने EditText व्यू को स्टाइल करते हैं.

पहला चरण: संकेत वाला टेक्स्ट जोड़ना

1. string.xml फ़ाइल में संकेत के लिए एक नया स्ट्रिंग रिसॉर्स जोड़ें.

<string name="what_is_your_nickname">What is your Nickname?</string>

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

2. इन एट्रिब्यूट को EditText व्यू में सेट करने के लिए, एट्रिब्यूट पैन का इस्तेमाल करें:

एट्रिब्यूट	वैल्यू
style	NameStyle
textAlignment	(केंद्र)
hint	@string/what_is_your_nickname

3. एट्रिब्यूट पैनल में, text एट्रिब्यूट से Name वैल्यू हटाएं. text एट्रिब्यूट की वैल्यू खाली होनी चाहिए, ताकि संकेत दिखाया जा सके.

दूसरा चरण: InputType एट्रिब्यूट सेट करना

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

सभी संभावित इनपुट टाइप देखने के लिए, एट्रिब्यूट पैनल में, inputType फ़ील्ड पर क्लिक करें या फ़ील्ड के आगे बने तीन बिंदुओं ... पर क्लिक करें. ऐसा करने पर, एक ऐसी सूची खुलती है जिसमें मौजूद सभी तरह के इनपुट का इस्तेमाल किया जा सकता है. साथ ही, इस समय चालू इनपुट के प्रकार को भी चुना जाता है. एक से ज़्यादा तरह के इनपुट चुने जा सकते हैं.

उदाहरण के लिए, पासवर्ड के लिए textPassword वैल्यू इस्तेमाल करें. टेक्स्ट फ़ील्ड, उपयोगकर्ता के इनपुट को छिपाता है.

फ़ोन नंबर के लिए, phone वैल्यू का इस्तेमाल करें. संख्या वाला कीपैड दिखाया जाता है और उपयोगकर्ता सिर्फ़ नंबर डाल सकता है.

निकनेम फ़ील्ड के लिए इनपुट टाइप सेट करें:

1. nickname_edit टेक्स्ट में बदलाव करने के लिए, inputType एट्रिब्यूट को textPersonName पर सेट करें.
2. कॉम्पोनेंट ट्री पैनल में, autoFillHints चेतावनी देखें. यह चेतावनी इस ऐप्लिकेशन पर लागू नहीं होती और इस कोडलैब के दायरे में नहीं आती. इसलिए, आप इसे अनदेखा कर सकते हैं. (अगर आप ऑटोमैटिक भरने की सुविधा के बारे में ज़्यादा जानना चाहते हैं, तो अपने-आप जानकारी भरने की सुविधा के लिए अपना ऐप्लिकेशन ऑप्टिमाइज़ करना देखें.)
   
3. विशेषता पैनल में, EditText व्यू के इन एट्रिब्यूट के मान की पुष्टि करें:

एट्रिब्यूट	वैल्यू
id	nickname_edit
layout_width	match_parent (डिफ़ॉल्ट)
layout_height	wrap_content (डिफ़ॉल्ट)
style	@style/NameStyle
inputType	textPersonName
hint	"@string/what_is_your_nickname"
text	(खाली)

Button एक यूज़र इंटरफ़ेस (यूआई) एलिमेंट है. उपयोगकर्ता इस पर टैप करके कोई कार्रवाई कर सकता है. बटन में टेक्स्ट, कोई आइकॉन या टेक्स्ट और एक आइकॉन, दोनों हो सकते हैं.

इस टास्क में, आप हो गया बटन जोड़ते हैं. इस बटन को कोई दूसरा नाम देने के बाद, उपयोगकर्ता टैप करता है. यह बटन EditText व्यू को TextView व्यू से बदल देता है जो निकनेम दिखाता है. निकनेम अपडेट करने के लिए, उपयोगकर्ता TextView व्यू पर टैप कर सकते हैं.

पहला चरण: 'हो गया' बटन जोड़ना

1. पैलेट पैनल से किसी बटन को खींचकर कॉम्पोनेंट ट्री में छोड़ें. nickname_edit टेक्स्ट में बदलाव करें के नीचे बटन रखें.
   
   
2. done नाम का एक नया स्ट्रिंग संसाधन बनाएं. स्ट्रिंग को Done,

<string name="done">Done</string>

3. जोड़े गए नए Button व्यू पर ये विशेषताएं सेट करने के लिए विशेषता पैनल का इस्तेमाल करें:

एट्रिब्यूट	वैल्यू
id	done_button
text	@string/done
layout_gravity	center_horizontal
layout_width	wrap_content

layout_gravity एट्रिब्यूट, व्यू को अपने पैरंट लेआउट LinearLayout में सेंटर करता है.

4. इस स्टाइल को Widget.AppCompat.Button.Colored में बदलें. यह पहले से तय की गई उन स्टाइल में से एक है जिन्हें Android उपलब्ध कराता है. ड्रॉप-डाउन या संसाधन विंडो से, शैली चुनी जा सकती है.
   
   
   
   यह शैली, बटन के रंग को colorAccent के रंग में बदल देती है. एक्सेंट का रंग res/values/colors.xml फ़ाइल में बताया गया है.
   
   
   

colors.xml फ़ाइल में आपके ऐप्लिकेशन के डिफ़ॉल्ट रंग होते हैं. आप अपने ऐप्लिकेशन में रंग की नई चीज़ें जोड़ सकते हैं या मौजूदा रंग के संसाधनों को अपनी ज़रूरत के हिसाब से बदल सकते हैं.

colors.xml फ़ाइल का नमूना:

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#008577</color>
   <color name="colorPrimaryDark">#00574B</color>
   <color name="colorAccent">#D81B60</color>
</resources>

दूसरा चरण: 'हो गया' बटन को शैली देना

1. एट्रिब्यूट पैनल में, Layout_margin > Top चुनकर एक टॉप मार्जिन जोड़ें. टॉप मार्जिन को layout_margin पर सेट करें, जो dimens.xml फ़ाइल में बताया गया है.
   
   
   
2. ड्रॉप-डाउन मेन्यू से fontFamily एट्रिब्यूट को roboto पर सेट करें.
   
   
   
3. टेक्स्ट टैब पर स्विच करें और जोड़े गए नए बटन के लिए, जनरेट किए गए एक्सएमएल कोड की पुष्टि करें.
   

<Button
   android:id="@+id/done_button"
   style="@style/Widget.AppCompat.Button.Colored"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:layout_marginTop="@dimen/layout_margin"
   android:fontFamily="@font/roboto"
   android:text="@string/done" />

तीसरा चरण: रंग का संसाधन बदलना

इस चरण में, बटन और #39; के एक्सेंट का रंग अपनी गतिविधि के ऐप्लिकेशन बार से मेल खाने के लिए, उसे बदल दिया जाता है.

1. res/values/colors.xml खोलें और colorAccent की वैल्यू को #76bf5e में बदलें.
   

<color name="colorAccent">#76bf5e</color>

आप फ़ाइल एडिटर के बाएं मार्जिन में, HEX कोड से जुड़े रंग देख सकते हैं.

डिज़ाइन एडिटर में बटन के रंग में हुए बदलाव पर ध्यान दें.

2. अपना ऐप्लिकेशन चलाएं. इसके लिए आपको टेक्स्ट में बदलाव करने के नीचे, शैली वाला हो गया बटन दिखेगा.
   
   
   

उपयोगकर्ता के निकनेम डालने के बाद, हो गया बटन पर टैप करने के बाद, निकनेम TextView व्यू में दिखने लगता है. इस टास्क में, आप रंगीन बैकग्राउंड वाला टेक्स्ट व्यू जोड़ते हैं. टेक्स्ट व्यू में उपयोगकर्ता और #39; का प्रचलित नाम star_image के ऊपर दिखता है.

पहला चरण: निकनेम के लिए TextView जोड़ना

1. पैलेट पैनल से किसी टेक्स्ट व्यू को खींचकर कॉम्पोनेंट ट्री में छोड़ें. टेक्स्ट व्यू को done_button के नीचे और star_image के ऊपर रखें.
   
   

2. नए TextView व्यू के लिए ये एट्रिब्यूट सेट करने के लिए, एट्रिब्यूट पैनल का इस्तेमाल करें:

एट्रिब्यूट	वैल्यू
id	nickname_text
style	NameStyle
textAlignment	(केंद्र)

दूसरा चरण: TextView के दिखने की सेटिंग बदलना

visibility एट्रिब्यूट का इस्तेमाल करके, आप अपने ऐप्लिकेशन में व्यू दिखा या छिपा सकते हैं. इस एट्रिब्यूट की वैल्यू तीन में से एक होती है:

• visible: व्यू दिख रहा है.
• Invisible: व्यू छिपा देता है, लेकिन व्यू अब भी लेआउट में जगह लेता है.
• gone: व्यू छिपा देता है और व्यू, लेआउट के किसी भी हिस्से को नहीं घेरता.

1. एट्रिब्यूट पैनल में, nickname_text टेक्स्ट व्यू के visibility को gone, पर सेट करें, क्योंकि आप'अपने ऐप्लिकेशन को पहले इस टेक्स्ट व्यू को नहीं दिखाना चाहते.
   
   
   
   ध्यान दें कि जब आप एट्रिब्यूट पैनल में एट्रिब्यूट बदलते हैं, तब डिज़ाइन एडिटर से nickname_text व्यू गायब हो जाता है. व्यू की झलक में, व्यू नहीं दिख रहा है.
2. nickname_text व्यू की text एट्रिब्यूट की वैल्यू को खाली स्ट्रिंग में बदलें.

TextView के लिए जनरेट किया गया आपका एक्सएमएल कोड ऐसा दिखना चाहिए:

<TextView
   android:id="@+id/nickname_text"
   style="@style/NameStyle"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:textAlignment="center"
   android:visibility="gone"
   android:text="" />

आपके लेआउट की झलक कुछ ऐसी दिखेगी:

Button ऑब्जेक्ट (या किसी भी व्यू पर) का क्लिक हैंडलर, बटन (व्यू) पर टैप करने पर की जाने वाली कार्रवाई के बारे में बताता है. क्लिक इवेंट को हैंडल करने वाला फ़ंक्शन, Activity में लागू किया जाना चाहिए. यह बटन, बटन (व्यू) के साथ लेआउट को होस्ट करता है.

क्लिक लिसनर का फ़ॉर्मैट आम तौर पर ऐसा होता है, जहां व्यू में पास किया गया व्यू ऐसा होता है जिसे क्लिक या टैप मिलता है.

private fun clickHandlerFunction(viewThatIsClicked: View) {
// Add code to perform the button click event
}

आप बटन पर होने वाले क्लिक के इवेंट के लिए, दो तरीकों से क्लिक-लिस्टर फ़ंक्शन अटैच कर सकते हैं:

• एक्सएमएल लेआउट में, आप <Button> एलिमेंट में android:onClick एट्रिब्यूट जोड़ सकते हैं. उदाहरण के लिए:

<Button
   android:id="@+id/done_button"
   android:text="@string/done"
   ...
   android:onClick="clickHandlerFunction"/>

या

• आप प्रोग्राम के ज़रिए रनटाइम के दौरान, Activity के onCreate() में, setOnClickListener पर कॉल करके ऐसा कर सकते हैं. उदाहरण के लिए:

myButton.setOnClickListener {
   clickHanderFunction(it)
}

इस टास्क में, आप प्रोग्राम के हिसाब से done_button के लिए, क्लिक लिसनर जोड़ते हैं. आप क्लिक लिसनर को उससे जुड़ी गतिविधि के तौर पर जोड़ते हैं, जो MainActivity.kt है.

आपके क्लिक-लिस्टर फ़ंक्शन को addNickname कहा जाता है:

• nickname_edit टेक्स्ट में बदलाव करें से टेक्स्ट पाएं.
• टेक्स्ट को nickname_text टेक्स्ट व्यू में सेट करें.
• 'बदलाव करें' टेक्स्ट और बटन को छिपाएं.
• निकनेम दिखाएं TextView.

पहला चरण: क्लिक लिसनर जोड़ना

1. Android Studio में, java फ़ोल्डर में MainActivity.kt फ़ाइल खोलें.
2. MainActivity.kt में, MainActivity क्लास के अंदर, addNickname नाम का एक फ़ंक्शन जोड़ें. View टाइप का view नाम का इनपुट पैरामीटर शामिल करें. view पैरामीटर वह View होता है जिस पर फ़ंक्शन को कॉल किया जाता है. इस स्थिति में, view आपके हो गया बटन का इंस्टेंस होगा.

private fun addNickname(view: View) {
}

3. addNickname फ़ंक्शन के अंदर, nickname_edit बदलाव टेक्स्ट और nickname_text टेक्स्ट व्यू का रेफ़रंस पाने के लिए findViewById() का इस्तेमाल करें.

val editText = findViewById<EditText>(R.id.nickname_edit)
val nicknameTextView = findViewById<TextView>(R.id.nickname_text)

4. nicknameTextView टेक्स्ट व्यू में टेक्स्ट को text टेक्स्ट से मिले टेक्स्ट में सेट करें, जो उपयोगकर्ता ने editText में डाला है.

nicknameTextView.text = editText.text

5. editText की visibility प्रॉपर्टी को View.GONE पर सेट करके, निकनेम का EditText व्यू छिपाएं.

पिछले टास्क में, लेआउट एडिटर का इस्तेमाल करके visibility प्रॉपर्टी में बदलाव किया गया. यहां आप प्रोग्रामैटिक तरीके से काम करते हैं.

editText.visibility = View.GONE

6. visibility प्रॉपर्टी को View.GONE पर सेट करके हो गया बटन छिपाएं. आपके पास पहले से ही बटन फ़ंक्शन ##39; के इनपुट पैरामीटर, view के रूप में संदर्भ दिया गया है.

view.visibility = View.GONE

7. addNickname फ़ंक्शन के आखिर में, TextView का प्रचलित नाम visibility प्रॉपर्टी View.VISIBLE को सेट करें.

nicknameTextView.visibility = View.VISIBLE

दूसरा चरण: 'हो गया' बटन पर क्लिक लिसनर अटैच करें

अब जब आपके पास एक फ़ंक्शन है जो हो गया बटन पर टैप करने से होने वाली कार्रवाई के बारे में बताता है, तो आपको फ़ंक्शन को Button व्यू में अटैच करना होगा.

1. MainActivity.kt में, onCreate() फ़ंक्शन के आखिर में, हो गया Button व्यू से जुड़ी जानकारी पाएं. findViewById() फ़ंक्शन का इस्तेमाल करें और setOnClickListener को कॉल करें. क्लिक-लिस्टर फ़ंक्शन, addNickname() का रेफ़रंस पास करें.

findViewById<Button>(R.id.done_button).setOnClickListener {
            addNickname(it)
        }

ऊपर दिए गए कोड में, it का मतलब done_button से है, जो कि व्यू के आर्ग्युमेंट के तौर पर पास किया गया है.

2. अपना ऐप्लिकेशन चलाएं, कोई दूसरा नाम डालें, और हो गया बटन पर टैप करें. ध्यान दें कि टेक्स्ट में बदलाव करने और बटन को निकनेम के तौर पर सेट करने वाले व्यू से कैसे बदल जाता है.

ध्यान दें कि उपयोगकर्ता से हो गया बटन पर टैप करने के बाद भी, कीबोर्ड दिखता है. यह डिफ़ॉल्ट विकल्प है.

तीसरा चरण: कीबोर्ड छिपाना

इस चरण में, उपयोगकर्ता के हो गया बटन पर टैप करने के बाद, कीबोर्ड को छिपाने के लिए कोड जोड़ा जाता है.

1. MainActivity.kt में, addNickname() फ़ंक्शन के आखिर में, यह कोड जोड़ें. अगर आपको इस कोड के काम करने के तरीके के बारे में ज़्यादा जानकारी चाहिए, तो hideSoftInputFromWindow से जुड़ा दस्तावेज़ देखें.

// Hide the keyboard.
val inputMethodManager = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
inputMethodManager.hideSoftInputFromWindow(view.windowToken, 0)

2. अपना ऐप्लिकेशन फिर से चलाएं. ध्यान दें कि हो गया पर टैप करने के बाद, कीबोर्ड छिपा दिया जाता है.

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

इस टास्क में, आप निकनेम टेक्स्ट व्यू में क्लिक लिसनर जोड़ते हैं. क्लिक लिसनर, निकनेम टेक्स्ट व्यू को छिपा देता है, 'बदलाव करें' टेक्स्ट को दिखाता है, और हो गया बटन दिखाता है.

पहला चरण: क्लिक लिसनर जोड़ना

1. MainActivity में, निकनेम टेक्स्ट व्यू के लिए, updateNickname(view: View) नाम का क्लिक-लिस्टर फ़ंक्शन जोड़ें.

private fun updateNickname (view: View) {
}

2. updateNickname फ़ंक्शन के अंदर, nickname_edit टेक्स्ट में बदलाव करें और DONE बटन का रेफ़रंस पाएं. ऐसा करने के लिए, findViewById() तरीके का इस्तेमाल करें.

val editText = findViewById<EditText>(R.id.nickname_edit)
val doneButton = findViewById<Button>(R.id.done_button)

3. updateNickname फ़ंक्शन के आखिर में, टेक्स्ट में बदलाव करने के लिए कोड जोड़ें, हो गया बटन दिखाएं, और टेक्स्ट व्यू को छिपाएं.

editText.visibility = View.VISIBLE
doneButton.visibility = View.VISIBLE
view.visibility = View.GONE

4. MainActivity.kt में, onCreate() फ़ंक्शन के आखिर में, nickname_text टेक्स्ट व्यू में setOnClickListener को कॉल करें. क्लिक-लिस्टर फ़ंक्शन का रेफ़रंस पास करें, जो updateNickname() है.

findViewById<TextView>(R.id.nickname_text).setOnClickListener {
   updateNickname(it)
}

5. अपना ऐप्लिकेशन चलाएं. कोई दूसरा नाम डालें, हो गया बटन पर टैप करें, फिर प्रचलित नाम TextView व्यू पर टैप करें. निकनेम व्यू नहीं दिख रहा है. साथ ही, टेक्स्ट में बदलाव करने के साथ-साथ हो गया बटन भी दिख रहा है.
   
   
   

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

दूसरा चरण: फ़ोकस को TextText व्यू पर सेट करना और कीबोर्ड दिखाना

1. updateNickname फ़ंक्शन के आखिर में, फ़ोकस को EditText व्यू पर सेट करें. requestFocus() वाले तरीके का इस्तेमाल करें.

// Set the focus to the edit text.
editText.requestFocus()

2. कीबोर्ड को दिखाने के लिए, updateNickname फ़ंक्शन के आखिर में कोड जोड़ें.

// Show the keyboard.
val imm = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
imm.showSoftInput(editText, 0)

तीसरा चरण: प्रचलित नाम TextView व्यू में बैकग्राउंड का रंग जोड़ना

1. nickname_text टेक्स्ट व्यू के बैकग्राउंड का रंग, @color/colorAccent पर सेट करें. साथ ही, @dimen/small_padding का सबसे नीचे का पैडिंग जोड़ें. ये बदलाव, उपयोगकर्ता को यह संकेत देंगे कि दूसरे नाम वाले टेक्स्ट व्यू पर क्लिक किया जा सकता है.

android:background="@color/colorAccent"
android:paddingBottom="@dimen/small_padding"

2. अपना फ़ाइनल ऐप्लिकेशन चलाएं. टेक्स्ट में बदलाव करने पर फ़ोकस होता है. प्रचलित नाम, बदलाव टेक्स्ट में दिखता है, और दूसरे नाम का टेक्स्ट स्टाइल होता है.

अब किसी दोस्त को अपना इंटरैक्टिव aboutMe ऐप्लिकेशन दिखाएं!

Android Studio प्रोजेक्ट: AboutMeInteractive

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

क्लिक लिसनर

• आप किसी भी View लिसनर पर टैप करके, उसे क्लिक लिसनर जोड़कर जोड़ सकते हैं.
• क्लिक लिसनर के बारे में बताने वाला फ़ंक्शन, क्लिक किए गए View को पाता है.

आप दोनों में से किसी भी तरीके से, View में क्लिक-लिस्टर फ़ंक्शन अटैच कर सकते हैं:

• एक्सएमएल लेआउट में, <View> एलिमेंट में android:onClick एट्रिब्यूट जोड़ें.
• प्रोग्रामैटिक रूप से, संबंधित Activity में setOnClickListener(View.OnClickListener) फ़ंक्शन का इस्तेमाल करें.

Udcity कोर्स:

• Kotlin के साथ Android ऐप्लिकेशन डेवलप करना

Android डेवलपर दस्तावेज़:

• लेआउट एडिटर की मदद से एक यूज़र इंटरफ़ेस (यूआई) बनाना
• Button
• EditText
• इनपुट के प्रकार
• कीबोर्ड इनपुट मैनेज करना
• स्टाइल और थीम

इस सेक्शन में उन छात्र-छात्राओं के लिए गृहकार्य की असाइनमेंट की सूची दी गई है जो इस कोडलैब के ज़रिए एक शिक्षक की देखरेख में कोर्स में काम कर रहे हैं. यह क्रिएटर का काम #33 पर निर्भर करता है:

• अगर ज़रूरी हो, तो होमवर्क असाइन करें.
• छात्र-छात्राओं को होमवर्क के असाइनमेंट सबमिट करने के तरीके के बारे में बताएं.
• होमवर्क असाइनमेंट को ग्रेड दें.

शिक्षक इन सुझावों का इस्तेमाल जितनी चाहें उतनी कम या ज़्यादा कर सकते हैं. साथ ही, उन्हें अपने हिसाब से कोई भी होमवर्क असाइन करना चाहिए.

अगर आप इस कोडलैब के ज़रिए खुद काम कर रहे हैं, तो बेझिझक इन होमवर्क असाइनमेंट का इस्तेमाल करें.

इन सवालों के जवाब दें

पहला सवाल

EditText किस सब-क्लास का है?

• View
• LinearLayout
• TextView
• Button

दूसरा सवाल

अगर किसी व्यू पर सेट किया गया है, तो इनमें से visibility एट्रिब्यूट की कौनसी वैल्यू तय होती है, ताकि व्यू छिप जाए और वह लेआउट में किसी भी जगह का इस्तेमाल न करे?

• visible
• Invisible
• gone
• hide

तीसरा सवाल

EditText व्यू के लिए, संकेत देने का सही तरीका यह नहीं है, क्योंकि संकेत इनपुट फ़ील्ड को व्यवस्थित नहीं करते. सही या गलत?

• सही
• गलत

चौथा सवाल

Button व्यू के बारे में इनमें से कौनसी बातें सही हैं?

• Button व्यू एक व्यू ग्रुप है.
• आप हर स्क्रीन को सिर्फ़ Button व्यू दे सकते हैं.
• Button व्यू पर क्लिक किया जा सकता है. साथ ही, क्लिक करने पर, अटैच किए गए क्लिक लिसनर के ज़रिए कोई कार्रवाई की जाती है.
• Button, ImageView का एक्सटेंशन है.

अगला लेसन शुरू करें: 2.3: लेआउट एडिटर का इस्तेमाल करके कंस्ट्रेंट लेआउट

इस कोर्स में दिए गए दूसरे कोडलैब के लिंक के लिए, Android Kotlin की बुनियादी बातें कोडलैब का लैंडिंग पेज देखें.