Kotlin में कंडीशनल—भाग 2

इस कोडलैब में, आप अपने मौजूदा Dice Roller Android ऐप्लिकेशन में पासे वाली इमेज जोड़ेंगे. सबसे पहले यह पक्का करें कि आपने Dice Roller ऐप्लिकेशन का आधार बनाने से पहले की कोडलैब (कोड बनाना सीखना) पूरी कर ली हो.

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

आपको पासे वाली इमेज डाउनलोड करने के लिए एक लिंक दिया जाएगा. साथ ही, उन्हें अपने ऐप्लिकेशन में संसाधनों के तौर पर जोड़ा जाएगा. कोड लिखने के लिए, Kotlin में when स्टेटमेंट का इस्तेमाल किया जाएगा. यह कोड इस्तेमाल करने के लिए यह इमेज इस्तेमाल करनी होगी.

ज़रूरी बातें

• Dice Roller Android ऐप्लिकेशन को बटन कोडलैब के साथ बनाएं.
• कंट्रोल फ़्लो स्टेटमेंट (if / else, when स्टेटमेंट) लिखने की सुविधा
• उपयोगकर्ता के इनपुट के आधार पर ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) को अपडेट कर सकते हैं (MainActivity.kt फ़ाइल में बदलाव करके).
• Button. पर क्लिक लिसनर जोड़ने की सुविधा
• Android ऐप्लिकेशन में इमेज संसाधन जोड़ने की सुविधा.

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

• ऐप्लिकेशन के इस्तेमाल के दौरान, ImageView को अपडेट करने का तरीका.
• अलग-अलग स्थितियों (when स्टेटमेंट का इस्तेमाल करके) के आधार पर, अपने ऐप्लिकेशन के व्यवहार को पसंद के मुताबिक बनाने का तरीका.

आप क्या बनाएंगे #39;

• पासा फेंकने वाला Android ऐप्लिकेशन, जिसमें पासा फेंकने और स्क्रीन पर मौजूद इमेज को अपडेट करने के लिए Button दिया गया होता है.

आपको इन चीज़ों की ज़रूरत पड़ेगी

• कंप्यूटर पर Android Studio इंस्टॉल किया गया हो.
• पासे वाली इमेज डाउनलोड करने के लिए इंटरनेट कनेक्शन.

इस टास्क में, आप #33 को अपने लेआउट में TextView से बदलकर, ImageView पासा दिखाने वाली इमेज की इमेज दिखाएंगे.

Dice Roller ऐप्लिकेशन खोलें

1. Android Studio में एक बटन से Dice Roller का Android ऐप्लिकेशन बनाएं खोलें और चलाएं.
   ऐप्लिकेशन को कुछ ऐसा दिखना चाहिए.

2. activity_main.xml (app > res > layout > activity_main.xml) खोलें.
   इससे लेआउट एडिटर खुलता है.

TextView मिटाएं

1. लेआउट एडिटर में, कॉम्पोनेंट ट्री में TextView को चुनें.
   

सलाह: जैसे-जैसे आप यूज़र इंटरफ़ेस (यूआई) के ज़्यादा कॉम्पोनेंट जोड़ते हैं और कंस्ट्रेंट को जोड़ते और हटाते हैं, आपको कुछ समय के लिए View का ओवरलैप हो सकता है. इससे एक कॉम्पोनेंट का बैक अप लेना मुश्किल हो जाता है. उस स्थिति में, आप इसके बजाय कॉम्पोनेंट ट्री में उसे चुनकर View को चुन सकते हैं.

2. दायां क्लिक करें और मिटाएं चुनें या Delete बटन दबाएं.
3. Button पर चेतावनी को अनदेखा करें. आप इसे अगले चरण में ठीक कर सकते हैं.

लेआउट में ImageView जोड़ना

1. पैलेट व्यू से डिज़ाइन व्यू पर ImageView को खींचकर, Button के ऊपर रखें.

2. कोई संसाधन चुनें डायलॉग में, नमूना डेटा में अवतार चुनें. यह वह अस्थायी इमेज है जिसका इस्तेमाल आप तब तक करेंगे, जब तक आप अगले टास्क में पासे वाली इमेज नहीं जोड़ेंगे.

