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

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 ग्रिड स्ट्रक्चर में अनुमान के मुताबिक ओवरले होते हैं. डिक्लेरेशन के स्टैंडर्ड ऑर्डर का इस्तेमाल करके, नेस्ट किए गए जटिल कंटेनर से बचा जा सकता है. साथ ही, साफ़ और रिस्पॉन्सिव लेआउट कोड को बनाए रखा जा सकता है.

पहली इमेज. Compose ग्रिड में ओवरलैप होने वाले यूज़र इंटरफ़ेस (यूआई) एलिमेंट.