स्विफ्ट और आईओएस में एक्सकोड ऑटो लेआउट के साथ काम करना

ऑटो लेआउट बाधा आधारित लेआउट सिस्टम है जिसका उपयोग आईओएस उपकरणों के लिए यूजर इंटरफेस के विकास के लिए किया जाता है। यह लेआउट आधारित बाधा प्रणाली जिसे ऑटो लेआउट के रूप में भी जाना जाता है, मूल रूप से एक अनुकूली UI है जो विभिन्न आकारों और अभिविन्यासों की स्क्रीन के अनुकूल होती है।

ऑटो लेआउट पूरी तरह से बाधाओं पर निर्भर है जहां डेवलपर पड़ोसी या मूल तत्व के बीच संबंध को स्थिति को जब्त करने के लिए परिभाषित करता है।

ऑटो लेआउट क्यों?

IOS एप्लिकेशन को डिज़ाइन करते समय आपको यह सुनिश्चित करने की आवश्यकता होती है कि आप जिस UI को विकसित कर रहे हैं वह सभी स्क्रीन आकारों और अभिविन्यास के साथ समान रूप से संगत होना चाहिए। जब आप ऐसा करना चाहते हैं तो ऑटो लेआउट काम आता है।

नीचे दी गई छवियों पर विचार करें। IPhone 6 में एक केंद्रीय रूप से रखा गया बटन, अन्य उपकरणों के लिए केंद्रीय रूप से संरेखित नहीं होता है, यह इस तथ्य के कारण है कि विभिन्न iOS उपकरणों के अलग-अलग आयाम हैं। इस पोस्ट में हम बाधाओं पर ध्यान केंद्रित करेंगे, इसलिए यदि आप आयामों के बारे में अधिक पढ़ना चाहते हैं, तो आप https://iosres.com/

यह सुनिश्चित करने के लिए कि हमने जो UI विकसित किया है, वह सभी डिवाइसों और ओरिएंटेशन में एक समान है, हम ऑटो लेआउट का उपयोग करने जा रहे हैं। तो, चलिए शुरू करते हैं।

चरण 1 − ओपन एक्सकोड → न्यू प्रोजेक्र → सिंगल व्यू एप्लीकेशन → चलो इसे "ऑटोलाउट" नाम दें

चरण 2 - मेन.स्टोरीबोर्ड खोलें, नीचे दिखाए अनुसार बटन जोड़ें, संदर्भ के लिए iPhone 7Plus के रूप में डिवाइस का चयन करें।

यहां आप देख सकते हैं कि हमने बिना किसी बाधा के यादृच्छिक स्थान पर एक बटन जोड़ा है। हमारा उद्देश्य इस बटन को केंद्र में रखना और सभी उपकरणों और अभिविन्यासों के अनुकूल बनाना है। चरण 3 पर जाने से पहले, आइए समझते हैं कि वास्तव में हमें क्या करने की आवश्यकता है और हम इसे कैसे प्राप्त करने जा रहे हैं।

Xcode ऑटो लेआउट बाधाओं को परिभाषित करने के दो तरीके प्रदान करता है → ऑटो लेआउट बार और कंट्रोल-ड्रैग। हालाँकि हम Auto Layout bar का उपयोग बहुत बार करेंगे और इस ब्लॉग में भी लेकिन मैं आपको यह बताना सुनिश्चित करूँगा कि Control-drag का भी उपयोग कैसे करें। इंटरफ़ेस बिल्डर के निचले दाएं कोने में आपके Xcode में आपको 5 बटन दिखाई दे सकते हैं जिन्हें इन बटनों को लेआउट बटन के रूप में जाना जाता है जो बाधाओं को परिभाषित करने के लिए उपयोग किए जाते हैं।

तो, अब हम दोनों बटनों को बाधा प्रदान करने के लिए ऑटो लेआउट बार का उपयोग करेंगे।

मुख्य सिद्धांत जिस पर पूर्ण बाधा प्रणाली काम करती है, वह है 4 पैरामीटर (अग्रणी, अनुगामी, ऊपर और नीचे), साथ ही ऊंचाई, चौड़ाई और ऊर्ध्वाधर और क्षैतिज केंद्र।

चरण 3 - एलाइन पर बटन और टैब पर क्लिक करें, कंटेनर में क्षैतिज और लंबवत रूप से सक्षम करें जैसा कि नीचे दिखाया गया है।

दोनों बाधाओं को जोड़ने के बाद आप अपने बटन को स्क्रीन के केंद्र में संरेखित देख सकते हैं।

वैकल्पिक रूप से आप इसे कंट्रोल ड्रैग फीचर के माध्यम से भी प्राप्त कर सकते हैं, जैसा कि नीचे दिखाया गया है, UI घटक का चयन करें, नियंत्रण बटन पर टैप करें और बाधाओं को देने के लिए खींचें, केंद्र को क्षैतिज और लंबवत दें।

चरण 4 - अब हम बटन की चौड़ाई और ऊंचाई को परिभाषित करेंगे। जैसा कि नीचे दिखाया गया है, नई बाधा जोड़ें विकल्प चुनें और ऊंचाई और चौड़ाई जोड़ें।

वैकल्पिक रूप से, यदि आप कंटेनर को क्षैतिज और लंबवत रूप से प्रदान नहीं करना चाहते हैं, तो आप अग्रणी बाधा, अनुगामी बाधा, शीर्ष मार्जिन और निचला मार्जिन प्रदान कर सकते हैं।

चरण 5 - इसलिए, हमने सभी आवश्यक बाधाएं प्रदान की हैं, हमें हमेशा 4 किनारों को याद रखना चाहिए, एक्स-अक्ष से संरेखित करें, वाई-अक्ष पर संरेखित करें, चौड़ाई और ऊंचाई हमें यूआई घटक को जब्त करने की आवश्यकता है।

अब विभिन्न उपकरणों में चलते हैं और परिणाम देखते हैं। हम विभिन्न उपकरणों और अभिविन्यास में चलेंगे।

आप बाधाओं को संपादित भी कर सकते हैं, यदि आप उन्हें संशोधित करना या हटाना चाहते हैं, तो दाएँ फलक पर उपयोगिता क्षेत्र में नंबर 5 विकल्प चुनें और नीचे स्क्रॉल करें जैसा कि चित्र में दिखाया गया है।

तो इस ट्यूटोरियल का उद्देश्य आपको अनुकूली UI विकसित करने के लिए ऑटो लेआउट और बाधाओं का उपयोग करने के तरीके के बारे में संक्षिप्त जानकारी देना था। आप ऊपर दी गई बुनियादी अवधारणाओं का उपयोग करके कई घटकों के साथ प्रयास कर सकते हैं।