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