कंटेनर प्रॉपर्टी सेट करना

ग्रिड कंटेनर कॉन्फ़िगरेशन को तय करके, ऐसे लेआउट बनाए जा सकते हैं जो अलग-अलग स्क्रीन साइज़ और कॉन्टेंट टाइप के हिसाब से अडजस्ट हो सकें. इस पेज पर, इन कामों को करने का तरीका बताया गया है:

ग्रिड तय करना

ग्रिड में कॉलम और लाइनें होती हैं. Grid कंपोज़ेबल में config पैरामीटर होता है. यह GridConfigurationScope में कॉलम और पंक्तियों को तय करने के लिए, लैम्डा को स्वीकार करता है. इस उदाहरण में, तीन पंक्तियों और दो कॉलम वाली ग्रिड को तय किया गया है. हर पंक्ति और कॉलम का साइज़, Dp में तय किया गया है:

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
    }
) {
}

आइटम को ग्रिड में रखना

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

यहां दिए गए उदाहरण में, ग्रिड में छह ग्रिड सेल हैं और हर सेल में एक कार्ड है (इमेज 1). हर ग्रिड सेल 160dp x 90dp की है, जिससे ग्रिड का कुल साइज़ 320dp x 270dp हो जाता है.

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}

छह कार्ड, तीन पंक्तियों और दो कॉलम वाले ग्रिड में रखे गए हैं.
पहली इमेज. छह कार्ड, तीन पंक्तियों और दो कॉलम वाले ग्रिड में रखे गए हैं.

इस डिफ़ॉल्ट व्यवहार को कॉलम के हिसाब से भरने के लिए, flow प्रॉपर्टी को GridFlow.Column पर सेट करें.

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp)
        flow = GridFlow.Column // Grid tries to place items to fill the column
    },
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}

फ़्लो फ़ंक्शन, आइटम को रखने की दिशा बदलता है.
दूसरी इमेज. GridFlow.Row (बाईं ओर) और GridFlow.Column (दाईं ओर).

ट्रैक का साइज़ मैनेज करना

पंक्तियों और कॉलम को एक साथ ग्रिड ट्रैक कहा जाता है. इनमें से किसी एक तरीके का इस्तेमाल करके, ग्रिड ट्रैक का साइज़ तय किया जा सकता है:

  • तय किया गया (Dp): इससे कोई खास साइज़ तय किया जाता है (उदाहरण के लिए, column(180.dp)).
  • प्रतिशत (Float): यह उपलब्ध कुल स्पेस का कुछ प्रतिशत तय करता है.यह 0.0f से 1.0f के बीच हो सकता है. उदाहरण के लिए, 50% के लिए row(0.5f).
  • फ़्लेक्सिबल (Fr): तय और प्रतिशत ट्रैक का हिसाब लगाने के बाद, बचे हुए स्पेस को अनुपात के हिसाब से बांटता है. उदाहरण के लिए, अगर दो पंक्तियों को 1.fr और 3.fr पर सेट किया जाता है, तो बाद वाली पंक्ति को बची हुई ऊंचाई का 75% हिस्सा मिलता है.
  • इंट्रिन्सिक: ट्रैक का साइज़, उसमें मौजूद कॉन्टेंट के हिसाब से तय होता है. ज़्यादा जानकारी के लिए, ग्रिड ट्रैक का साइज़ अपने-आप तय करना लेख पढ़ें.

इस उदाहरण में, पंक्ति की ऊंचाई तय करने के लिए, ट्रैक के साइज़ के अलग-अलग विकल्पों का इस्तेमाल किया गया है:

Grid(
    config = {
        column(1f)

        row(100.dp)
        row(0.2f)
        row(1.fr)
        row(GridTrackSize.Auto)
    },
    modifier = Modifier.height(480.dp)
) {
    PastelRedCard("Fixed(100.dp)")
        PastelGreenCard("Percentage(0.2f)")
    PastelBlueCard("Flex(1.fr)")
        PastelYellowCard("Auto")

}

ट्रैक के साइज़ के चार मुख्य विकल्पों का इस्तेमाल करके, पंक्ति की ऊंचाई तय की जाती है.
तीसरी इमेज. Grid में, ट्रैक के साइज़ के चार मुख्य विकल्पों का इस्तेमाल करके, पंक्तियों की ऊंचाई तय की गई है.

फ़्लेक्सिबल ग्रिड ट्रैक के लिए कम से कम साइज़ सेट करना

जब ग्रिड कंटेनर में कोई जगह नहीं बचती, तो स्टैंडर्ड फ़्लेक्सिबल ट्रैक 0.dp तक छोटा हो सकता है. ऐसा होने से रोकने और यह पक्का करने के लिए कि कॉन्टेंट क्रश न हो, GridTrackSize.MinMax का इस्तेमाल करें. इससे ट्रैक को फ़्लेक्सिबल रखते हुए, कम से कम साइज़ को लागू किया जा सकता है.

यहां दिए गए उदाहरण में, पहली लाइन के लिए कम से कम 100.dp तय किया गया है:

