ग्रिड के साथ चौड़ा क्लासिक कार्ड लेआउट

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

टीवी ऐप्लिकेशन के डिज़ाइन से जुड़े दिशा-निर्देशों में, कार्ड के एक वैरिएंट के बारे में बताया गया है. इसे वाइड क्लासिक कार्ड कहा जाता है. इसमें इमेज और उसके बारे में जानकारी देने वाला कॉन्टेंट ब्लॉक, अगल-बगल दिखता है. टीवी स्क्रीन के लिए जटिल टू-डाइमेंशनल लेआउट बनाते समय, कोऑर्डिनेट के आधार पर पोज़िशनिंग करने के पारंपरिक तरीके का इस्तेमाल करने या Row और Column कंटेनर को डीपली नेस्ट करने से, आपके कोड को पढ़ना, बनाए रखना, और फिर से फ़ैक्टर करना मुश्किल हो सकता है. वाइड क्लासिक कार्ड, Jetpack Compose Grid API के इस्तेमाल का सबसे सही उदाहरण है. इससे आपको सिमैंटिक और उपयोगकर्ता के तय किए गए 2D लेआउट एरिया का इस्तेमाल करके, अगल-बगल मौजूद एलिमेंट को व्यवस्थित करने में मदद मिलती है.

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

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

Grid की मदद से कार्ड लेआउट लागू करें. Grid कंटेनर का इस्तेमाल करने से, कोड को आसानी से पढ़ा जा सकता है. ऐसा इसलिए होता है, क्योंकि यह फ़िज़िकल लेआउट डाइमेंशन को चाइल्ड आइटम प्लेसमेंट से अलग कर देता है. ट्रैक के सटीक इंडेक्स पर भरोसा करने के बजाय, area फ़ंक्शन का इस्तेमाल करके, नाम वाली सिमैंटिक लेयर तय करें. साथ ही, gridItem मॉडिफ़ायर का इस्तेमाल करके, चाइल्ड कंपोज़ेबल रखें. GridTrackSize.Auto और minmax(0.dp, 1.fr) जैसे फ़्लेक्सिबल ट्रैक साइज़िंग को gap(row = 8.dp, column = 16.dp) जैसे ट्रैक के सटीक गैप के साथ जोड़कर, साइड-बाय-साइड कार्ड कॉम्पोनेंट को साफ़ तौर पर और मज़बूती से व्यवस्थित करें.

सामग्री

  • Grid: यह Jetpack Compose में मौजूद 2D कंटेनर लेआउट है. यह कॉन्फ़िगरेशन लैम्डा के आधार पर, चाइल्ड कंपोज़ेबल को लाइनों और कॉलम में व्यवस्थित करता है
  • gridItem: यह एक Modifier एक्सटेंशन है, जो चाइल्ड यूज़र इंटरफ़ेस (यूआई) एलिमेंट को Grid लेआउट में मौजूद किसी खास नाम वाले areaId से जोड़ता है
  • area: यह GridConfigurationScope में मौजूद कॉन्फ़िगरेशन डीएसएल फ़ंक्शन है. यह किसी सिमैंटिक areaId को पंक्ति और कॉलम के स्पैन या रेंज के साथ मैप करता है
  • Card: यह मटीरियल डिज़ाइन का कंटेनर कंपोज़ेबल है. यह एक जैसे यूज़र इंटरफ़ेस (यूआई) एलिमेंट और स्टाइलिंग को ग्रुप करता है
  • GridTrackSize.MinMax: यह ट्रैक साइज़िंग प्रॉपर्टी है. यह पंक्ति या कॉलम के डाइमेंशन के लिए, फ़्लेक्सिबल बाउंड (min और max) तय करती है
  • GridTrackSize.Auto: यह ट्रैक साइज़िंग प्रॉपर्टी है. यह पंक्ति या कॉलम ट्रैक के साइज़ को अपने कॉन्टेंट (column(GridTrackSize.Auto)) के हिसाब से अपने-आप सेट करती है
  • gap: यह कॉन्फ़िगरेशन फ़ंक्शन, ग्रिड ट्रैक के बीच वर्टिकल (row) और हॉरिज़ॉन्टल (column) स्पेस तय करता है

चरण

जगह के आइडेंटिफ़ायर तय करें, ग्रिड ट्रैक और जगहों को कॉन्फ़िगर करें. इसके बाद, चाइल्ड कंपोज़ेबल रखें.

1. सिमैंटिक एरिया आइडेंटिफ़ायर तय करना

