Android Kotlin Fundamentals 07.3: RecyclerView के साथ GridLayout

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

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

इस सीरीज़ में ये कोडलैब शामिल हैं:

• 7.1 RecyclerView की बुनियादी बातें
• 7.2 RecyclerView के साथ DiffUtil और डेटा बाइंडिंग
• 7.3 RecyclerView के साथ GridLayout
• 7.4 RecyclerView आइटम के साथ इंटरैक्ट करना
• 7.5 RecyclerView में हेडर

परिचय

RecyclerView की एक मुख्य खासियत यह है कि यह आपको लेआउट मैनेजर का इस्तेमाल करने की सुविधा देता है. इससे लेआउट की रणनीति को कंट्रोल और उसमें बदलाव किया जा सकता है. LayoutManager यह तय करता है कि RecyclerView में मौजूद आइटम किस तरह से व्यवस्थित किए जाएं.

RecyclerView में, इस्तेमाल के सामान्य उदाहरणों के लिए लेआउट मैनेजर पहले से मौजूद होते हैं. उदाहरण के लिए, हॉरिज़ॉन्टल और वर्टिकल सूचियों के लिए LinearLayout या ग्रिड के लिए GridLayout का इस्तेमाल किया जा सकता है. ज़्यादा जटिल इस्तेमाल के उदाहरणों के लिए, आपको कस्टम LayoutManager लागू करना होगा.

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

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

आपको इनके बारे में जानकारी होनी चाहिए:

• Activity, Fragments, और Views का इस्तेमाल करके बुनियादी यूज़र इंटरफ़ेस बनाना
• फ़्रैगमेंट के बीच नेविगेट करना और फ़्रैगमेंट के बीच डेटा पास करने के लिए safeArgs का इस्तेमाल करना
• मॉडल, मॉडल फ़ैक्ट्री, और बदलाव देखना
• LiveData और उनके ऑब्ज़र्वर
• Room डेटाबेस बनाने, डीएओ बनाने, और इकाइयों को तय करने का तरीका
• डेटाबेस के टास्क और लंबे समय तक चलने वाले अन्य टास्क के लिए, को-रूटीन का इस्तेमाल कैसे करें
• Adapter, ViewHolder, और आइटम लेआउट के साथ बुनियादी RecyclerView को लागू करने का तरीका
• RecyclerView के लिए डेटा बाइंडिंग लागू करने का तरीका
• डेटा को बदलने के लिए, बाइंडिंग अडैप्टर बनाने और उनका इस्तेमाल करने का तरीका

आपको क्या सीखने को मिलेगा

• RecyclerView में डेटा दिखाने के तरीके को बदलने के लिए, किसी दूसरे LayoutManager का इस्तेमाल कैसे करें
• नींद के डेटा के लिए ग्रिड लेआउट बनाने का तरीका

आपको क्या करना होगा

• इस सीरीज़ के पिछले कोडलैब में बनाए गए स्लीप-ट्रैकर ऐप्लिकेशन का इस्तेमाल करें.
• ऐप्लिकेशन में RecyclerView की ओर से दिखाए गए नींद के डेटा की सूची को, नींद के डेटा की ग्रिड से बदलें.

नींद को ट्रैक करने वाले ऐप्लिकेशन में दो स्क्रीन होती हैं. इन्हें फ़्रैगमेंट के तौर पर दिखाया जाता है. इसकी जानकारी नीचे दी गई इमेज में मौजूद है.

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

यह ऐप्लिकेशन, यूज़र इंटरफ़ेस (यूआई) कंट्रोलर, व्यू मॉडल, और LiveData के साथ-साथ Room डेटाबेस का इस्तेमाल करता है. इससे नींद के डेटा को सेव किया जा सकता है.

नींद का डेटा, RecyclerView में दिखाया जाता है. इस कोडलैब में, ऐप्लिकेशन को GridLayout का इस्तेमाल करने के लिए बदला जाता है. आखिरी स्क्रीन, नीचे दिए गए स्क्रीनशॉट की तरह दिखेगी.

पिछले कोडलैब में, आपने RecyclerView को fragment_sleep_tracker.xml में जोड़ते समय, बिना किसी बदलाव के LinearLayoutManager जोड़ा था. यह कोड, डेटा को वर्टिकल सूची के तौर पर दिखाता है.

app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"

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

GridLayout

इस्तेमाल का एक और सामान्य उदाहरण यह है कि आपको उपयोगकर्ता को बहुत सारा डेटा दिखाना है. इसके लिए, GridLayout का इस्तेमाल किया जा सकता है. RecyclerView के लिए GridLayoutManager, डेटा को स्क्रोल की जा सकने वाली ग्रिड के तौर पर दिखाता है. इसे यहां दिखाया गया है.

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

GridLayout, आइटम को कैसे लेआउट करता है

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

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

