ग्रिड टेबल लेआउट

चार स्टार रेटिंग वाला आइकॉन

इस रेसिपी में बताया गया है कि Grid एपीआई, कोड को पढ़ने की क्षमता को कैसे बेहतर बनाता है. यह पारंपरिक नेस्ट किए गए स्ट्रक्चर की तुलना में बेहतर है. अपने-आप साइज़ बदलने वाले ट्रैक कॉन्फ़िगर करके, ऐसा ग्रिड बनाया जा सकता है जो आपके टेक्स्ट कंपोज़ेबल के साइज़ के आधार पर, सेल की चौड़ाई और ऊंचाई के हिसाब से डाइनैमिक तौर पर अडजस्ट हो जाता है.

इस रेसिपी में, Grid एपीआई का इस्तेमाल करके टेबल बनाई जाती है.

टेबल 1. FlexBox और Grid एपीआई की सुविधाओं की तुलना
लेआउट लेज़ी लोडिंग सॉफ़्ट रैप डाइनैमिक लेआउट से जुड़ा अपडेट
FlexBox एक दिन नहीं हां हां
Grid 2D नहीं नहीं हां

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

टेबल को आसानी से पढ़ने और मैनेज करने के लिए, Grid कंपोज़ेबल का इस्तेमाल करें. Grid की मदद से, कॉलम के डाइमेंशन और सभी पंक्तियों के अलाइनमेंट को सटीक तरीके से कंट्रोल किया जा सकता है. इसके लिए, चौड़ाई को मैन्युअल तरीके से सिंक करने की ज़रूरत नहीं पड़ती.

सामग्री

  • Grid: यह एक कंपोज़ेबल लेआउट है, जो आइटम को टू-डाइमेंशनल ग्रिड में रखता है. लेआउट कॉन्फ़िगरेशन को config लैम्ब्डा पैरामीटर में तय किया जाता है. वहीं, यूज़र इंटरफ़ेस (यूआई) के कॉन्टेंट आइटम को content लैम्ब्डा पैरामीटर में तय किया जाता है.
  • GridTrackSize.Auto: इससे कॉन्टेंट के साइज़ के आधार पर, ग्रिड कॉन्फ़िगरेशन में ट्रैक का साइज़ अपने-आप तय होता है. उदाहरण के लिए, column(GridTrackSize.Auto) और row(GridTrackSize.Auto).
  • gap(): इससे GridConfigurationScope में पंक्ति और कॉलम के बीच की स्पेसिंग को कॉन्फ़िगर किया जाता है. जैसे, gap(row = 8.dp, column = 16.dp).

चरण

एक ही Grid लेआउट का इस्तेमाल करके, कई कॉलम वाली तुलना टेबल बनाएं. इसमें सभी आइटम के लिए, कॉलम अपने-आप अलाइन हो जाते हैं और ट्रैक का साइज़ अपने-आप सेट हो जाता है.

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

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

  • कॉलम: तुलना किए जा रहे एट्रिब्यूट की संख्या और आइटम के नाम के लिए एक कॉलम.
  • लाइन: जिन आइटम की तुलना की जा रही है उनकी संख्या और एक हेडर लाइन.

इस रेसिपी में, चार एट्रिब्यूट के आधार पर दो कॉम्पोनेंट (FlexBox और Grid) की तुलना की गई है. इसके लिए, आपको पांच कॉलम और तीन पंक्तियों की ज़रूरत होगी.

2. ग्रिड का इस्तेमाल करके, तुलना करने वाली टेबल लागू करना

एक TableInGrid कंपोज़ेबल बनाएं, जो टेबल के आइटम को लेआउट करने के लिए Grid का इस्तेमाल करता हो. ट्रैक के साइज़ तय करने के लिए, config लैम्ब्डा के अंदर column और row फ़ंक्शन को कॉल करें. साथ ही, gap() की मदद से सेल के बीच की स्पेसिंग सेट करें. टेक्स्ट का साइज़ पहले से तय होता है. इसलिए, GridTrackSize.Auto कॉलम और पंक्तियों के साइज़ को अपने-आप अडजस्ट कर देता है, ताकि उनमें मौजूद कॉन्टेंट फ़िट हो सके.

content लैम्डा के अंदर, टेबल के हेडर और डेटा को रखें. Grid, सभी सेल के प्लेसमेंट और अलाइनमेंट को अपने-आप मैनेज करता है:

@Composable
fun TableInGrid(
    modifier: Modifier = Modifier,
) {
    Grid(
        config = {
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            gap(row = 8.dp, column = 16.dp)
        },
        modifier = modifier,
    ) {
        // Table Header
        Text(text = "", fontWeight = FontWeight.Bold)
        Text(text = "Layout", fontWeight = FontWeight.Bold)
        Text(text = "Lazy loading", fontWeight = FontWeight.Bold)
        Text(text = "Soft wrap", fontWeight = FontWeight.Bold)
        Text(text = "Dynamic layout update", fontWeight = FontWeight.Bold)

        // FlexBox Row
        Text(text = "FlexBox", fontWeight = FontWeight.Bold)
        Text(text = "1D")
        Text(text = "No")
        Text(text = "Yes")
        Text(text = "Yes")

        // Grid Row
        Text(text = "Grid", fontWeight = FontWeight.Bold)
        Text(text = "2D")
        Text(text = "No")
        Text(text = "No")
        Text(text = "Yes")
    }
}

नतीजे

अब आपने तुलना करने वाली एक साफ़-सुथरी, दो-डाइमेंशन वाली टेबल बना ली है. इसमें कॉलम अपने-आप अलाइन हो जाते हैं और सेलस्पेसिंग की सुविधा भी मिलती है.

पहली इमेज. Grid का इस्तेमाल करके तुलना करने वाली टेबल.

अन्य संसाधन