3. ठीक है दबाएं. आपके ऐप्लिकेशन का डिज़ाइन व्यू कुछ ऐसा दिखना चाहिए.

4. कॉम्पोनेंट ट्री में, आपको दो गड़बड़ियां दिखेंगी. Button वर्टिकल रूप से सीमित नहीं है और ImageView न तो वर्टिकल और न ही हॉरिज़ॉन्टल है.

Button वर्टिकल रूप से सीमित नहीं है, क्योंकि आपने उसके नीचे मूल रूप से जिस TextView को रखा था उसे हटा दिया गया है. अब आपको ImageView और Button को इसके नीचे रखना होगा.

ImageView और बटन को पोज़िशन करना

आपको स्क्रीन पर ImageView को बीच में रखना होगा, भले ही Button कहीं भी मौजूद हो.

1. ImageView में हॉरिज़ॉन्टल कंस्ट्रेंट जोड़ें. ImageView की बाईं ओर मौजूद, ConstraintLayout के बाएं किनारे से कनेक्ट करें.
2. ImageView की दाईं ओर, माता-पिता के दाएं किनारे को जोड़ें.
   इससे ImageView को पैरेंट के अंदर हॉरिज़ॉन्टली सेंटर किया जा सकेगा.

3. ImageView के ऊपर एक वर्टिकल कंस्ट्रेंट जोड़ें, जो ImageView के टॉप को पैरंट के टॉप से कनेक्ट करता है.
   ImageView, ConstraintLayout के सबसे ऊपर तक स्लाइड होगा.
   
4. Button के ऊपर की तरफ़ Button को सबसे नीचे से जोड़ते हुए Button का वर्टिकल कंस्ट्रेंट जोड़ें.
   Button, ImageView के नीचे से ऊपर की ओर स्लाइड करेगा.
   
5. अब ImageView को फिर से चुनें और वर्टिकल वर्टिकल कंस्ट्रेंट को ImageView के निचले हिस्से से जोड़ें.
   यह ImageView वर्टिकल में ConstraintLayout के बीच में होता है.

कंस्ट्रेंट के बारे में दी गई सभी चेतावनियां, अब हटा दी जाएंगी.

इसके बाद, डिज़ाइन व्यू ऐसा दिखना चाहिए. बीच में ImageView और इसके ठीक नीचे Button होना चाहिए.

आपको ImageView पर कॉम्पोनेंट ट्री में एक चेतावनी दिख सकती है. इसमें यह बताया जाएगा कि ImageView में कॉन्टेंट का ब्यौरा जोड़ा गया है. इस चेतावनी के बारे में अभी चिंता न करें, क्योंकि बाद में कोडलैब में, आप ImageView की सामग्री की जानकारी इस हिसाब से सेट करेंगे कि आप कौनसी डाइस इमेज दिखा रहे हैं. यह बदलाव Kotlin कोड में किया जाएगा.

इस टास्क में, आप #39; पासे वाली कुछ इमेज डाउनलोड करेंगे और उन्हें अपने ऐप्लिकेशन में जोड़ेंगे.

पासे वाली इमेज डाउनलोड करें

1. अपने कंप्यूटर पर पासे की इमेज वाली ZIP फ़ाइल डाउनलोड करने के लिए, यह यूआरएल खोलें. डाउनलोड पूरा होने का इंतज़ार करें.
2. अपने कंप्यूटर पर फ़ाइल ढूंढें (शायद यह डाउनलोड फ़ोल्डर में हो).
3. ज़िप फ़ाइल को अनपैक करने के लिए उस पर दो बार क्लिक करें. यह एक नया DiceImages फ़ोल्डर बनाता है जिसमें 6 डाइस इमेज फ़ाइलें होती हैं, जो 1 से 6 तक डाइस वैल्यू दिखाती हैं.

अपने ऐप्लिकेशन में पासे वाली इमेज जोड़ें