डिफ़ॉल्ट रूप से, हर आइटम एक स्पैन की जगह लेता है. हालांकि, किसी आइटम के लिए ज़्यादा स्पैन तय करके, उसे ज़्यादा चौड़ा बनाया जा सकता है. उदाहरण के लिए, सबसे दाईं ओर मौजूद स्क्रीन (नीचे दिखाई गई) में सबसे ऊपर मौजूद आइटम, तीन स्पैन लेता है.

अहम जानकारी: स्पैन का मतलब "लाइन" या "कॉलम" हो सकता है. GridLayoutManager की मदद से, spanCount का इस्तेमाल करके यह बताया जाता है कि ग्रिड में कितने कॉलम या लाइनें हैं. साथ ही, यह भी बताया जाता है कि कोई आइटम, ग्रिड में हॉरिज़ॉन्टल या वर्टिकल तौर पर कितनी जगह लेता है.

GridLayoutManager बनाते समय, स्पैन की संख्या से अलग ओरिएंटेशन तय किया जाता है. साथ ही, "स्पैन" "दिशा से जुड़ा नहीं होता." डिफ़ॉल्ट वर्टिकल कॉन्फ़िगरेशन में, "span" और "column" एक जैसे होते हैं.

इस टास्क में, आपको पिछली एक्सरसाइज़ में पूरा किए गए RecyclerView को अपडेट करना है. इससे GridLayoutManager का इस्तेमाल करके डेटा दिखाया जा सकेगा. पिछले कोडलैब में इस्तेमाल किए गए स्लीप-ट्रैकर ऐप्लिकेशन का इस्तेमाल जारी रखा जा सकता है. इसके अलावा, GitHub से RecyclerViewGridLayout-Starter ऐप्लिकेशन भी डाउनलोड किया जा सकता है.

पहला चरण: LayoutManager बदलना

1. अगर ज़रूरत हो, तो इस कोडलैब के लिए RecyclerViewGridLayout-Starter ऐप्लिकेशन को GitHub से डाउनलोड करें. इसके बाद, Android Studio में प्रोजेक्ट खोलें.
2. fragment_sleep_tracker.xml लेआउट फ़ाइल खोलें.
3. sleep_list RecyclerView की परिभाषा से लेआउट मैनेजर को हटाएं.

मिटाने के लिए कोड:

app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager

4. SleepTrackerFragment.kt खोलें.
5. OnCreateView() में, return स्टेटमेंट से ठीक पहले, तीन स्पैन वाला नया वर्टिकल, टॉप-टू-बॉटम GridLayoutManager बनाएं.
   
   GridLayoutManager कंस्ट्रक्टर, ज़्यादा से ज़्यादा चार आर्ग्युमेंट लेता है: कॉन्टेक्स्ट, जो कि activity है, स्पैन की संख्या (डिफ़ॉल्ट वर्टिकल लेआउट में कॉलम), ओरिएंटेशन (डिफ़ॉल्ट वर्टिकल होता है), और क्या यह रिवर्स लेआउट है (डिफ़ॉल्ट false होता है).

val manager = GridLayoutManager(activity, 3)

6. उस लाइन के नीचे, RecyclerView को इस GridLayoutManager का इस्तेमाल करने के लिए कहें. RecyclerView, बाइंडिंग ऑब्जेक्ट में मौजूद है और इसे sleepList कहा जाता है. (fragment_sleep_tracker.xml देखें.)

binding.sleepList.layoutManager = manager

दूसरा चरण: लेआउट बदलना

list_item_sleep_night.xml में मौजूद मौजूदा लेआउट में, हर रात के लिए पूरी लाइन का इस्तेमाल करके डेटा दिखाया जाता है. इस चरण में, ग्रिड के लिए ज़्यादा कॉम्पैक्ट स्क्वेयर आइटम लेआउट तय किया जाता है.

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

1. list_item_sleep_night.xml खोलें.
2. sleep_length TextView को मिटाएं, क्योंकि नए डिज़ाइन में इसकी ज़रूरत नहीं है.
3. quality_string TextView को इस तरह से ले जाएं कि वह ImageView के नीचे दिखे. इसके लिए, आपको कई चीज़ें अपडेट करनी होंगी. quality_string TextView के लिए फ़ाइनल लेआउट यहां दिया गया है:

<TextView
   android:id="@+id/quality_string"
   android:layout_width="0dp"
   android:layout_height="20dp"
   android:textAlignment="center"
   app:layout_constraintBottom_toBottomOf="parent"
   app:layout_constraintEnd_toEndOf="@+id/quality_image"
   app:layout_constraintHorizontal_bias="0.0"
   app:layout_constraintStart_toStartOf="@+id/quality_image"
   app:layout_constraintTop_toBottomOf="@+id/quality_image"
   tools:text="Excellent!!!"
   app:sleepQualityString="@{sleep}" />

