ग्रिड

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

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

Grid, इसी तरह के कंपोज़ेबल से कैसे अलग है?

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

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

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

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

शब्दावली

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

ग्रिड लाइन

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

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

ग्रिड ट्रैक

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

पहली लाइन के लिए ग्रिड ट्रैक.
इमेज 3. पहली लाइन के लिए ग्रिड ट्रैक.

ग्रिड सेल

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

ग्रिड सेल, दूसरी लाइन और दूसरे कॉलम का इंटरसेक्शन है.
इमेज 4. एक ग्रिड सेल, जो दूसरी लाइन और दूसरे कॉलम का इंटरसेक्शन है.

ग्रिड एरिया

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

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

ग्रिड गैप

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

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