1. Android Studio में, मेन्यू में > टूल Windows > संसाधन मैनेजर पर क्लिक करें या प्रोजेक्ट विंडो के बाईं ओर मौजूद संसाधन मैनेजर टैब पर क्लिक करें.
2. संसाधन मैनेजर के नीचे + पर क्लिक करें और ड्रॉ करने लायक इंपोर्ट करें चुनें. इससे एक फ़ाइल ब्राउज़र खुलता है.

3. 6 डाइस इमेज फ़ाइलें ढूंढें और चुनें. आप पहली फ़ाइल चुन सकते हैं. इसके बाद, Shift बटन को दबाकर रखें और अन्य फ़ाइलें चुनें.
4. खोलें पर क्लिक करें.

5. आगे बढ़ें पर क्लिक करें और फिर इंपोर्ट करें पर क्लिक करके, इस बात की पुष्टि करें कि आप इन छह संसाधनों को इंपोर्ट करना चाहते हैं.

6. अगर फ़ाइलें इंपोर्ट हो गई हैं, तो आपके ऐप्लिकेशन की ड्रॉ करने लायक सूची में छह इमेज दिखनी चाहिए.

बहुत अच्छे! अगले टास्क में, आप अपने ऐप्लिकेशन में इन इमेज का इस्तेमाल करेंगे.

अहम जानकारी! - आप अपने Kotlin कोड में, इन रिसॉर्स आईडी के साथ इमेज देख सकते हैं:

• R.drawable.dice_1
• R.drawable.dice_2
• R.drawable.dice_3
• R.drawable.dice_4
• R.drawable.dice_5
• R.drawable.dice_6

नमूने के अवतार की इमेज बदलें

1. डिज़ाइन एडिटर में, ImageView चुनें.
2. एलान किए गए एट्रिब्यूट सेक्शन में मौजूद एट्रिब्यूट में, टूल srcCompat एट्रिब्यूट ढूंढें, जो अवतार इमेज पर सेट है.

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

3. अवतार के छोटे पूर्वावलोकन पर क्लिक करें. इससे, ImageView के लिए इस्तेमाल किया जाने वाला एक नया संसाधन चुनने के लिए एक डायलॉग खुलता है.

4. dice_1 ड्रॉ करने वाला चुनें और ठीक है पर क्लिक करें.

वाह! ImageView पूरी स्क्रीन पर दिखता है.

इसके बाद, आप ImageView की चौड़ाई और ऊंचाई में बदलाव करेंगे, ताकि यह Button को न छिपा सके.

5. कंस्ट्रेंट विजेट के एट्रिब्यूट विंडो में, layout_width और layout_height एट्रिब्यूट का पता लगाएं. फ़िलहाल, इसे wrap_content पर सेट किया गया है. इसका मतलब है कि ImageView, इसके अंदर के कॉन्टेंट (स्रोत इमेज) जितना लंबा होगा.
6. इसके बजाय, ImageView पर 160dp की निश्चित चौड़ाई और 200dp की निश्चित ऊंचाई सेट करें. Enter दबाएं.
   
   ImageView अब बहुत छोटा है.
   

आपको ऐसा लग सकता है कि Button इमेज के काफ़ी करीब है.

7. कंस्ट्रेंट विजेट में सेट करके, 16dp के बटन में सबसे ऊपर का मार्जिन जोड़ें.
   

डिज़ाइन व्यू अपडेट होने के बाद, ऐप्लिकेशन काफ़ी बेहतर दिखता है!

ध्यान दें: इन डाइमेंशन को तय करने के लिए, डेंसिटी इंडिपेंडेंट पिक्सल (डीपी) का इस्तेमाल इकाई के तौर पर करें, ताकि इमेज का साइज़ अलग-अलग पिक्सल रिज़ॉल्यूशन वाले डिवाइस पर सही तरीके से स्केल हो सके.

बटन क्लिक होने पर पासे वाली इमेज बदलें

लेआउट ठीक कर लिया गया है, लेकिन पासा वाली इमेज का इस्तेमाल करने के लिए MainActivity क्लास को अपडेट करना पड़ेगा.

