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

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

ग्रिड तय करना

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

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

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

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

इस उदाहरण में, ग्रिड में छह ग्रिड सेल हैं और हर सेल में एक कार्ड रखा गया है (पहली इमेज). हर ग्रिड सेल 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 के इंट्रिंसिक साइज़ के बारे में क्वेरी करने से रोकता है. 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 का अंतर है (पांचवां डायग्राम).

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

पंक्तियों और कॉलम के बीच का अंतर.
छठी इमेज. पंक्तियों और कॉलम के बीच का अंतर.

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

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