Grid(
    config = {
        column(1f)
        // The first row has a minimum height of 100.dp and can expand to 
        // the half of the remaining space.
        row(GridTrackSize.MinMax(100.dp, 1.fr))
        // The second row takes the half of the remaining space.
        row(1.fr)
        // The third row has a fixed height of 200.dp.
        row(200.dp)
    },
    modifier = Modifier.size(360.dp) // Total grid height is 360.dp
) {
    PastelRedCard("MinMax(100.dp, 1.fr)")
        PastelGreenCard("Flex(1.fr)")
    PastelBlueCard("Fixed(200.dp)")
}

ट्रैक के साइज़ के चार मुख्य विकल्पों का इस्तेमाल करके, पंक्ति की ऊंचाई तय की जाती है.
चौथी इमेज. पहली पंक्ति की ऊंचाई कम से कम 100.dp है.

लेज़ी लिस्ट को रखने के लिए, ग्रिड ट्रैक का कम से कम साइज़ सेट करना

स्टैंडर्ड फ़्लेक्सिबल ट्रैक, अपने चाइल्ड एलिमेंट के साइज़ के बारे में अपने-आप क्वेरी करते हैं, ताकि बेस साइज़ तय किया जा सके. हालांकि, Jetpack Compose में SubcomposeLayout के इंट्रिन्सिक साइज़ के बारे में क्वेरी नहीं की जा सकती. यह कॉम्पोनेंट को बैकअप देता है, जैसे कि LazyColumn और LazyRow.

किसी स्टैंडर्ड फ़्लेक्सिबल ट्रैक में लेज़ी लिस्ट डालने पर, IllegalStateException क्रैश हो जाता है. फ़्लेक्सिबल ग्रिड ट्रैक में लेज़ी लिस्ट को सुरक्षित तरीके से रखने के लिए, MinMax का इस्तेमाल करें. साथ ही, कम से कम साइज़ (जैसे, 0.dp) तय करें, ताकि इंट्रिन्सिक मेज़रमेंट पास को बायपास किया जा सके.

Grid(
    config = {
        column(1f)
        // The first row's height is determined by the height of the Text composable.
        row(GridTrackSize.Auto)
        // The second row occupies the remaining space, allowing the LazyColumn to scroll.
        row(GridTrackSize.MinMax(0.dp, 1.fr))

        gap(8.dp)
    },
    modifier = Modifier.size(width = 170.dp, height = 240.dp)
) {
    Text("LazyColumn in a Grid")
    // The LazyColumn is placed in the second row, filling the remaining space.
    LazyColumn(verticalArrangement = Arrangement.spacedBy(4.dp)) {
        items(100) { number ->
            PastelGreenCard("Card $number")
        }
    }
}

ट्रैक के साइज़ के चार मुख्य विकल्पों का इस्तेमाल करके, पंक्ति की ऊंचाई तय की जाती है.
पांचवीं इमेज. ग्रिड सेल में LazyColumn.

ग्रिड ट्रैक का साइज़ अपने-आप तय करना

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

  • GridTrackSize.MaxContent: कॉन्टेंट के लिए, ज़्यादा से ज़्यादा इंट्रिन्सिक साइज़ का इस्तेमाल करें.उदाहरण के लिए, टेक्स्ट ब्लॉक में टेक्स्ट की पूरी लंबाई के हिसाब से चौड़ाई तय की जाती है. इसमें टेक्स्ट को रैप नहीं किया जाता.
  • GridTrackSize.MinContent: कॉन्टेंट के लिए, कम से कम इंट्रिन्सिक साइज़ का इस्तेमाल करें. उदाहरण के लिए, टेक्स्ट ब्लॉक में मौजूद सबसे लंबे शब्द से चौड़ाई तय होती है.
  • GridTrackSize.Auto: ट्रैक के लिए, ज़रूरत के हिसाब से बदलने वाले साइज़ का इस्तेमाल करें. इससे ट्रैक, उपलब्ध जगह के हिसाब से खुद को अडजस्ट कर लेता है. डिफ़ॉल्ट रूप से, यह MaxContent की तरह काम करता है. हालांकि, यह अपने कॉन्टेंट को छोटा और रैप करता है, ताकि वह पैरंट कंटेनर में फ़िट हो सके.

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

Grid(
    config = {
        column(GridTrackSize.MinContent)
        column(GridTrackSize.MaxContent)
        row(1.0f)
    },
    modifier = Modifier.width(480.dp)
) {
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet.")
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet.")
}

कॉलम में तय किए गए इंट्रिन्सिक साइज़.
पांचवीं इमेज. कॉलम में तय किए गए इंट्रिन्सिक साइज़.

पंक्तियों और कॉलम के बीच गैप सेट करना