ऐप्लिकेशन में इस समय MainActivity.kt फ़ाइल में एक गड़बड़ी है. अगर आप ऐप्लिकेशन चलाने की कोशिश करेंगे, तो आपको यह बिल्ड गड़बड़ी दिखेगी:

ऐसा इसलिए है, क्योंकि आपका कोड अब भी TextView से जुड़ा हुआ है, जिसे आपने लेआउट से मिटाया है.

1. MainActivity.kt (app > java > com.example.diceroller > MainActivity.kt) खोलें

कोड R.id.textView का रेफ़रंस देता है, लेकिन Android Studio उसे पहचान नहीं पाता.

2. rollDice() तरीके में, TextView पर ले जाने वाला कोई भी कोड चुनें और इसे मिटा दें.

// Update the TextView with the dice roll
val resultTextView: TextView = findViewByID(R.id.textView)
resultTextView.text = dice.roll().toString()

3. अब भी rollRice() में, diceImage टाइप ImageView वाला एक नया वैरिएबल बनाएं. इसे लेआउट से ImageView के बराबर सेट करें. findViewById() तरीके का इस्तेमाल करें और इनपुट तर्क के तौर पर, ImageView, R.id.imageView के लिए संसाधन आईडी पास करें.

val diceImage: ImageView = findViewById(R.id.imageView)

अगर आपको #39;ImageView के सटीक रिसॉर्स आईडी का पता लगाने का तरीका जानना है, तो एट्रिब्यूट विंडो में सबसे ऊपर मौजूद आईडी देखें.

जब आप Kotlin कोड में इस रिसॉर्स आईडी का रेफ़रंस देते हैं, तो पक्का करें कि आपने इसे बिल्कुल वैसा ही टाइप किया हो (लोअरकेस i, कैपिटल V, कोई स्पेस नहीं). ऐसा न करने पर, Android Studio में गड़बड़ी दिखेगी.

4. यह टेस्ट करने के लिए कोड की यह पंक्ति जोड़ें कि आप बटन पर क्लिक होने पर ImageView को सही तरीके से अपडेट कर सकते हैं. पासा हमेशा हमेशा "&2"नहीं रहता, बल्कि जांच के लिए सिर्फ़ dice_2 इमेज का इस्तेमाल करना चाहिए.

diceImage.setImageResource(R.drawable.dice_2)

यह कोड dice_2 इमेज के लिए रिसॉर्स आईडी पास करता है. साथ ही, ImageView पर setImageResource() तरीके का इस्तेमाल करता है. यह dice_2 इमेज को दिखाने के लिए स्क्रीन पर ImageView को अपडेट करेगा.

rollDice() का तरीका अब ऐसा दिखना चाहिए:

private fun rollDice() {
    val dice = Dice(6)
    val diceRoll = dice.roll()
    val diceImage: ImageView = findViewById(R.id.imageView)
    diceImage.setImageResource(R.drawable.dice_2)
}

5. अपने ऐप्लिकेशन को पुष्टि करें कि यह बिना किसी गड़बड़ी के काम करता है.

ऐप्लिकेशन को रोल बटन को छोड़कर, खाली स्क्रीन से शुरू होना चाहिए.

बटन पर टैप करने के बाद, दो वैल्यू वाली एक पासा वाली इमेज दिखेगी. हाँ!!

आप बटन पर टैप करके, इमेज बदल सकते थे! आप #39 के करीब हैं!

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

कोड लिखना शुरू करने से पहले, इस बारे में सोच-विचार करें कि ऐप्लिकेशन को कैसा व्यवहार करना चाहिए. इसके लिए कुछ स्यूडोकोड लिखें जो यह बताता हो कि क्या होना चाहिए. उदाहरण के लिए:

अगर उपयोगकर्ता 1 को रोल आउट करता है, तो dice_1 इमेज दिखाएं.

अगर उपयोगकर्ता 2 रोल आउट करता है, तो dice_2 इमेज दिखाएं.

वगैरह...

ध्यान दें: स्यूडोकोड में किसी कोड के काम करने के तरीके की जानकारी दी जाती है. यह if / else जैसी कंप्यूटर भाषा के कुछ एलिमेंट का इस्तेमाल करता है, लेकिन चीज़ों को समझने में आसान बनाता है. पूरी जानकारी का फ़ैसला लेने से पहले, सही तरीके का इस्तेमाल करने से जुड़े फ़ैसले लेने के लिए यह मददगार हो सकता है.

