विंडो साइज़ की क्लास का इस्तेमाल करना

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

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

पहली इमेज. चौड़ाई के आधार पर, विंडो के साइज़ की क्लास के बारे में जानकारी.
दूसरी इमेज. ऊंचाई के आधार पर विंडो के साइज़ की क्लास के बारे में जानकारी.

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

साइज़ क्लास ब्रेकपॉइंट डिवाइस का रेप्रज़ेंटेशन
कॉम्पैक्ट चौड़ाई width < 600dp 99.96% फ़ोन पोर्ट्रेट मोड में हैं
मीडियम चौड़ाई 600dp ≤ चौड़ाई < 840dp 93.73% टैबलेट पोर्ट्रेट मोड में,

पोर्ट्रेट मोड में, ज़्यादातर बड़े अनफ़ोल्ड किए गए इनर डिसप्ले
बढ़ाई गई चौड़ाई 840dp ≤ चौड़ाई < 1200dp लैंडस्केप मोड में इस्तेमाल किए जाने वाले 97.22% टैबलेट,

लैंडस्केप मोड में खुले हुए ज़्यादातर बड़े इनर डिसप्ले की चौड़ाई कम से कम इतनी होती है
ज़्यादा चौड़ाई 1200dp ≤ चौड़ाई < 1600dp बड़ी स्क्रीन वाले टैबलेट
ज़्यादा चौड़ाई चौड़ाई ≥ 1600dp डेस्कटॉप डिसप्ले
कॉम्पैक्ट ऊंचाई height < 480dp 99.78% फ़ोन लैंडस्केप मोड में हैं
सामान्य ऊंचाई 480 डीपी ≤ ऊंचाई < 900 डीपी लैंडस्केप मोड में 96.56% टैबलेट,

97.59% फ़ोन पोर्ट्रेट मोड में हैं
बढ़ाई गई ऊंचाई height ≥ 900dp 94.25% टैबलेट पोर्ट्रेट मोड में हैं

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

  • फ़िज़िकल डिवाइसों में, विंडो के साइज़ की किसी खास क्लास की गारंटी नहीं होती. कई वजहों से, आपके ऐप्लिकेशन के लिए उपलब्ध स्क्रीन स्पेस, डिवाइस की स्क्रीन के साइज़ से अलग हो सकता है. मोबाइल डिवाइसों पर, स्प्लिट‑स्क्रीन मोड की मदद से स्क्रीन को दो ऐप्लिकेशन के बीच बांटा जा सकता है. ChromeOS पर, Android ऐप्लिकेशन को डेस्कटॉप टाइप की विंडो में दिखाया जा सकता है. इनका साइज़ अपनी ज़रूरत के हिसाब से बदला जा सकता है. फ़ोल्ड किए जा सकने वाले डिवाइसों में अलग-अलग साइज़ की दो स्क्रीन हो सकती हैं. डिवाइस को फ़ोल्ड या अनफ़ोल्ड करके, इन स्क्रीन को अलग-अलग ऐक्सेस किया जा सकता है.

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

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

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

androidx.compose.material3.adaptive लाइब्रेरी के currentWindowAdaptiveInfo() टॉप-लेवल फ़ंक्शन का इस्तेमाल करके, मौजूदा WindowSizeClass का हिसाब लगाएं. यह फ़ंक्शन, WindowAdaptiveInfo का एक इंस्टेंस दिखाता है. इसमें windowSizeClass शामिल होता है. बड़े और बहुत बड़े ब्रेकपॉइंट के साथ काम करने के लिए, फ़ंक्शन कॉल में supportLargeAndXLargeWidth पैरामीटर जोड़ें और उसे true पर सेट करें. इस उदाहरण में, विंडो साइज़ क्लास का हिसाब लगाने और विंडो साइज़ क्लास में बदलाव होने पर अपडेट पाने का तरीका बताया गया है:

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass

विंडो साइज़ क्लास की मदद से लेआउट मैनेज करना

विंडो साइज़ क्लास की मदद से, ऐप्लिकेशन के लेआउट को बदला जा सकता है. ऐसा तब किया जा सकता है, जब आपके ऐप्लिकेशन के लिए उपलब्ध डिसप्ले स्पेस में बदलाव हो. उदाहरण के लिए, जब किसी डिवाइस को फ़ोल्ड या अनफ़ोल्ड किया जाता है, डिवाइस का ओरिएंटेशन बदलता है या मल्टी-विंडो मोड में ऐप्लिकेशन विंडो का साइज़ बदला जाता है.

डिसप्ले के साइज़ में होने वाले बदलावों को मैनेज करने के लिए, लॉजिक को स्थानीय भाषा में बनाएं. इसके लिए, विंडो साइज़ क्लास को नेस्ट किए गए कंपोज़ेबल में स्टेट के तौर पर पास करें. ठीक वैसे ही जैसे किसी अन्य ऐप्लिकेशन की स्टेट को पास किया जाता है:

@Composable
fun MyApp(
    windowSizeClass: WindowSizeClass = currentWindowAdaptiveInfo(supportLargeAndXLargeWidth = true).windowSizeClass
) {
    // Decide whether to show the top app bar based on window size class.
    val showTopAppBar = windowSizeClass.isHeightAtLeastBreakpoint(WindowSizeClass.HEIGHT_DP_MEDIUM_LOWER_BOUND)

    // MyScreen logic is based on the showTopAppBar boolean flag.
    MyScreen(
        showTopAppBar = showTopAppBar,
        /* ... */
    )
}

विंडो के साइज़ के हिसाब से क्लास की जांच करना

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

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

अगले चरण

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

सभी डिवाइसों और स्क्रीन साइज़ पर किसी ऐप्लिकेशन को बेहतरीन बनाने के बारे में ज़्यादा जानने के लिए, यह लेख पढ़ें: