ग्रिड और मीडिया क्वेरी के साथ टेबलटॉप पोस्चर लेआउट

फ़ोल्ड किए जा सकने वाले डिवाइसों को टेबलटॉप मोड में रखने पर, एक स्क्रीन दो हिस्सों में बंट जाती है. ये दोनों हिस्से, फ़ोल्ड किए गए हिस्से (या हिंज) से अलग होते हैं. टेबलटॉप मोड में, ऐप्लिकेशन के मुख्य कॉन्टेंट (जैसे, वीडियो प्लेयर या गेम कैनवस) को स्क्रीन के ऊपरी हिस्से पर रखा जा सकता है. वहीं, इंटरैक्टिव एलिमेंट (जैसे, मीडिया कंट्रोल या कंट्रोल पैड) को स्क्रीन के निचले हिस्से पर रखा जा सकता है.

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

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

• टेबलटॉप मोड का पता लगाने के लिए, कंपोज़ेबल का इस्तेमाल करें: डिवाइस की स्थिति का पता लगाने के लिए, mediaQuery कंपोज़ेबल का इस्तेमाल करें. जब डिवाइस को टेबलटॉप मोड (windowPosture == Posture.Tabletop) में फ़ोल्ड किया जाता है, तो अपने लेआउट को डाइनैमिक तरीके से बदलें. इसके लिए, आपको गतिविधि को रीस्टार्ट करने या लाइफ़साइकल को मैनेज करने की ज़रूरत नहीं होती.
• Grid की मदद से लेआउट बनाना: टेबलटॉप मोड में, Grid एपीआई (2 rows, 1 column) का इस्तेमाल करें. इससे, मुख्य विज़ुअल कॉन्टेंट को फ़ोल्ड के ऊपर वाली टॉप लाइन में और इंटरैक्टिव कंट्रोल को फ़ोल्ड के नीचे वाली बॉटम लाइन में अलग-अलग रखा जा सकता है.
• ओवरले के लिए, इंप्लिसिट z-इंडेक्सिंग का इस्तेमाल करें: स्टैंडर्ड (नॉन-टेबलटॉप) पोस्चर में, एक ही सेल को कई एरिया आईडी असाइन करें, ताकि प्लेयर पर कंट्रोल ओवरले किए जा सकें. Grid आइटम को, घोषणा के क्रम में पीछे से आगे की ओर अपने-आप रेंडर करता है.
• स्मूथ ट्रांज़िशन उपलब्ध कराएं: स्टैंडर्ड फ़ुल-स्क्रीन लेआउट और टेबलटॉप मोड के बीच ट्रांज़िशन करते समय, यह पक्का करें कि स्थिति और स्क्रोल करने की जगह सुरक्षित रहे.

सामग्री

• Grid: यह एक अडैप्टिव लेआउट कंटेनर है. इसकी मदद से, आइटम को कॉन्फ़िगर की जा सकने वाली लाइनों और कॉलम में रखा जा सकता है. यह अलग-अलग स्क्रीन साइज़ के हिसाब से कॉन्टेंट को बांटने के लिए सबसे सही है.
• mediaQuery: यह Jetpack Compose API है. इसका इस्तेमाल, ऐप्लिकेशन की मौजूदा विंडो की पोज़िशन, साइज़ क्लास, और हार्डवेयर की विशेषताओं के बारे में सीधे तौर पर क्वेरी करने के लिए किया जाता है.

चरण

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

1. टेबलटॉप मोड के लिए ग्रिड कॉन्फ़िगरेशन तय करना

कंपोज़ेबल फ़ंक्शन में, enum का इस्तेमाल करके लेआउट एरिया आईडी तय करें. साथ ही, डिफ़ॉल्ट और टेबलटॉप पोस्चर के लिए GridConfigurationScope ब्लॉक सेट अप करें.

defaultConfig में, दोनों एरिया को एक ही सेल (row = 1, column = 1) असाइन किया गया है. Grid में, इंप्लिसिट z-इंडेक्सिंग का इस्तेमाल किया जाता है. इसमें लेआउट में बाद में डिक्लेयर किए गए कंपोज़ेबल, पहले डिक्लेयर किए गए कंपोज़ेबल के ऊपर रेंडर किए जाते हैं. इससे कंट्रोलर, प्लेयर को बिना किसी अतिरिक्त कंटेनर नेस्टिंग के ओवरले कर सकता है. ज़्यादा जानकारी के लिए, ग्रिड के साथ यूज़र इंटरफ़ेस (यूआई) एलिमेंट ओवरले देखें.

enum class VideoPlayerArea { Player, Controller }

object PlayerGridConfig {
    // Default: Single area layout with overlay (controls on top of player)
    val defaultConfig: GridConfigurationScope.() -> Unit = {
        row(1f)
        column(1f)
        area(areaId = VideoPlayerArea.Player, row = 1, column = 1)
        area(areaId = VideoPlayerArea.Controller, row = 1, column = 1)
    }

    // Tabletop: Two rows splitting content across the fold
    val tabletopConfig: GridConfigurationScope.() -> Unit = {
        row(0.5f)
        row(0.5f)
        column(1f)
        area(areaId = VideoPlayerArea.Player, row = 1, column = 1) // Top half above fold
        area(areaId = VideoPlayerArea.Controller, row = 2, column = 1) // Bottom half below fold
    }
}
GridByExamples.kt

2. टेबलटॉप मोड में डिवाइस की स्थिति का पता लगाना और ग्रिड पर कॉन्फ़िगरेशन लागू करना

windowPosture के आधार पर चालू कॉन्फ़िगरेशन चुनने के लिए mediaQuery का इस्तेमाल करें. config को Grid पर पास करें और कंपोज़ किए जा सकने वाले कॉन्टेंट को एरिया आईडी से बाइंड करें. VideoPlayerArea.Controller से पहले VideoPlayerArea.Player को तय करने से यह पक्का होता है कि जब दोनों defaultConfig में एक सेल शेयर करते हैं, तो कंट्रोल प्लेयर के ऊपर रेंडर होते हैं:

val config = mediaQuery {
    when (windowPosture) {
        Posture.Tabletop -> PlayerGridConfig.tabletopConfig
        else -> PlayerGridConfig.defaultConfig
    }
}

Grid(config = config) {
    Box(
        modifier = Modifier
            .gridItem(areaId = VideoPlayerArea.Player)
    ) {
        // VideoPlayerContent
    }

    Box(
        modifier = Modifier
            .gridItem(areaId = VideoPlayerArea.Controller)
    ) {
        // PlaybackControlsContent
    }
}
GridByExamples.kt

नतीजे

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

अन्य संसाधन

• अडैप्टिव ऐप्लिकेशन का इस्तेमाल शुरू करना
• फ़ोल्ड की जा सकने वाली डिसप्ले स्क्रीन के मोड के साथ काम करना
• ग्रिड के साथ यूज़र इंटरफ़ेस (यूआई) एलिमेंट ओवरले