ऊपर दिए गए स्यूडोकोड को Kotlin में, if / else स्टेटमेंट की मदद से लिखा जा सकता है. यह पासा वाले मान के आधार पर लिखा जाता है.

if (diceRoll == 1) {
   diceImage.setImageResource(R.drawable.dice_1)
} else if (diceRoll == 2) {
   diceImage.setImageResource(R.drawable.dice_2)
}
 ...

हालांकि, हर मामले के लिए if / else लिखने से दोहराव होता है. एक ही लॉजिक को when स्टेटमेंट की मदद से ज़्यादा आसानी से बताया जा सकता है. यह छोटा है (बिना कोड वाला)! अपने ऐप्लिकेशन में इस तरीके का इस्तेमाल करें.

when (diceRoll) {
   1 -> diceImage.setImageResource(R.drawable.dice_1)
   2 -> diceImage.setImageResource(R.drawable.dice_2)
   ...

RollDice() तरीका अपडेट करें

1. rollDice() तरीके में, कोड की उस लाइन को मिटाएं जो इमेज के संसाधन आईडी को हर बार dice_2 इमेज पर सेट करती है.

diceImage.setImageResource(R.drawable.dice_2)

2. इसे when ऐसे स्टेटमेंट से बदलें जो diceRoll की वैल्यू के आधार पर ImageView को अपडेट करता है.

   when (diceRoll) {
       1 -> diceImage.setImageResource(R.drawable.dice_1)
       2 -> diceImage.setImageResource(R.drawable.dice_2)
       3 -> diceImage.setImageResource(R.drawable.dice_3)
       4 -> diceImage.setImageResource(R.drawable.dice_4)
       5 -> diceImage.setImageResource(R.drawable.dice_5)
       6 -> diceImage.setImageResource(R.drawable.dice_6)
   }

जब आप बदलाव कर लें, तब rollDice() तरीका इस तरह दिखना चाहिए.

private fun rollDice() {
   val dice = Dice(6)
   val diceRoll = dice.roll()

   val diceImage: ImageView = findViewById(R.id.imageView)

   when (diceRoll) {
       1 -> diceImage.setImageResource(R.drawable.dice_1)
       2 -> diceImage.setImageResource(R.drawable.dice_2)
       3 -> diceImage.setImageResource(R.drawable.dice_3)
       4 -> diceImage.setImageResource(R.drawable.dice_4)
       5 -> diceImage.setImageResource(R.drawable.dice_5)
       6 -> diceImage.setImageResource(R.drawable.dice_6)
   }
}

3. ऐप्लिकेशन चलाएं. रोल बटन को क्लिक करने से पासे की इमेज को 2 के अलावा दूसरी वैल्यू में भी बदल दिया जाता है. यह काम कर रहा है!

अपना कोड ऑप्टिमाइज़ करना

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

आपने देखा होगा कि आपके स्टेटमेंट में diceImage.setImageResource() को कॉल छह बार दिखता है.

when (diceRoll) {
    1 -> diceImage.setImageResource(R.drawable.dice_1)
    2 -> diceImage.setImageResource(R.drawable.dice_2)
    3 -> diceImage.setImageResource(R.drawable.dice_3)
    4 -> diceImage.setImageResource(R.drawable.dice_4)
    5 -> diceImage.setImageResource(R.drawable.dice_5)
    6 -> diceImage.setImageResource(R.drawable.dice_6)
}

हर मामले में सिर्फ़ एक संसाधन आईडी है जिसका इस्तेमाल किया जा रहा है. इसका मतलब है कि इस्तेमाल करने के लिए, रिसॉर्स आईडी को स्टोर करने के लिए वैरिएबल बनाया जा सकता है. इसके बाद, अपने कोड में सिर्फ़ diceImage.setImageResource() को कॉल किया जा सकता है और सही रिसॉर्स आईडी को पास किया जा सकता है.

1. ऊपर दिए गए कोड को नीचे दिए गए कोड से बदलें.

val drawableResource = when (diceRoll) {
   1 -> R.drawable.dice_1
   2 -> R.drawable.dice_2
   3 -> R.drawable.dice_3
   4 -> R.drawable.dice_4
   5 -> R.drawable.dice_5
   6 -> R.drawable.dice_6
}

diceImage.setImageResource(drawableResource)

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

2. ध्यान दें कि अब लाल रंग में when को अंडरलाइन किया गया है. कर्सर को कर्सर पर घुमाने पर, आपको एक गड़बड़ी का मैसेज दिखेगा: 'when' एक्सप्रेशन पूरा होना चाहिए. ज़रूरी 'else' ब्रांच जोड़ें.

गड़बड़ी यह है, क्योंकि when एक्सप्रेशन की वैल्यू drawableResource को असाइन की गई है. इसलिए, when में पूरी जानकारी होनी चाहिए. इसलिए, यह सभी केस को हैंडल करना चाहिए, ताकि वैल्यू हमेशा दिखे. भले ही, वैल्यू को 12 साइड वाले पासे में बदल दिया गया हो. Android Studio, else की ब्रांच जोड़ने का सुझाव देता है. आप 6 के लिए केस को else में बदलकर इसे ठीक कर सकते हैं. 1 से 5 तक के केस एक जैसे होते हैं, लेकिन 6 के साथ बाकी सभी मामले else से हैंडल किए जाते हैं.

val drawableResource = when (diceRoll) {
   1 -> R.drawable.dice_1
   2 -> R.drawable.dice_2
   3 -> R.drawable.dice_3
   4 -> R.drawable.dice_4
   5 -> R.drawable.dice_5
   else -> R.drawable.dice_6
}

diceImage.setImageResource(drawableResource)

3. यह पक्का करने के लिए कि ऐप्लिकेशन अब भी ठीक से काम कर रहा है, ऐप्लिकेशन को चलाएं. यह पक्का करने के लिए इसकी अच्छी तरह से जांच कर लें कि आपको सभी डेटा, 1 से 6 तक पासे की इमेज के साथ दिखते हैं.

ImageView पर कॉन्टेंट का सही ब्यौरा सेट करना

अब जब आप ##39; रोल किए गए नंबर को इमेज से बदल देते हैं, तो स्क्रीन रीडर यह नहीं बता सकते कि कौनसा नंबर रोल किया गया है. इस समस्या को ठीक करने के लिए, इमेज के संसाधन को अपडेट करने के बाद' ImageView के कॉन्टेंट की जानकारी अपडेट करें. कॉन्टेंट की जानकारी में ImageView पर दिखाए गए टेक्स्ट के बारे में जानकारी होनी चाहिए, ताकि स्क्रीन रीडर उसका ब्यौरा दे सकें.

diceImage.contentDescription = diceRoll.toString()

स्क्रीन रीडर, इस कॉन्टेंट की जानकारी को ज़ोर से पढ़ सकते हैं. इस वजह से, अगर स्क्रीन पर कोई कोट दिखता है, तो कॉन्टेंट की जानकारी ज़ोर से पढ़ी जाएगी.

बेहतर तरीके से लॉन्च करने की सुविधा दें

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

override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)

   val rollButton: Button = findViewById(R.id.button)
   rollButton.setOnClickListener { rollDice() }

   // Do a dice roll when the app starts
   rollDice()
}

