Size Class: यह क्या है, iOS में Compact और Regular साइज़ क्लास
Size Class iOS में अनुकूली लेआउट के लिए एक तंत्र है जो सभी उपकरणों को प्रत्येक अक्ष पर दो श्रेणियों में विभाजित करता है: Compact (संकीर्ण/छोटा) और Regular (चौड़ा/लंबा)। ये मान निर्धारित करते हैं कि इंटरफ़ेस iPhone, iPad, Mac Catalyst और CarPlay पर कैसे प्रदर्शित होता है। Apple Human Interface Guidelines, 2024 के अनुसार, Size Class Auto Layout और UITraitCollection का उपयोग करके सभी उपकरणों के लिए एक ही storyboard बनाने की अनुमति देता है। सिस्टम iOS 8 से सभी iOS उपकरणों पर काम करता है।
मुख्य बातें
- Size Class iOS में आकार वर्गीकरण प्रणाली है जिसमें प्रति अक्ष दो मान होते हैं: Compact (संकुचित) और Regular (पूर्ण आकार)।
- क्षैतिज Size Class iPhone पर पोर्ट्रेट ओरिएंटेशन में Compact है, iPad पर — Regular। ऊर्ध्वाधर SE को छोड़कर सभी iPhone पर Regular है।
- UITraitCollection वर्तमान Size Class प्राप्त करने और रनटाइम पर ट्रैट कलेक्शन में बदलावों पर प्रतिक्रिया देने के लिए एक प्रोग्रामेटिक इंटरफ़ेस है।
- Interface Builder Vary for Traits टूल के साथ प्रत्येक Size Class संयोजन के लिए कंस्ट्रेंट और तत्व दृश्यता कॉन्फ़िगर करने की अनुमति देता है।
- अनुकूली लेआउट Size Class के साथ iPhone और iPad के लिए अलग-अलग storyboard को बदलता है — एक फ़ाइल सभी उपकरणों के अनुकूल हो जाती है।
Size Class क्या है?
Size Class iOS में एक सार स्क्रीन वर्गीकरण है, जिसे Apple ने iOS 8 में अनुकूली लेआउट को एकीकृत करने के लिए पेश किया था। किसी विशिष्ट डिवाइस मॉडल की जांच करने के बजाय, Size Class दो विशेषताओं को परिभाषित करता है: उपलब्ध क्षैतिज और ऊर्ध्वाधर स्थान। प्रत्येक विशेषता दो मानों में से एक लेती है — Compact (सीमित स्थान) या Regular (पर्याप्त स्थान)। इन मानों का संयोजन एक ट्रैट कलेक्शन बनाता है, जो सभी इंटरफ़ेस तत्वों को दिया जाता है।
इतिहास और उद्देश्य
Size Class से पहले, डेवलपर्स iPhone और iPad के लिए अलग-अलग storyboard बनाते थे या कोड में UI_USER_INTERFACE_IDIOM() जांच का उपयोग करते थे। इससे कोड दोहराव, भारी storyboard, और नए स्क्रीन आकारों का समर्थन करने में कठिनाइयाँ होती थीं। Size Class ने एक सार्वभौमिक प्रणाली प्रदान करके समस्या हल की: डेवलपर 4 Compact/Regular संयोजनों के लिए इंटरफ़ेस कॉन्फ़िगर करता है, और iOS स्वचालित रूप से उपयुक्त का चयन करता है। iPad पर Split View और विभिन्न iPhone आकारों के आगमन के साथ, सिस्टम अनुकूली लेआउट के लिए अपरिहार्य हो गया।
Size Class कैसे काम करता है
Size Class iOS द्वारा वर्तमान स्क्रीन की चौड़ाई और ऊंचाई के आधार पर गणना की जाती है, जिसमें ओरिएंटेशन और मल्टीटास्किंग को ध्यान में रखा जाता है। मान विशिष्ट पिक्सेल से बंधे नहीं हैं — यह एक तार्किक श्रेणी है। उदाहरण के लिए, iPhone 16 Pro पोर्ट्रेट में क्षैतिज Compact और ऊर्ध्वाधर Regular है। वही iPhone लैंडस्केप में — दोनों अक्षों पर Compact। iPad Split View में 1/3 स्क्रीन पर चलने वाले ऐप के साथ क्षैतिज Compact प्राप्त करता है, हालाँकि पूर्ण स्क्रीन मोड में यह Regular होता है। सिस्टम स्वचालित रूप से ओरिएंटेशन या Split View बदलने पर Size Class अपडेट करता है।
कौन से साइज़ क्लास मौजूद हैं
Size Class दो अक्षों पर दो मानों के चार संयोजनों का उपयोग करता है। प्रत्येक संयोजन का अपना अनुप्रयोग होता है जो डिवाइस प्रकार और उसके ओरिएंटेशन पर निर्भर करता है। इन संयोजनों को समझना iOS के लिए अनुकूली इंटरफ़ेस डिज़ाइन करने का आधार है। सिस्टम सभी वर्तमान Apple उपकरणों को कवर करता है: iPhone, iPad, Mac Catalyst और CarPlay। Apple wAny hAny संयोजन (बेस लेआउट) से डिज़ाइन शुरू करने और विशिष्ट संयोजनों के लिए परिष्कृत करने की सलाह देता है।
Size Class के चार संयोजन
wCompact hRegular — पोर्ट्रेट iPhone (कुछ मामलों में Plus/Max को छोड़कर)। wCompact hCompact — लैंडस्केप iPhone SE/6/7/8। wRegular hRegular — किसी भी ओरिएंटेशन में पूर्ण स्क्रीन iPad, लैंडस्केप में iPhone Plus/Max। wRegular hCompact — संकीर्ण सामग्री के साथ लैंडस्केप में iPad। प्रत्येक संयोजन निर्धारित करता है कि कौन से कंस्ट्रेंट और तत्व सक्रिय हैं। डेवलपर Interface Builder में प्रत्येक संयोजन के लिए अलग-अलग रूप सेट कर सकता है।
Mac Catalyst के लिए Size Class
Mac Catalyst पर, Size Class हमेशा wRegular hRegular — पूर्ण आकार का इंटरफ़ेस होता है। इसका मतलब है कि iPad ऐप का Mac संस्करण अधिकतम स्थान प्राप्त करता है। डेवलपर Mac को iPad से अलग करने के लिए UIScreen.traitCollection.userInterfaceIdiom के माध्यम से अतिरिक्त जांच का उपयोग कर सकता है। Mac पर Size Class स्थिर रूप से काम करता है, लेकिन Catalyst ऐप्स को अक्सर Size Class से परे माउस और कीबोर्ड के लिए अतिरिक्त अनुकूलन की आवश्यकता होती है।
Size Class अनुकूली लेआउट को कैसे प्रभावित करता है
Size Class निर्धारित करता है कि कौन से Auto Layout कंस्ट्रेंट सक्रिय हैं, कौन से इंटरफ़ेस तत्व दृश्य हैं, और subviews कैसे व्यवस्थित हैं। डेवलपर विभिन्न Size Classes के लिए अलग-अलग कंस्ट्रेंट सेट कर सकता है, और ट्रैट कलेक्शन बदलने पर iOS स्वचालित रूप से उन्हें स्विच करता है। उदाहरण के लिए, iPad (wRegular hRegular) पर विवरण के साथ तालिका Master-Detail में प्रदर्शित होती है, iPhone (wCompact hRegular) पर — Navigation Stack में। यह Size Class के साथ अनुकूली लेआउट का मुख्य परिदृश्य है।
कंस्ट्रेंट सेट करना और हटाना
Interface Builder में, डेवलपर Vary for Traits बटन के माध्यम से Size Class संयोजन का चयन करता है और कंस्ट्रेंट जोड़ता है जो केवल उस संयोजन के लिए लागू होने चाहिए। wAny hAny के लिए सेट किए गए कंस्ट्रेंट हमेशा लागू होते हैं। विशिष्ट संयोजन के लिए सेट किए गए कंस्ट्रेंट केवल तभी सक्रिय होते हैं जब Size Class मेल खाता है। यदि किसी संयोजन के लिए कोई विशेष कंस्ट्रेंट सेट नहीं हैं, तो बेस कंस्ट्रेंट का उपयोग किया जाता है। जब Size Class बदलता है, iOS कंस्ट्रेंट सेट के बीच संक्रमण को एनिमेट करता है।
तत्वों को छिपाना और दिखाना
Interface Builder में Installed फ़्लैग विशिष्ट Size Classes के लिए तत्वों को छिपाने की अनुमति देता है। डेवलपर चयनित संयोजन के लिए एक तत्व को Uninstalled के रूप में चिह्नित करता है। उदाहरण के लिए, Details बटन केवल iPad (wRegular hRegular) पर दृश्य है, और iPhone पर छिपा हुआ है। यह कोड में isHidden प्रबंधित करने से सरल है। प्रोग्रामेटिक छिपाने के लिए, traitCollectionDidChange को ओवरराइड करें या willTransition विधि का उपयोग करें, वर्तमान Size Class की जांच करें।
Interface Builder में Size Class का उपयोग
Interface Builder Size Class के साथ काम करने के लिए दृश्य Vary for Traits टूल प्रदान करता है। डेवलपर वांछित संयोजन (चौड़ाई और ऊंचाई) चुनता है, और Interface Builder उस संयोजन के लिए स्क्रीन का पूर्वावलोकन दिखाता है। इस मोड में किए गए सभी कंस्ट्रेंट, आकार, फ़ॉन्ट और दृश्यता परिवर्तन केवल चयनित Size Class पर लागू होते हैं। मोड से बाहर निकलने पर सेटिंग्स सहेजी जाती हैं। यह दृष्टिकोण विभिन्न उपकरणों के लिए अनुकूलन कोड लिखने की आवश्यकता को समाप्त करता है।
Interface Builder में चरण-दर-चरण कार्य
Interface Builder में Size Class कॉन्फ़िगर करने के लिए, डेवलपर एक storyboard खोलता है, view controller चुनता है, और निचले पैनल में Vary for Traits बटन पर क्लिक करता है। फिर Width (Compact, Regular या Any) और Height (Compact, Regular या Any) चुनता है। इंटरफ़ेस चयनित संयोजन के लिए संपादन मोड में बदल जाता है। सभी कंस्ट्रेंट परिवर्तन, तत्वों को जोड़ना या हटाना केवल इस संयोजन पर लागू होते हैं। सेटअप पूरा करने के बाद, डेवलपर मोड से बाहर निकलता है — परिवर्तन विशिष्ट Size Class संयोजन के लिए सहेजे जाते हैं।
सर्वोत्तम अभ्यास
Apple wAny hAny (सभी उपकरणों को कवर करने वाला बेस संयोजन) के लिए बेस लेआउट से शुरू करने की सलाह देता है। फिर समस्या पैदा करने वाले संयोजनों के लिए लेआउट को परिष्कृत करें: wCompact hRegular (पोर्ट्रेट iPhone) और wRegular hRegular (iPad)। प्रत्येक संयोजन को कॉन्फ़िगर करने की अनुशंसा नहीं की जाती — केवल वे जहाँ लेआउट टूटता है। अत्यधिक कॉन्फ़िगरेशन रखरखाव को जटिल बनाता है। सटीक फ़ॉन्ट आकार के लिए, Size Class के बजाय Dynamic Type का उपयोग करें: फ़ॉन्ट स्वचालित रूप से स्क्रीन आकार के अनुकूल हो जाते हैं।
कोड में Size Class: UITraitCollection
UITraitCollection एक iOS क्लास है जिसमें वर्तमान Size Class और अन्य पर्यावरण विशेषताएँ (force touch, डिस्प्ले स्केल, यूज़र इंटरफ़ेस इडियम) होती हैं। प्रत्येक UIView और UIViewController का अपना traitCollection होता है, जो पैरेंट से विरासत में मिलता है। डेवलपर traitCollection.horizontalSizeClass और traitCollection.verticalSizeClass के माध्यम से Size Class प्राप्त करता है, जो UIUserInterfaceSizeClass (.compact, .regular या .unspecified) लौटाते हैं। Size Class परिवर्तनों को traitCollectionDidChange को ओवरराइड करके ट्रैक किया जाता है।
उदाहरण: कोड में लेआउट स्विच करना
Size Class में UICollectionView लेआउट को अनुकूलित करने का एक उदाहरण देखें। iPad (wRegular hRegular) पर दो कॉलम के साथ UICollectionViewCompositionalLayout का उपयोग करें, iPhone (wCompact hRegular) पर — एक के साथ। कोड क्षैतिज Size Class की जाँच करता है और उपयुक्त लेआउट चुनता है। रोटेशन या Split View संक्रमण पर, iOS traitCollectionDidChange को कॉल करता है, और कंट्रोलर एनीमेशन के साथ लेआउट स्विच करता है।
swift
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
super.traitCollectionDidChange(previousTraitCollection)
if traitCollection.horizontalSizeClass == .Compact {
collectionView.collectionViewLayout = SingleColumnLayout()
} else {
collectionView.collectionViewLayout = DoubleColumnLayout()
}
}ट्रैट कलेक्शन परिवर्तनों पर प्रतिक्रिया
traitCollectionDidChange विधि किसी भी Size Class परिवर्तन पर कॉल की जाती है: डिवाइस रोटेशन, Split View में प्रवेश/निकास, बाहरी डिस्प्ले कनेक्शन। इस विधि में, डेवलपर लेआउट अपडेट करता है, कलेक्शन रीलोड करता है, कंस्ट्रेंट प्राथमिकताएँ अपडेट करता है, या तत्व दृश्यता बदलता है। यह जाँचना महत्वपूर्ण है कि क्या वास्तव में Size Class बदला है, न कि कोई अन्य विशेषता: traitCollection.horizontalSizeClass की previousTraitCollection?.horizontalSizeClass से तुलना करें। ऑप्टिमाइज़ेशन force touch या डिस्प्ले स्केल बदलने पर अनावश्यक पुनर्चित्रण को रोकता है।
विभिन्न उपकरणों पर Size Class की विशेषताएं
विभिन्न Apple उपकरणों में Size Class के अलग-अलग संयोजन होते हैं, और डेवलपर को इन विशेषताओं को ध्यान में रखना चाहिए। iPhone पोर्ट्रेट में — wCompact hRegular, लैंडस्केप में — मॉडल पर निर्भर: iPhone SE/6/7/8 (wCompact hCompact), iPhone X और नए (wCompact hCompact या wCompact hRegular सामग्री पर निर्भर)। iPad पूर्ण स्क्रीन मोड में — wRegular hRegular, Split View में — wCompact hRegular (1/3 स्क्रीन) या wRegular hRegular (2/3 स्क्रीन) हो सकता है। Mac Catalyst — हमेशा wRegular hRegular।
iPhone: सभी आकार
iPhone पर, Size Class अधिकांश मॉडलों के लिए स्थिर है, लेकिन बारीकियाँ हैं। iPhone Plus (6+, 7+, 8+) और Max (X, XS, 11 Pro, 13–16 Pro Max) लैंडस्केप में wRegular hCompact — iPad mini की तरह हैं। यह बड़े iPhones पर लैंडस्केप में दो कॉलम में सामग्री रखने की अनुमति देता है। iPhone SE (पहली–तीसरी पीढ़ी) लैंडस्केप में — wCompact hCompact। पोर्ट्रेट में सभी iPhone पर ऊर्ध्वाधर Size Class Regular है, लैंडस्केप में iPhone SE को छोड़कर जहाँ यह Compact है। क्षैतिज हमेशा पोर्ट्रेट और लैंडस्केप के लिए Compact है (लैंडस्केप में Plus/Max को छोड़कर)।
iPad और Split View
iPad पूर्ण स्क्रीन मोड में — wRegular hRegular, अधिकतम लेआउट लचीलापन प्रदान करता है। Split View में, व्यवहार बदलता है: यदि ऐप स्क्रीन का 1/3 भाग घेरता है (Slide Over या 1/3 पर Split), क्षैतिज Size Class Compact हो जाता है, हालाँकि ऊर्ध्वाधर Regular रहता है। 2/3 स्क्रीन पर — wRegular hRegular। डेवलपर को सभी Split View मोड में इंटरफ़ेस का परीक्षण करना चाहिए, क्योंकि Size Class गतिशील रूप से बदलता है। Apple iPad पर सुसंगत व्यवहार के लिए UISplitViewController के साथ Size Class का उपयोग करने की सलाह देता है।
अक्सर पूछे जाने वाले प्रश्न
Size Class CSS में ब्रेकपॉइंट से कैसे भिन्न है?
Size Class 4 संयोजनों वाली एक असतत प्रणाली है, जबकि CSS ब्रेकपॉइंट मनमानी संख्या में बिंदुओं वाली सतत प्रणाली हैं। Size Class विशिष्ट स्क्रीन आकारों से अमूर्त होता है, उपकरणों को व्यवहार द्वारा समूहित करता है। CSS ब्रेकपॉइंट पिक्सेल से बंधे होते हैं, Size Class — तार्किक Compact/Regular श्रेणियों से।
लैंडस्केप में iPhone Plus का Size Class Regular क्षैतिज क्यों है?
iPhone Plus/Max लैंडस्केप में दो कॉलम में सामग्री प्रदर्शित करने के लिए पर्याप्त स्क्रीन चौड़ाई रखता है (iPad mini की तरह)। Apple क्षैतिज Regular निर्दिष्ट करता है ताकि डेवलपर बिना अतिरिक्त जांच के मल्टी-कॉलम लेआउट का उपयोग कर सके। यह iPhone के लिए Compact नियम का अपवाद है।
क्या Size Class को प्रोग्रामेटिक रूप से बदला जा सकता है?
Size Class iOS द्वारा वास्तविक डिवाइस विशेषताओं के आधार पर निर्धारित किया जाता है और ऐप कोड से नहीं बदला जा सकता। डेवलपर केवल वर्तमान मान पर प्रतिक्रिया कर सकता है। सिस्टम UI सिस्टम तत्वों के लिए Size Class को ओवरराइड कर सकता है, लेकिन ऐप में यह संभव नहीं है।
SwiftUI के साथ Size Class कैसे काम करता है?
SwiftUI सीधे Size Class का उपयोग नहीं करता — इसके बजाय, डेवलपर वर्तमान मान पढ़ने के लिए @Environment(\.horizontalSizeClass) मॉडिफ़ायर का उपयोग करता है। SwiftUI उच्च-स्तरीय उपकरण प्रदान करता है: Size Classes और AnyLayout Layout प्रोटोकॉल के साथ अनुकूली लेआउट के लिए।
क्या बाहरी मॉनिटर कनेक्ट करने पर Size Class अपडेट होता है?
हाँ, Stage Manager या Sidecar के माध्यम से बाहरी डिस्प्ले कनेक्ट करने पर, iOS Size Class अपडेट करता है। बाहरी मॉनिटर आमतौर पर wRegular hRegular प्राप्त करता है, जबकि मुख्य स्क्रीन अपना Size Class बनाए रखती है। traitCollectionDidChange प्रत्येक स्क्रीन पर विंडो के लिए स्वतंत्र रूप से कॉल किया जाता है।
सारांश
- Size Class प्रति अक्ष दो Compact/Regular मानों वाली iOS स्क्रीन वर्गीकरण प्रणाली है, कुल 4 संयोजन।
- पोर्ट्रेट में iPhone — wCompact hRegular। पूर्ण स्क्रीन मोड में iPad — wRegular hRegular। लैंडस्केप में iPhone Plus/Max — wRegular hCompact।
- Interface Builder प्रत्येक Size Class के लिए कंस्ट्रेंट और दृश्यता के दृश्य कॉन्फ़िगरेशन के लिए Vary for Traits प्रदान करता है।
- UITraitCollection horizontalSizeClass और verticalSizeClass के माध्यम से Size Class पढ़ने के लिए प्रोग्रामेटिक API है। परिवर्तन traitCollectionDidChange में ट्रैक किए जाते हैं।
- iPad पर Split View गतिशील रूप से Size Class बदलता है: 1/3 स्क्रीन पर क्षैतिज Compact हो जाता है, जिसके लिए लेआउट अनुकूलन की आवश्यकता होती है।
- SwiftUI Size Class पढ़ने के लिए @Environment(\.horizontalSizeClass) और रनटाइम पर लेआउट के बीच स्विच करने के लिए AnyLayout प्रदान करता है।
- अनुशंसा wAny hAny के लिए लेआउट से शुरू करें, फिर wCompact hRegular (iPhone) और wRegular hRegular (iPad) के लिए अनुकूलित करें, शेष संयोजनों को अधिभारित किए बिना।
हम एक मोबाइल एप्लिकेशन टर्नकी विकसित करेंगे
IT Sectr 2017 से स्टार्टअप और व्यवसायों के लिए iOS और Android एप्लिकेशन बनाता है। हम आपको सलाह देंगे और सर्वोत्तम समाधान प्रस्तावित करेंगे।
यह भी पढ़ें