ग्रिड ट्रैक का साइज़ तय करने के बाद, ट्रैक के बीच की दूरी को बेहतर बनाने के लिए, ग्रिड गैप में बदलाव किया जा सकता है. columnGap फ़ंक्शन की मदद से, कॉलम के बीच का गैप तय किया जा सकता है. साथ ही, rowGap की मदद से, लाइन के बीच का गैप तय किया जा सकता है. इस उदाहरण में, हर पंक्ति के बीच 16dp का गैप है. साथ ही, हर कॉलम के बीच 8dp का गैप है (इमेज 5).

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(16.dp)
        columnGap(8.dp)
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}

पंक्तियों और कॉलम के बीच गैप.
इमेज 6. पंक्तियों और कॉलम के बीच गैप.

एक ही कॉलम और पंक्ति के साइज़ के गैप तय करने के लिए, gap फ़ंक्शन का इस्तेमाल किया जा सकता है. साथ ही, एक ही फ़ंक्शन का इस्तेमाल करके, कॉलम और गैप के साइज़ अलग-अलग तय किए जा सकते हैं. नीचे दिया गया कोड, ग्रिड में 8dp गैप जोड़ता है:

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp) // Equivalent to columnGap(8.dp) and rowGap(8.dp)
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}

नाम वाली रेंज की मदद से ग्रिड एरिया तय करना

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

नाम वाले एरिया का इस्तेमाल करने से, कोड को पढ़ने में दो मुख्य फ़ायदे मिलते हैं:

  • ग्रिड लेआउट तय करते समय, कॉन्टेंट का मकसद और प्लेसमेंट साफ़ तौर पर पता होना चाहिए.
  • कॉन्टेंट को जोड़ने के दौरान, उसे जोड़ने का मकसद साफ़ तौर पर बताया गया हो.

जटिल लेआउट को साफ़ तौर पर व्यवस्थित करने के लिए, सिमैंटिक ग्रिड एरिया तय करके, फ़िज़िकल ग्रिड स्ट्रक्चर को चाइल्ड प्लेसमेंट से अलग किया जा सकता है.

config lambda में, GridConfigurationScope में area फ़ंक्शन का इस्तेमाल करें, ताकि ग्रिड में नाम वाले एरिया रजिस्टर किए जा सकें. इसके बाद, चाइल्ड कंपोज़ेबल को इन एरिया में असाइन किया जा सकता है. इसके लिए, gridItem मॉडिफ़ायर का इस्तेमाल करें. साथ ही, एरिया के आइडेंटिफ़ायर का इस्तेमाल करें. area फ़ंक्शन, किसी सिमैंटिक आइडेंटिफ़ायर (जैसे, enum क्लास वैल्यू या स्ट्रिंग कुंजी) को फ़िज़िकल ग्रिड कोऑर्डिनेट के सेट पर मैप करता है. ग्रिड लाइन और इंडेक्स 1 से शुरू होते हैं (यानी, पहली लाइन 1 है और पहला कॉलम 1 है).

उदाहरण के लिए, आपने एक ग्रिड तय किया है जिसमें चार एरिया आईडी हैं:

/**
 * An enum representing the IDs for named areas within the grid.
 */
enum class GridAreaNames {
    Area1,
    Area2,
    Area3,
    Area4
}

areaId पैरामीटर का इस्तेमाल करके, इलाके का नाम दें. साथ ही, इलाके के सेल कोऑर्डिनेट और स्पैन की जानकारी दें. gridItem मॉडिफ़ायर, areaId को कुंजी के तौर पर इस्तेमाल करता है, ताकि हर चाइल्ड आइटम को उसके तय किए गए ग्रिड एरिया में असाइन किया जा सके. इसे इस उदाहरण में दिखाया गया है:

Grid(
    config = {
        // Define a single column that takes all available width.
        repeat(2) { column(0.5f) }

        // Define four rows, each taking 25% of the total height.
        repeat(4) { row(0.25f) }

        // Define named grid areas by associating an areaId with specific row and column indices.
        // Row and column indices are 1-based.
        area(areaId = GridAreaNames.Area1, row = 1, column = 1, columnSpan = 2)
        area(areaId = GridAreaNames.Area2, row = 2, column = 1, rowSpan = 3)
        area(areaId = GridAreaNames.Area3, rows = 2..3, columns = 2..2)
        area(areaId = GridAreaNames.Area4, row = 4, column = 2)

        gap(4.dp)
    },
    modifier = Modifier.size(360.dp)
) {
    PastelRedCard(
        "Area 1",
        // Use Modifier.gridItem(areaId) to place this composable into the
        // grid area defined with the matching ID in the config block.
        modifier = Modifier.gridItem(areaId = GridAreaNames.Area1)
    )
    PastelGreenCard(
        "Area 2",
        modifier = Modifier.gridItem(areaId = GridAreaNames.Area2)
    )
    PastelBlueCard(
        "Area 3",
        modifier = Modifier.gridItem(areaId = GridAreaNames.Area3)
    )
    PastelYellowCard(
        "Area 4",
        modifier = Modifier.gridItem(areaId = GridAreaNames.Area4)
    )
}

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

पीछे जाएं
शुरू करना
आगे बढ़ें
आइटम प्रॉपर्टी सेट करना