सबसे पहले, Wide क्लासिक कार्ड लेआउट में मौजूद क्षेत्रों का टाइप-सेफ़ प्रतिनिधित्व बनाएँ. enum क्लास, स्ट्रिंग टाइपो से बचती है. साथ ही, ट्रैक मैप करते समय और चाइल्ड आइटम रखते समय, कंपाइल-टाइम की सुरक्षा देती है.

enum class CardArea {
    Image,
    Title,
    Subtitle,
    Description,
    ExtraText,
}

2. 2D ग्रिड ट्रैक और नाम वाले क्षेत्रों को कॉन्फ़िगर करना

अपने Grid कंपोज़ेबल के config लैम्डा में, कार्ड स्ट्रक्चर बनाने वाले कॉलम और लाइनें तय करें. इमेज कॉलम के लिए GridTrackSize.Auto का इस्तेमाल करें, ताकि थंबनेल की चौड़ाई को अच्छी तरह से रैप किया जा सके. कॉन्टेंट कॉलम के लिए minmax(0.dp, 1.fr) का इस्तेमाल करें, ताकि यह कार्ड की बाकी चौड़ाई के हिसाब से अपने-आप बड़ा हो जाए. gap(row = 8.dp, column = 16.dp) की मदद से, ट्रैक के बीच की दूरी तय करें. area फ़ंक्शन का इस्तेमाल करके, अपने CardArea पहचानकर्ताओं को उनके फ़िज़िकल ट्रैक के निर्देशांकों से मैप करें.

Grid(
    config = {
        // Define columns: left column for image, right for content
        column(GridTrackSize.Auto)
        column(minmax(0.dp, 1.fr))

        // Define row tracks for the vertical content stack
        row(GridTrackSize.Auto)
        row(GridTrackSize.Auto)
        row(GridTrackSize.Auto)
        row(GridTrackSize.Auto)

        // Map semantic identifiers to grid coordinates and spans
        area(CardArea.Image, row = 1, column = 1, rowSpan = 4)
        area(CardArea.Title, row = 1, column = 2)
        area(CardArea.Subtitle, row = 2, column = 2)
        area(CardArea.Description, row = 3, column = 2)
        area(CardArea.ExtraText, row = 4, column = 2)

        gap(row = 8.dp, column = 16.dp)
    }
) {
    // Child elements placed in Step 3
}

3. gridItem मॉडिफ़ायर का इस्तेमाल करके, चाइल्ड कंपोज़ेबल रखें

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

@Composable
fun WideClassicCard(
    imageContent: @Composable () -> Unit,
    title: String,
    subtitle: String,
    description: String,
    extraText: String,
    modifier: Modifier = Modifier,
) {
    Card(modifier = modifier) {
        Grid(
            config = {
                // Define columns: left column for image, right for content
                column(GridTrackSize.Auto)
                column(minmax(0.dp, 1.fr))

                // Define row tracks for the vertical content stack
                row(GridTrackSize.Auto)
                row(GridTrackSize.Auto)
                row(GridTrackSize.Auto)
                row(GridTrackSize.Auto)

                // Map semantic identifiers to grid coordinates and spans
                area(CardArea.Image, row = 1, column = 1, rowSpan = 4)
                area(CardArea.Title, row = 1, column = 2)
                area(CardArea.Subtitle, row = 2, column = 2)
                area(CardArea.Description, row = 3, column = 2)
                area(CardArea.ExtraText, row = 4, column = 2)

                gap(row = 8.dp, column = 16.dp)
            },
        ) {
            Box(modifier = Modifier.gridItem(CardArea.Image)) {
                imageContent()
            }
            Text(
                text = title,
                style = MaterialTheme.typography.titleLarge,
                modifier = Modifier
                    .gridItem(CardArea.Title)
                    .padding(top = 16.dp, end = 16.dp),
            )

            Text(
                text = subtitle,
                style = MaterialTheme.typography.titleMedium,
                modifier = Modifier
                    .gridItem(CardArea.Subtitle)
                    .padding(end = 16.dp),
            )

            Text(
                text = description,
                style = MaterialTheme.typography.bodyMedium,
                modifier = Modifier
                    .gridItem(CardArea.Description)
                    .padding(end = 16.dp),
            )

            Text(
                text = extraText,
                style = MaterialTheme.typography.labelSmall,
                modifier = Modifier
                    .gridItem(CardArea.ExtraText)
                    .padding(bottom = 16.dp, end = 16.dp),
            )
        }
    }
}

नतीजे

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

अन्य संसाधन