अपने कोड पर टिप्पणी करें

अपने कोड में कुछ टिप्पणियां जोड़ें और बताएं कि आपके लिखे गए कोड में क्या हो रहा है.

जब आप ये सभी बदलाव कर लेते हैं, तब rollDice() तरीका कुछ ऐसा दिख सकता है.

/**
* Roll the dice and update the screen with the result.
*/
private fun rollDice() {
   // Create new Dice object with 6 sides and roll the dice
   val dice = Dice(6)
   val diceRoll = dice.roll()

   // Find the ImageView in the layout
   val diceImage: ImageView = findViewById(R.id.imageView)

   // Determine which drawable resource ID to use based on the dice roll
   val drawableResource = when (diceRoll) {
       1 -> R.drawable.dice_1
       2 -> R.drawable.dice_2
       3 -> R.drawable.dice_3
       4 -> R.drawable.dice_4
       5 -> R.drawable.dice_5
       else -> R.drawable.dice_6
   }

   // Update the ImageView with the correct drawable resource ID
   diceImage.setImageResource(drawableResource)

   // Update the content description
   diceImage.contentDescription = diceRoll.toString()
}

पूरी MainActivity.kt फ़ाइल के लिए, नीचे लिंक किए गए GitHub पर सॉल्यूशन कोड देखें.

