ग्रिड

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

ग्रिड की मदद से, ज़रूरत के हिसाब से अडजस्ट होने वाला और अडैप्टिव टू-डाइमेंशन लेआउट
पहली इमेज. Grid के साथ दो-डाइमेंशन वाला लेआउट, जो ज़रूरत के हिसाब से अडजस्ट हो सकता है.

ग्रिड, मिलते-जुलते कंपोज़ेबल से कैसे अलग है?

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

कई Row और Column कंपोज़ेबल को जोड़कर, टू-डाइमेंशन लेआउट भी लागू किया जा सकता है. हालांकि, इस तरीके में कुछ कमियां हैं. जैसे, इसमें कई लेवल होते हैं और इसे आसानी से लागू नहीं किया जा सकता.

यहां दी गई टेबल में, हर एपीआई के लिए सही लेआउट की खास जानकारी दी गई है:

कॉम्पोनेंट मकसद
LazyVerticalGrid, LazyStaggeredGrid, LazyHorizontalGrid एक जैसे बड़े डेटा सेट को विज़ुअलाइज़ करना, जिनके लिए लेज़ी लोडिंग की ज़रूरत होती है.
Row, Column, FlexBox वन-डाइमेंशनल लेआउट
Grid टू-डाइमेंशनल लेआउट

शब्दावली

Grid के काम करने का तरीका समझने के लिए, यहां दी गई शब्दावली को जानें.

ग्रिड लाइन

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

ग्रिड में चार हॉरिज़ॉन्टल और तीन वर्टिकल लाइनें होती हैं.
दूसरी इमेज. ग्रिड में चार हॉरिज़ॉन्टल और तीन वर्टिकल लाइनें होती हैं.

ग्रिड ट्रैक

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

पहली पंक्ति के लिए ग्रिड ट्रैक.
तीसरी इमेज. पहली पंक्ति के लिए ग्रिड ट्रैक.

ग्रिड सेल

ग्रिड सेल, पंक्ति और कॉलम ट्रैक का इंटरसेक्शन होती है.

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

ग्रिड एरिया

ग्रिड एरिया में कई ग्रिड सेल होती हैं. किसी आइटम को कई ट्रैक में फैलाकर, ग्रिड एरिया तय किया जा सकता है.

एक ग्रिड एरिया, जिसमें चार ग्रिड सेल हैं.
पांचवीं इमेज. एक ग्रिड एरिया, जिसमें चार ग्रिड सेल हैं.

ग्रिड गैप

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

पहले कॉलम और दूसरे कॉलम के बीच ग्रिड गैप.
इमेज 6. पहले कॉलम और दूसरे कॉलम के बीच ग्रिड गैप.