Android Kotlin से जुड़े बेसिक 07.3: RecyclerView के साथ GridLayout

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

परिचय

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ग्रिड लेआउट

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

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

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

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

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

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

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

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

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

हटाया जाने वाला कोड:

app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager
  1. SleepTrackerFragment.kt खोलें.
  2. OnCreateView() में, return स्टेटमेंट से ठीक पहले, तीन स्पैन के साथ एक नया वर्टिकल, सबसे ऊपर से नीचे GridLayoutManager बनाएं.

    GridLayoutManager कंस्ट्रक्टर चार आर्ग्युमेंट का इस्तेमाल करता है: एक संदर्भ, जो activity है, संख्या (स्पैन, डिफ़ॉल्ट वर्टिकल लेआउट में), एक ओरिएंटेशन (डिफ़ॉल्ट वर्टिकल है) और क्या इसका रिवर्स लेआउट (डिफ़ॉल्ट रूप से false है). 
val manager = GridLayoutManager(activity, 3)
  1. लाइन के नीचे, RecyclerView को इस GridLayoutManager का इस्तेमाल करने के लिए कहें. RecyclerView बाइंडिंग ऑब्जेक्ट में है और उसे sleepList कहा जाता है. (fragment_sleep_tracker.xml देखें.)
binding.sleepList.layoutManager = manager

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

list_item_sleep_night.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}" />
  1. डिज़ाइन व्यू में पुष्टि करें कि quality_string TextView, ImageView के नीचे रखा गया है.

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

  1. ऐप्लिकेशन चलाएं और देखें कि ग्रिड में नींद का डेटा कैसे दिखता है.

    ध्यान दें कि ConstraintLayout अब भी पूरी चौड़ाई लेता है. GridLayoutManager, स्पैन के आधार पर आपके व्यू को तय चौड़ाई देता है. GridLayoutManager ग्रिड को लेआउट करते समय, खाली सफ़ेद जगह या क्लिपिंग आइटम जोड़ते समय, सभी कंस्ट्रेंट को पूरा करने की पूरी कोशिश करता है.
  1. SleepTrackerFragment में, GridLayoutManager बनाने वाले कोड में, GridLayoutManger के स्पैन की संख्या बदलकर 1 करें. ऐप्लिकेशन चलाने पर आपको एक सूची दिखेगी.
val manager = GridLayoutManager(activity, 1)
  1. GridLayoutManager के लिए स्पैन की संख्या 10 बदलें और ऐप्लिकेशन चलाएं. ध्यान दें कि GridLayoutManager लगातार एक साथ 10 आइटम में फ़िट हो जाएगा, लेकिन अब आइटम क्लिप किए गए हैं.
  2. स्पैन संख्या को 5 और निर्देश को GridLayoutManager.VERTICAL में बदलें. ऐप्लिकेशन चलाएं और देखें कि आप हॉरिज़ॉन्टल रूप से कैसे स्क्रोल कर सकते हैं. इसे अलग दिखाने के लिए, आपको किसी अलग लेआउट की ज़रूरत होगी.
val manager = GridLayoutManager(activity, 5, GridLayoutManager.HORIZONTAL, false)
  1. स्पैन संख्या को 3 पर और वर्टिकल को ओरिएंटेशन पर सेट करना न भूलें!

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

Udcity कोर्स:

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

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

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

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

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

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

पहला सवाल

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

▢ LinearLayouManager

▢ GridLayoutManager

▢ CircularLayoutManager

▢ StaggeredGridLayoutManager

दूसरा सवाल

&कोटेशन क्या है?

▢ GridLayoutManager ने ग्रिड का आकार बनाया है.

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

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

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

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