विंडो साइज़ क्लास, राय देने वाले व्यूपोर्ट ब्रेकपॉइंट का सेट हैं. इनकी मदद से, रिस्पॉन्सिव/अडैप्टिव लेआउट डिज़ाइन करना, डेवलप करना, और उनकी जांच करना. ब्रेकपॉइंट का संतुलन आपके ऐप्लिकेशन को आसानी से ऑप्टिमाइज़ किया जा सकता है.
विंडो साइज़ क्लास, आपके ऐप्लिकेशन के लिए उपलब्ध डिसप्ले एरिया को इस कैटगरी में बांटती हैं कॉम्पैक्ट, मीडियम या बड़ा किया हुआ. उपलब्ध चौड़ाई और ऊंचाई को अलग-अलग कैटगरी में बांटा गया है इसलिए, किसी भी समय, आपके ऐप्लिकेशन में दो विंडो साइज़ की होती हैं क्लास—एक चौड़ाई के लिए, एक ऊंचाई के लिए. उपलब्ध चौड़ाई आमतौर पर ज़्यादा होती है यह वर्टिकल स्क्रोलिंग की हर जगह उपलब्ध होने की वजह से उपलब्ध ऊंचाई से ज़्यादा अहम है, इसलिए चौड़ाई विंडो साइज़ क्लास, आपके ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) के हिसाब से ज़्यादा काम की है.
जैसा कि आंकड़ों में दिखाया गया है, ब्रेकपॉइंट आपको सोचने पर मजबूर करते हैं लेआउट के बारे में जानकारी. हर साइज़ क्लास ब्रेकपॉइंट डिवाइस से जुड़ी ज़्यादातर समस्याओं के बारे में बताता है. इससे जो आपको ब्रेकपॉइंट-आधारित डिज़ाइन के बारे में बताती हैं. लेआउट.
साइज़ क्लास | ब्रेकपॉइंट | डिवाइस के बारे में जानकारी |
---|---|---|
कम चौड़ाई | चौड़ाई < 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 ऐप्लिकेशन ये काम कर सकते हैं फ़्री-फ़ॉर्म विंडो में दिखाया जाना चाहिए, जिसका साइज़ बदला जा सकता है. फ़ोल्ड किए जा सकने वाले डिवाइस में, अलग-अलग साइज़ की दो स्क्रीन को एक-एक करके ऐक्सेस किया जा सकता है डिवाइस को फ़ोल्ड या अनफ़ोल्ड करके.
आपके ऐप्लिकेशन में विंडो के साइज़ की क्लास कभी भी बदली जा सकती है. ऐप्लिकेशन चलने के दौरान, डिवाइस की स्क्रीन की दिशा बदल जाती है, एक साथ कई काम किए जा सकते हैं, और डिवाइस को फ़ोल्ड या अनफ़ोल्ड करने से, स्क्रीन के लिए उपलब्ध स्टोरेज में बदलाव हो सकता है. बतौर नतीजा, विंडो के साइज़ की क्लास डाइनैमिक है. साथ ही, आपके ऐप्लिकेशन का यूज़र इंटरफ़ेस (यूआई) ऑप्टिमाइज़ होना चाहिए भुगतान करते हैं.
विंडो के साइज़ की क्लास, छोटे, मीडियम, और बड़े किए गए ब्रेकपॉइंट पर मटीरियल डिज़ाइन लेआउट दिशा-निर्देश देखें. ऐप्लिकेशन के लेआउट के बारे में हाई-लेवल फ़ैसले लेने के लिए, विंडो साइज़ क्लास का इस्तेमाल करें, जैसे, यह तय करना कि साइट का फ़ायदा पाने के लिए किसी खास कैननिकल लेआउट का इस्तेमाल करना है या नहीं अतिरिक्त स्क्रीन स्पेस.
You can compute the current
WindowSizeClass
using the
WindowSizeClass#compute()
function provided by the Jetpack
WindowManager library. The following example
shows how to calculate the window size class and receive updates whenever the
window size class changes:
Kotlin
class MainActivity : Activity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // ... // Replace with a known container that you can safely add a // view to where the view won't affect the layout and the view // won't be replaced. val container: ViewGroup = binding.container // Add a utility view to the container to hook into // View.onConfigurationChanged(). This is required for all // activities, even those that don't handle configuration // changes. You can't use Activity.onConfigurationChanged(), // since there are situations where that won't be called when // the configuration changes. View.onConfigurationChanged() is // called in those scenarios. container.addView(object : View(this) { override fun onConfigurationChanged(newConfig: Configuration?) { super.onConfigurationChanged(newConfig) computeWindowSizeClasses() } }) computeWindowSizeClasses() } private fun computeWindowSizeClasses() { val metrics = WindowMetricsCalculator.getOrCreate().computeCurrentWindowMetrics(this) val width = metrics.bounds.width() val height = metrics.bounds.height() val density = resources.displayMetrics.density val windowSizeClass = WindowSizeClass.compute(width/density, height/density) // COMPACT, MEDIUM, or EXPANDED val widthWindowSizeClass = windowSizeClass.windowWidthSizeClass // COMPACT, MEDIUM, or EXPANDED val heightWindowSizeClass = windowSizeClass.windowHeightSizeClass // Use widthWindowSizeClass and heightWindowSizeClass. } }
Java
public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // ... // Replace with a known container that you can safely add a // view to where the view won't affect the layout and the view // won't be replaced. ViewGroup container = binding.container; // Add a utility view to the container to hook into // View.onConfigurationChanged(). This is required for all // activities, even those that don't handle configuration // changes. You can't use Activity.onConfigurationChanged(), // since there are situations where that won't be called when // the configuration changes. View.onConfigurationChanged() is // called in those scenarios. container.addView(new View(this) { @Override protected void onConfigurationChanged(Configuration newConfig) { super.onConfigurationChanged(newConfig); computeWindowSizeClasses(); } }); computeWindowSizeClasses(); } private void computeWindowSizeClasses() { WindowMetrics metrics = WindowMetricsCalculator.getOrCreate() .computeCurrentWindowMetrics(this); int width = metrics.getBounds().width int height = metrics.getBounds().height() float density = getResources().getDisplayMetrics().density; WindowSizeClass windowSizeClass = WindowSizeClass.compute(width/density, height/density) // COMPACT, MEDIUM, or EXPANDED WindowWidthSizeClass widthWindowSizeClass = windowSizeClass.getWindowWidthSizeClass() // COMPACT, MEDIUM, or EXPANDED WindowHeightSizeClass heightWindowSizeClass = windowSizeClass.getWindowHeightSizeClass() // Use widthWindowSizeClass and heightWindowSizeClass. } }
विंडो के साइज़ की क्लास की जांच करें
लेआउट में बदलाव करने के बाद, सभी विंडो साइज़ में लेआउट के व्यवहार की जांच करें, खास तौर पर, छोटी, मीडियम, और बढ़ाई गई ब्रेकपॉइंट चौड़ी चौड़ाई में.
अगर आपके पास कॉम्पैक्ट स्क्रीन का कोई मौजूदा लेआउट है, तो पहले अपने लेआउट को ऑप्टिमाइज़ करें बढ़ाई गई चौड़ाई के साइज़ क्लास के लिए, क्योंकि यह साइज़ क्लास सबसे ज़्यादा जगह देती है का इस्तेमाल किया जा सकता है. इसके बाद, तय करें कि किस लेआउट की मदद से खोज की जा सकती है मीडियम चौड़ाई के साइज़ की क्लास; एक विशेष लेआउट जोड़ने पर विचार करें.
अगले चरण
रिस्पॉन्सिव/ज़रूरत के हिसाब से ढल जाने वाला कॉन्टेंट बनाने के लिए, विंडो साइज़ क्लास इस्तेमाल करने के तरीके के बारे में ज़्यादा जानने के लिए लेआउट के लिए नीचे देखें:
कंपोज़ पर आधारित लेआउट के लिए: अलग-अलग साइज़ की स्क्रीन के साथ काम करें
व्यू-आधारित लेआउट के लिए: व्यू के साथ रिस्पॉन्सिव/अडैप्टिव डिज़ाइन
किसी ऐप्लिकेशन को सभी डिवाइस और स्क्रीन साइज़ के लिए बेहतरीन कैसे बनाया जाता है, इस बारे में ज़्यादा जानने के लिए, देखें:
- अपने यूज़र इंटरफ़ेस (यूआई) को रिस्पॉन्सिव लेआउट पर माइग्रेट करना
- बड़ी स्क्रीन वाले ऐप्लिकेशन की क्वालिटी