ग्रिड के साथ यूज़र इंटरफ़ेस (यूआई) एलिमेंट ओवरले

Jetpack Compose का Grid एपीआई, दो डाइमेंशन वाले स्क्रीन लेआउट के लिए बनाया गया है. लेज़ी ग्रिड को बड़े डेटा सेट के लिए ऑप्टिमाइज़ किया जाता है. वहीं, Grid की मदद से, ट्रैक (पंक्तियों और कॉलम), गैप, और ग्रिड एरिया का इस्तेमाल करके, फ़िक्स या अडैप्टिव लेआउट स्ट्रक्चर तय किया जा सकता है. Modifier.gridItem का इस्तेमाल करके, आइटम को इस स्ट्रक्चर में रखा जाता है. इससे, ग्रिड कंटेनर में आइटम की पोज़िशनिंग और स्पैनिंग को कंट्रोल किया जा सकता है.

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

सबसे सही तरीके

• डिक्लेरेशन ऑर्डर: Grid में, Grid ब्लॉक में डिक्लेरेशन के क्रम के आधार पर, zIndex ऑर्डरिंग के स्टैंडर्ड तरीके का इस्तेमाल किया जाता है. Grid कॉन्टेंट ब्लॉक में बाद में डिक्लेयर किए गए आइटम, पहले डिक्लेयर किए गए आइटम के ऊपर रेंडर होते हैं.
• ज़ेड-इंडेक्स को साफ़ तौर पर कंट्रोल करना: अगर आपको ओवरलैप होने वाले एलिमेंट के डिफ़ॉल्ट ड्रॉइंग ऑर्डर को साफ़ तौर पर कंट्रोल या बदलना है, तो Modifier.zIndex का इस्तेमाल करें.
• नाम वाले एरिया बनाम आइटम ओवरले: अपने लेआउट का स्ट्रक्चर तय करने के लिए, Grid और नाम वाले एरिया का इस्तेमाल करें. हालांकि, अगर ओवरले लॉजिकली उस ग्रिड सेल से जुड़े हैं, तो मुश्किल ओवरले लॉजिक को खास gridItem में रखें.
• ओवरले के लिए इंटेंशनल स्पैन: ओवरले करते समय, पक्का करें कि ओवरलैप होने वाले एलिमेंट के लिए rowSpan और columnSpan पैरामीटर इंटेंशनल हों. इससे, यह कंट्रोल किया जा सकता है कि नीचे मौजूद कॉन्टेंट का कितना हिस्सा छिपाया जाए.

सामग्री

• Grid: दो डाइमेंशन वाला लेआउट कंटेनर
• GridConfigurationScope.area: स्कोप फ़ंक्शन, जिसका इस्तेमाल ग्रिड ट्रैक में नाम वाले रीजन और ओवरले एरिया तय करने के लिए किया जाता है
• Modifier.gridItem: मॉडिफ़ायर, जिसका इस्तेमाल कंपोज़ेबल को ग्रिड ट्रैक या नाम वाले ग्रिड एरिया में रखने और स्पैन करने के लिए किया जाता है
• Modifier.zIndex: मॉडिफ़ायर, जिसका इस्तेमाल ड्रॉइंग और लेयर एलिवेशन ऑर्डर को साफ़ तौर पर कंट्रोल करने के लिए किया जाता है

चरण

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

1. ग्रिड कॉन्फ़िगरेशन तय करना

ओवरले रीजन तय करने के लिए, सेल में स्पैन होने वाले नाम वाले एरिया के साथ-साथ, पंक्ति और कॉलम ट्रैक तय करके, Grid कंपोज़ेबल कॉन्फ़िगरेशन बनाएं:

enum class Areas { BASE, OVERLAY }

val gridConfig: GridConfigurationScope.() -> Unit = {
    repeat(3) {
        column(GridTrackSize.Fixed(100.dp))
    }
    row(GridTrackSize.Fixed(100.dp))

    area(areaId = Areas.BASE, row = 1, column = 1, columnSpan = 2)
    // Define a named area spanning multiple columns that overlaps other cells
    area(areaId = Areas.OVERLAY, row = 1, column = 2, columnSpan = 2)
}
GridByExamples.kt

2. बेस कॉन्टेंट रखना और ओवरले डिक्लेयर करना

Modifier.gridItem का इस्तेमाल करके, अपने बेस कंपोज़ेबल को ग्रिड सेल में रखें. Grid में, कंपोज़िशन ऑर्डर के आधार पर, zIndex ऑर्डरिंग के स्टैंडर्ड तरीके का इस्तेमाल किया जाता है. इसलिए, Grid ब्लॉक में बाद में डिक्लेयर किए गए आइटम, पहले डिक्लेयर किए गए आइटम के ऊपर रेंडर होते हैं. एक ही सेल या ओवरलैप होने वाले एरिया में ओवरले रखते समय, बेस एलिमेंट के बाद ओवरले कंपोज़ेबल डिक्लेयर करें या नाम वाले एरिया का रेफ़रंस दें. अगर आपको इस डिफ़ॉल्ट ड्रॉइंग ऑर्डर को साफ़ तौर पर कंट्रोल या बदलना है, तो Modifier.zIndex का इस्तेमाल करें.

Grid(
    config = gridConfig,
) {
    // Base Layer
    TextCard("BASE", Modifier.gridItem(areaId = Areas.BASE))
    // Overlay Layer
    TextCard(
        "OVERLAY",
        Modifier.gridItem(areaId = Areas.OVERLAY),
        color = Color(0xDD4B608D)
    )
}
GridByExamples.kt

नतीजे

आपके यूज़र इंटरफ़ेस (यूआई) एलिमेंट, 2D ग्रिड स्ट्रक्चर में अनुमान के मुताबिक ओवरले होते हैं. डिक्लेरेशन ऑर्डरिंग के स्टैंडर्ड तरीके का इस्तेमाल करके, नेस्ट किए गए मुश्किल कंटेनर से बचा जा सकता है. साथ ही, साफ़ और अडैप्टिव लेआउट कोड बनाए रखा जा सकता है.