डाइस रोलर ऐप्लिकेशन को पूरा करने के लिए बधाई! अब आप इस ऐप्लिकेशन को अपने दोस्तों के साथ अगली गेम रात पर ला सकते हैं!

इस कोडलैब के लिए सॉल्यूशन कोड, नीचे दिए गए प्रोजेक्ट और मॉड्यूल में मौजूद है.

समाधान कोड का यूआरएल: https://github.com/google-developer-training/android-basics-kotlin-dice-roller-with-images-app-solution

GitHub से इस कोडलैब का कोड पाने और इसे Android Studio में खोलने के लिए, ये काम करें.

1. Android Studio शुरू करें.
2. Android Studio में आपका स्वागत है विंडो पर, वर्शन कंट्रोल से प्रोजेक्ट देखें पर क्लिक करें.
3. उपहार चुनें.

4. Clone Repository डायलॉग में, दिए गए कोड यूआरएल को URL बॉक्स में चिपकाएं.
5. जांचें बटन पर क्लिक करें और इंतज़ार करें. इसके बाद, पक्का करें कि स्क्रीन पर एक हरा पॉप-अप बबल दिख रहा है, जिसमें लिखा है कि कनेक्शन जोड़ लिया गया है.
6. इसके अलावा, आप डायरेक्ट्री को सुझाए गए डिफ़ॉल्ट से अलग कुछ भी बदल सकते हैं.

7. क्लॉन पर क्लिक करें. Android Studio आपका कोड फ़ेच करना शुरू कर देता है.
8. वर्शन कंट्रोल से चेकआउट पॉप-अप में, हां पर क्लिक करें.

9. Android Studio के खुलने का इंतज़ार करें.
10. अपने कोडलैब स्टार्टर या सॉल्यूशन कोड के लिए सही मॉड्यूल चुनें.

11. अपना कोड बनाने और चलाने के लिए, चलाएं बटन पर क्लिक करें.

सहायता: अगर आपका डाउनलोड किया गया कोड ठीक से लोड नहीं होता है या चल नहीं रहा है, तो सहायता और समस्या को हल करने की गाइड देखें.

• ImageView में दिखने वाली इमेज को बदलने के लिए setImageResource() का इस्तेमाल करें
• अपने ऐप्लिकेशन में अलग-अलग मामलों को हैंडल करने के लिए, if / else एक्सप्रेशन या when एक्सप्रेशन जैसे कंट्रोल फ़्लो स्टेटमेंट का इस्तेमाल करें. उदाहरण के लिए, अलग-अलग स्थितियों में अलग-अलग इमेज दिखाना.

• Kotlin में if एक्सप्रेशन
• Kotlin में when एक्सप्रेशन
• ImageView.setImageResource()
• सुलभता

ध्यान दें: प्रैक्टिस वैकल्पिक हैं. इनसे आपको उस कोड का अभ्यास करने में मदद मिलती है जो आपने इस कोडलैब में सीखा है.

ये करें:

1. ऐप्लिकेशन में कोई दूसरा पासा जोड़ें, ताकि एक भूमिका बटन दो पासे वाले नतीजे दे. आपको अपने लेआउट में कितने ImageViews की ज़रूरत होगी? MainActivity.kt कोड पर इसका क्या असर होगा?

अपने काम की जांच करें:

आपका पूरा हो चुका ऐप्लिकेशन बिना किसी गड़बड़ी के चलना चाहिए और दोनों पासे दिखाने चाहिए.