विंडो साइज़ क्लास, राय देने वाले व्यूपोर्ट ब्रेकपॉइंट का सेट हैं. इनकी मदद से, रिस्पॉन्सिव/अडैप्टिव लेआउट डिज़ाइन करना, डेवलप करना, और उनकी जांच करना. ब्रेकपॉइंट का संतुलन आपके ऐप्लिकेशन को आसानी से ऑप्टिमाइज़ किया जा सकता है.
विंडो साइज़ क्लास, आपके ऐप्लिकेशन के लिए उपलब्ध डिसप्ले एरिया को इस कैटगरी में बांटती हैं कॉम्पैक्ट, मीडियम या बड़ा किया हुआ. उपलब्ध चौड़ाई और ऊंचाई को अलग-अलग कैटगरी में बांटा गया है इसलिए, किसी भी समय, आपके ऐप्लिकेशन में दो विंडो साइज़ की होती हैं क्लास—एक चौड़ाई के लिए, एक ऊंचाई के लिए. उपलब्ध चौड़ाई आमतौर पर ज़्यादा होती है यह वर्टिकल स्क्रोलिंग की हर जगह उपलब्ध होने की वजह से उपलब्ध ऊंचाई से ज़्यादा अहम है, इसलिए चौड़ाई विंडो साइज़ क्लास, आपके ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) के हिसाब से ज़्यादा काम की है.
जैसा कि आंकड़ों में दिखाया गया है, ब्रेकपॉइंट आपको सोचने पर मजबूर करते हैं लेआउट के बारे में जानकारी. हर साइज़ क्लास ब्रेकपॉइंट डिवाइस से जुड़ी ज़्यादातर समस्याओं के बारे में बताता है. इससे जो आपको ब्रेकपॉइंट-आधारित डिज़ाइन के बारे में बताती हैं. लेआउट.
| साइज़ क्लास | ब्रेकपॉइंट | डिवाइस के बारे में जानकारी |
|---|---|---|
| कम चौड़ाई | चौड़ाई < 600 डीपी | पोर्ट्रेट मोड में दिखने वाले 99.96% फ़ोन |
| मध्यम चौड़ाई | 600 डीपी ≤ चौड़ाई < 840 डीपी | 93.73% टैबलेट पोर्ट्रेट हैं,
पोर्ट्रेट मोड में, सबसे बड़ी अनफ़ोल्डेड डिसप्ले |
| बढ़ाई गई चौड़ाई | चौड़ाई ≥ 840 डीपी | लैंडस्केप मोड में, 97.22% टैबलेट
लैंडस्केप मोड में, सबसे बड़े अनफ़ोल्ड किए गए इनर डिसप्ले |
| छोटी ऊंचाई | ऊंचाई < 480 डीपी | लैंडस्केप मोड में इस्तेमाल होने वाले 99.78% फ़ोन |
| सामान्य ऊंचाई | 480 डीपी ≤ ऊंचाई < 900 डीपी | लैंडस्केप मोड में, 96.56% टैबलेट
पोर्ट्रेट मोड में दिखने वाले 97.59% फ़ोन |
| बढ़ाई गई ऊंचाई | ऊंचाई ≥ 900 डीपी | पोर्ट्रेट मोड में टैबलेट का 94.25% हिस्सा |
साइज़ क्लास को फ़िज़िकल डिवाइसों के तौर पर विज़ुअलाइज़ करना मददगार हो सकता है. हालांकि, विंडो के साइज़ से जुड़ी जानकारी क्लास को डिवाइस की स्क्रीन के साइज़ के हिसाब से साफ़ तौर पर नहीं तय किया जाता. विंडो साइज़ क्लास, isटैबलेट-टाइप लॉजिक के लिए नहीं हैं. इसके बजाय, विंडो साइज़ क्लास, आपके ऐप्लिकेशन में मौजूद विंडो के साइज़ से तय होती हैं भले ही, ऐप्लिकेशन किसी भी तरह के डिवाइस पर चल रहा हो. इसमें दो अहम बातें इसका मतलब है:
फ़िज़िकल डिवाइस, किसी खास विंडो साइज़ क्लास की गारंटी नहीं देते. कॉन्टेंट बनाने आपके ऐप्लिकेशन के लिए उपलब्ध स्क्रीन स्पेस, डिवाइस में कई वजहों से साइन इन कर सकते हैं. मोबाइल डिवाइसों पर, स्प्लिट स्क्रीन मोड से ये काम किए जा सकते हैं दो ऐप्लिकेशन के बीच स्क्रीन का बंटवारा करें. ChromeOS पर, Android ऐप्लिकेशन ये काम कर सकते हैं फ़्री-फ़ॉर्म विंडो में दिखाया जाना चाहिए, जिसका साइज़ बदला जा सकता है. फ़ोल्ड किए जा सकने वाले डिवाइस में, अलग-अलग साइज़ की दो स्क्रीन को एक-एक करके ऐक्सेस किया जा सकता है डिवाइस को फ़ोल्ड या अनफ़ोल्ड करके.
आपके ऐप्लिकेशन में विंडो के साइज़ की क्लास कभी भी बदली जा सकती है. ऐप्लिकेशन चलने के दौरान, डिवाइस की स्क्रीन की दिशा बदल जाती है, एक साथ कई काम किए जा सकते हैं, और डिवाइस को फ़ोल्ड या अनफ़ोल्ड करने से, स्क्रीन के लिए उपलब्ध स्टोरेज में बदलाव हो सकता है. बतौर नतीजा, विंडो के साइज़ की क्लास डाइनैमिक है. साथ ही, आपके ऐप्लिकेशन का यूज़र इंटरफ़ेस (यूआई) ऑप्टिमाइज़ होना चाहिए भुगतान करते हैं.
विंडो के साइज़ की क्लास, छोटे, मीडियम, और बड़े किए गए ब्रेकपॉइंट पर मटीरियल डिज़ाइन लेआउट दिशा-निर्देश देखें. ऐप्लिकेशन के लेआउट के बारे में हाई-लेवल फ़ैसले लेने के लिए, विंडो साइज़ क्लास का इस्तेमाल करें, जैसे, यह तय करना कि साइट का फ़ायदा पाने के लिए किसी खास कैननिकल लेआउट का इस्तेमाल करना है या नहीं अतिरिक्त स्क्रीन स्पेस.
मौजूदा WindowSizeClass का हिसाब लगाने के लिए,
इसका, currentWindowAdaptiveInfo() टॉप-लेवल फ़ंक्शन
androidx.compose.material3.adaptive लाइब्रेरी. फ़ंक्शन, गड़बड़ी के तौर पर
WindowAdaptiveInfo का इंस्टेंस, जिसमें windowSizeClass शामिल है. कॉन्टेंट बनाने
नीचे दिए गए उदाहरण में, विंडो के साइज़ की क्लास का हिसाब लगाने और
जब भी विंडो साइज़ क्लास में बदलाव होता है, तब अपडेट होता है:
val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
विंडो के साइज़ की क्लास के साथ लेआउट मैनेज करें
विंडो साइज़ क्लास की मदद से, ऐप्लिकेशन के लेआउट को डिसप्ले स्पेस के तौर पर बदला जा सकता है में बदलाव हो सकते हैं. जैसे, डिवाइस के फ़ोल्ड या अनफ़ोल्ड होने पर, डिवाइस का ओरिएंटेशन बदल गया हो या मल्टी-विंडो में ऐप्लिकेशन विंडो का साइज़ बदल गया हो मोड.
विंडो के साइज़ को पास करके, डिसप्ले साइज़ में होने वाले बदलावों को मैनेज करने के लॉजिक को स्थानीय भाषा में लिखें किसी भी अन्य ऐप्लिकेशन स्थिति की तरह ही, क्लास को नेस्ट किए गए कंपोज़ेबल में स्टेट के तौर पर मार्क किया जाता है:
@OptIn(ExperimentalMaterial3AdaptiveApi::class)
@Composable
fun MyApp(
windowSizeClass: WindowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
) {
// Perform logic on the size class to decide whether to show the top app bar.
val showTopAppBar = windowSizeClass.windowHeightSizeClass != WindowHeightSizeClass.COMPACT
// MyScreen knows nothing about window sizes, and performs logic based on a Boolean flag.
MyScreen(
showTopAppBar = showTopAppBar,
/* ... */
)
}
विंडो के साइज़ की क्लास की जांच करें
लेआउट में बदलाव करने के बाद, सभी विंडो साइज़ में लेआउट के व्यवहार की जांच करें, खास तौर पर, छोटी, मीडियम, और बढ़ाई गई ब्रेकपॉइंट चौड़ी चौड़ाई में.
अगर आपके पास कॉम्पैक्ट स्क्रीन का कोई मौजूदा लेआउट है, तो पहले अपने लेआउट को ऑप्टिमाइज़ करें बढ़ाई गई चौड़ाई के साइज़ क्लास के लिए, क्योंकि यह साइज़ क्लास सबसे ज़्यादा जगह देती है का इस्तेमाल किया जा सकता है. इसके बाद, तय करें कि किस लेआउट की मदद से खोज की जा सकती है मीडियम चौड़ाई के साइज़ की क्लास; एक विशेष लेआउट जोड़ने पर विचार करें.
अगले चरण
रिस्पॉन्सिव/ज़रूरत के हिसाब से ढल जाने वाला कॉन्टेंट बनाने के लिए, विंडो साइज़ क्लास इस्तेमाल करने के तरीके के बारे में ज़्यादा जानने के लिए लेआउट के लिए नीचे देखें:
कंपोज़ पर आधारित लेआउट के लिए: अलग-अलग साइज़ की स्क्रीन के साथ काम करें
व्यू-आधारित लेआउट के लिए: व्यू के साथ रिस्पॉन्सिव/अडैप्टिव डिज़ाइन
किसी ऐप्लिकेशन को सभी डिवाइस और स्क्रीन साइज़ के लिए बेहतरीन कैसे बनाया जाता है, इस बारे में ज़्यादा जानने के लिए, देखें:
- अपने यूज़र इंटरफ़ेस (यूआई) को रिस्पॉन्सिव लेआउट पर माइग्रेट करना
- बड़ी स्क्रीन वाले ऐप्लिकेशन की क्वालिटी