4. डिज़ाइन व्यू में जाकर पुष्टि करें कि quality_string TextView, ImageView के नीचे मौजूद है.

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

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

6. SleepTrackerFragment में, GridLayoutManager बनाने वाले कोड में, GridLayoutManger के लिए स्पैन की संख्या को 1 पर सेट करें. ऐप्लिकेशन चलाएं और आपको एक सूची मिलेगी.
   

val manager = GridLayoutManager(activity, 1)

7. GridLayoutManager के लिए स्पैन की संख्या को 10 पर बदलें और ऐप्लिकेशन चलाएं. ध्यान दें कि GridLayoutManager में एक लाइन में 10 आइटम फ़िट हो जाएंगे, लेकिन अब आइटम कट गए हैं.
8. स्पैन की संख्या को 5 और दिशा को GridLayoutManager.VERTICAL में बदलें. ऐप्लिकेशन चलाएं और देखें कि हॉरिज़ॉन्टल तरीके से कैसे स्क्रोल किया जा सकता है. इसे बेहतर बनाने के लिए, आपको किसी दूसरे लेआउट की ज़रूरत होगी.

val manager = GridLayoutManager(activity, 5, GridLayoutManager.HORIZONTAL, false)

9. स्पैन की गिनती को वापस 3 पर सेट करना और ओरिएंटेशन को वर्टिकल पर सेट करना न भूलें!

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

• लेआउट मैनेजर यह तय करते हैं कि RecyclerView में आइटम किस तरह से व्यवस्थित किए जाएं.
• RecyclerView में, सामान्य इस्तेमाल के उदाहरणों के लिए, पहले से मौजूद लेआउट मैनेजर होते हैं. जैसे, हॉरिज़ॉन्टल और वर्टिकल सूचियों के लिए LinearLayout और ग्रिड के लिए GridLayout.
• ज़्यादा मुश्किल इस्तेमाल के उदाहरणों के लिए, कस्टम LayoutManager लागू करें.
• डिज़ाइन के हिसाब से, GridLayout का इस्तेमाल उन आइटम की सूचियों के लिए सबसे सही होता है जिन्हें आइकॉन या इमेज के तौर पर दिखाया जा सकता है.
• GridLayout, आइटम को पंक्तियों और कॉलम के ग्रिड में व्यवस्थित करता है. वर्टिकल स्क्रोलिंग के हिसाब से, लाइन में मौजूद हर आइटम को "स्पैन" कहा जाता है.
• आपके पास यह तय करने का विकल्प होता है कि कोई आइटम कितने स्पैन लेगा. इससे, कस्टम लेआउट मैनेजर की ज़रूरत के बिना ज़्यादा दिलचस्प ग्रिड बनाए जा सकते हैं.
• ग्रिड में मौजूद किसी एक आइटम के लिए आइटम लेआउट बनाएं. इसके बाद, लेआउट मैनेजर आइटम को व्यवस्थित करने का काम करता है.
• RecyclerView के लिए LayoutManager को, <RecyclerView> एलिमेंट वाली एक्सएमएल लेआउट फ़ाइल में या प्रोग्राम के हिसाब से सेट किया जा सकता है.

Udacity के कोर्स:

• Kotlin की मदद से Android ऐप्लिकेशन डेवलप करना
• प्रोग्रामर के लिए Kotlin Bootcamp

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

• RecyclerView की मदद से सूची बनाना
• RecyclerView
• LayoutManager
• GridLayoutManager

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

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

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

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

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

पहला सवाल

Android इनमें से कौनसे लेआउट मैनेजर उपलब्ध कराता है? लागू होने वाले सभी विकल्पों को चुनें.

▢ LinearLayouManager

▢ GridLayoutManager

▢ CircularLayoutManager

▢ StaggeredGridLayoutManager

दूसरा सवाल

"स्पैन" क्या होता है?

▢ GridLayoutManager से बनाई गई ग्रिड का साइज़.

▢ ग्रिड में मौजूद कॉलम की चौड़ाई.

▢ ग्रिड में मौजूद किसी आइटम के डाइमेंशन.

▢ वर्टिकल ओरिएंटेशन वाले ग्रिड में कॉलम की संख्या.

अगला लेसन शुरू करें: 7.4: RecyclerView आइटम के साथ इंटरैक्ट करना

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

इस सीरीज़ में ये कोडलैब शामिल हैं:

• 7.1 RecyclerView की बुनियादी बातें
• 7.2 RecyclerView के साथ DiffUtil और डेटा बाइंडिंग
• 7.3 RecyclerView के साथ GridLayout
• 7.4 RecyclerView आइटम के साथ इंटरैक्ट करना
• 7.5 RecyclerView में हेडर