ऑटो लेआउट iOS डिवाइसेज के लिए यूजर इंटरफेस के विकास के लिए उपयोग किया जाने वाला कंस्ट्रेंट-बेस्ड लेआउट सिस्टम है। यह कंस्ट्रेंट-बेस्ड लेआउट सिस्टम जिसे ऑटो लेआउट के नाम से भी जाना जाता है, मूल रूप से एक एडाप्टिव UI है जो विभिन्न आकारों और ओरिएंटेशन की स्क्रीन्स के अनुकूल होता है।
ऑटो लेआउट पूरी तरह से कंस्ट्रेंट्स पर निर्भर करता है जहां डेवलपर पड़ोसी या पैरेंट एलिमेंट के साथ संबंध को परिभाषित करके उसकी स्थिति को जब्त करता है।
ऑटो लेआउट क्यों?
iOS एप्लिकेशन डिजाइन करते समय आपको यह सुनिश्चित करने की आवश्यकता होती है कि आपके द्वारा विकसित UI सभी स्क्रीन साइज और ओरिएंटेशन के साथ समान रूप से कम्पेटिबल हो। ऑटो लेआउट तब काम आता है जब आप ऐसा करना चाहते हैं।
नीचे दी गई इमेजेज पर विचार करें। iPhone 6 में सेंट्रली रखा गया बटन अन्य डिवाइसेज में सेंट्रली अलाइन नहीं होता, यह इस तथ्य के कारण है कि विभिन्न iOS डिवाइसेज के अलग-अलग डायमेंशन्स होते हैं।
यह सुनिश्चित करने के लिए कि हमने जो UI विकसित किया है वह सभी डिवाइसेज और ओरिएंटेशन में यूनिफॉर्म है, हम ऑटो लेआउट का उपयोग करने जा रहे हैं।
चरण 1: प्रोजेक्ट बनाएं
Xcode खोलें → New Project → Single View Application → नाम दें "AutoLayout"
चरण 2: बटन जोड़ें
Main.storyboard खोलें, नीचे दिखाए अनुसार बटन जोड़ें, रेफरेंस के लिए डिवाइस के रूप में iPhone 7Plus चुनें।
यहां आप देख सकते हैं कि हमने बिना किसी कंस्ट्रेंट के एक बटन को रैंडम स्थान पर जोड़ा है। हमारा लक्ष्य इस बटन को सेंटर में रखना और सभी डिवाइसेज और ओरिएंटेशन के साथ कम्पेटिबल बनाना है। चरण 3 पर जाने से पहले, आइए समझें कि हमें वास्तव में क्या करना है और हम इसे कैसे प्राप्त करने जा रहे हैं।
Xcode ऑटो लेआउट कंस्ट्रेंट्स को परिभाषित करने के दो तरीके प्रदान करता है → ऑटो लेआउट बार और कंट्रोल-ड्रैग। हालांकि हम ऑटो लेआउट बार का बहुत बार उपयोग करेंगे और इस ब्लॉग में भी लेकिन मैं आपको यह बताना सुनिश्चित करूंगा कि कंट्रोल-ड्रैग का उपयोग कैसे करें। आपके Xcode में इंटरफेस बिल्डर के निचले दाएं कोने में आपको 5 बटन दिखाई दे सकते हैं, ये बटन लेआउट बटन के रूप में जाने जाते हैं जिनका उपयोग कंस्ट्रेंट्स को परिभाषित करने के लिए किया जाता है।
चरण 3: ऑटो लेआउट बार का उपयोग करके कंस्ट्रेंट्स दें
बटन पर क्लिक करें और Align पर टैप करें, Horizontally और Vertically in container को इनेबल करें।
दोनों कंस्ट्रेंट्स जोड़ने के बाद आप अपने बटन को स्क्रीन के सेंटर में अलाइन देख सकते हैं।
वैकल्पिक रूप से आप कंट्रोल ड्रैग फीचर के माध्यम से भी वही प्राप्त कर सकते हैं, जैसा कि नीचे दिखाया गया है, UI कंपोनेंट चुनें, कंट्रोल बटन पर टैप करें और कंस्ट्रेंट्स देने के लिए ड्रैग करें, सेंटर हॉरिजॉन्टली और वर्टिकली दें।
चरण 4: बटन की चौड़ाई और ऊंचाई परिभाषित करें
Add new constraint ऑप्शन चुनें और हाइट और विड्थ जोड़ें।
वैकल्पिक रूप से, आप लीडिंग कंस्ट्रेंट, ट्रेलिंग कंस्ट्रेंट, टॉप मार्जिन और बॉटम मार्जिन प्रदान कर सकते हैं यदि आप हॉरिजॉन्टली और वर्टिकली इन कंटेनर प्रदान नहीं करना चाहते।
चरण 5: महत्वपूर्ण बिंदु याद रखें
तो, हमने सभी आवश्यक कंस्ट्रेंट्स प्रदान कर दिए हैं, हमें हमेशा 4 एजेस, X-axis पर अलाइन, Y-axis पर अलाइन, विड्थ और हाइट याद रखना चाहिए। हमें UI कंपोनेंट को जब्त करने की आवश्यकता है।
अब विभिन्न डिवाइसेज में चलाएं और परिणाम देखें। हम विभिन्न डिवाइसेज और ओरिएंटेशन में चलाएंगे।
आप कंस्ट्रेंट्स को एडिट भी कर सकते हैं, यदि आप उन्हें संशोधित या हटाना चाहते हैं, तो दाएं पेन पर यूटिलिटी एरिया में नंबर 5 ऑप्शन चुनें और नीचे स्क्रॉल करें जैसा कि इमेज में दिखाया गया है।
तो यह ट्यूटोरियल आपको ऑटो लेआउट और कंस्ट्रेंट्स का उपयोग करके एडाप्टिव UI विकसित करने के बारे में संक्षिप्त जानकारी देने के लिए था। आप ऊपर दिए गए बेसिक कॉन्सेप्ट्स का उपयोग करके मल्टीपल कंपोनेंट्स के साथ कोशिश कर सकते हैं।
