PureLayout (भाग 1) का उपयोग करके प्रोग्रामेटिक रूप से इंटरफ़ेस तत्व बनाना

नमस्कार, हेब्र! मैं आपके लिए लेख का अनुवाद प्रस्तुत करता हूँ।



आज मैं आपको स्टोरीबोर्ड या NIB का उपयोग किए बिना, कोड के साथ एक सरल मोबाइल एप्लिकेशन उपयोगकर्ता इंटरफ़ेस बनाने के माध्यम से मार्गदर्शन करूंगा। मैं इस बारे में चर्चा में नहीं जाऊंगा कि कौन सा बेहतर है, क्योंकि हर चीज के अपने पेशेवरों और विपक्ष हैं, इसलिए मैं इस मामले में एक कड़ी छोड़ देता हूं।

इस गाइड के दूसरे भाग में, हम कुछ सबसे अधिक उपयोग किए जाने वाले मोबाइल एप्लिकेशन यूजर इंटरफेस तत्वों को कोड के साथ बनाएंगे, जिसमें एक नेविगेशन बार, टेबल व्यू और डायनामिक-आकार की सेल शामिल हैं।

सिंहावलोकन

यह ट्यूटोरियल Xcode 9 और स्विफ्ट 4 का उपयोग करते हुए लिखा गया था। मैं यह भी मानता हूं कि आप Xcode, Swift और CocoaPods से परिचित हैं।

आगे की देरी के बिना, आइए अपना प्रोजेक्ट बनाना शुरू करें: एक सरल संपर्क कार्ड एप्लिकेशन। इस लेख का उद्देश्य आपको यह सिखाना है कि कोड में अपने एप्लिकेशन का उपयोगकर्ता इंटरफ़ेस कैसे बनाया जाए, और इसलिए इसमें एप्लिकेशन की कार्यक्षमता के बारे में कोई तर्क नहीं होगा, जब तक कि यह इस गाइड के उद्देश्यों के लिए आवश्यक न हो।

PureLayout के साथ प्रोग्राम बनाने में बाधाएं

प्रोजेक्ट सेटअप

Xcode लॉन्च करके शुरू करें -> "एक नया Xcode प्रोजेक्ट बनाएं"। "एकल दृश्य ऐप" चुनें और "अगला" पर क्लिक करें।



आप जैसे चाहें प्रोजेक्ट को नाम दें, मैंने इसे कॉन्टेक्टकार्ड कहने का फैसला किया। नीचे दिए गए सभी तीन विकल्पों को साफ़ करें और अपनी प्रोग्रामिंग भाषा के रूप में स्विफ्ट चुनें, फिर अगला पर क्लिक करें।



प्रोजेक्ट को सहेजने के लिए अपने कंप्यूटर पर किसी स्थान का चयन करें। अनचेक करें "मेरे मैक पर Git रिपोजिटरी बनाएँ।"

चूंकि हम इस परियोजना में स्टोरीबोर्ड या एनआईबी का उपयोग नहीं करेंगे, इसलिए "मेन.स्टोरीबोर्ड" को हटा दें, जो प्रोजेक्ट नेविगेटर में पाया जा सकता है:



उसके बाद, प्रोजेक्ट नेविगेटर में प्रोजेक्ट पर क्लिक करें और "सामान्य" टैब पर, तैनाती जानकारी के साथ अनुभाग ढूंढें और "मुख्य इंटरफ़ेस" में लिखे गए सभी चीज़ों को हटा दें। यह वह है जो Xcode को बताता है कि आवेदन शुरू होने पर स्टोरीबोर्ड फ़ाइल को लोड करने के लिए, लेकिन चूंकि हमने "Main.storyboard" को हटा दिया है, इसलिए Xcode को यह फ़ाइल नहीं मिलेगी, जिससे एप्लिकेशन क्रैश हो जाएगा।

ViewController बनाना

यदि आप अभी एप्लिकेशन चलाते हैं, तो एक काली स्क्रीन दिखाई देगी, क्योंकि एप्लिकेशन में अब उपयोगकर्ता इंटरफ़ेस का कोई स्रोत नहीं है, इसलिए अगले भाग में हम इसे बनाएंगे। "AppDelegate.swift" खोलें और application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) अंदर application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) , इस कोड के टुकड़े को चिपकाएँ:

 self.window = UIWindow(frame: UIScreen.main.bounds) let viewController = ViewController() self.window?.rootViewController = viewController self.window?.makeKeyAndVisible() 

यह कोड एप्लिकेशन के साथ उपयोगकर्ता के इंटरैक्शन के लिए एक विंडो प्रदान करता है, जो आमतौर पर "ViewController.swift" में पाया जा सकता है। यह सत्यापित करने के लिए कि सब कुछ काम करता है, "ViewController.swift" पर जाएं और viewDidLoad() विधि में, निम्न पंक्ति डालें:

 self.view.backgroundColor = .blue 

अब एप्लिकेशन को चलाएं।

Xcode में फ़ाइलों के बीच नेविगेट करने के लिए, "hotO" हॉटकीज़ का उपयोग करें, और फिर फ़ाइल नाम या यहां तक ​​कि कोड टुकड़ा जिसे आप ढूंढ रहे हैं, और उन फ़ाइलों की एक सूची दर्ज करें, जिनसे आप स्क्रीन पर दिखाई देंगे।

आवेदन शुरू करने के बाद, यह आपके सिम्युलेटर की स्क्रीन पर परिणाम होना चाहिए:



बेशक, हम इस घृणित नीले रंग का उपयोग नहीं करेंगे, इसलिए बस पृष्ठभूमि को बदलकर सफेद रंग में बदल .blue ।

यूआई विकास

हमारे उपयोगकर्ता इंटरफ़ेस बनाने के लिए, हम एक पुस्तकालय का उपयोग करेंगे जो हमारे जीवन को बहुत आसान बना देगा। PureLayout को स्थापित करने के लिए, आपको पहले अपना टर्मिनल और टाइपिंग सीडी खोलना होगा, फिर एक स्थान, अपने प्रोजेक्ट फ़ोल्डर को टर्मिनल में खींचें और "एंटर" दबाएं। अब टर्मिनल के अंदर निम्नलिखित कमांड चलाएँ:

• फली
• फली स्थापित करें

यह दूसरी कमांड के बाद आपके टर्मिनल का आउटपुट होना चाहिए:



उसके बाद, Xcode को बंद करें, फाइंडर में फ़ोल्डर खोलें, और आपको "<अपने प्रोजेक्ट का नाम> .xcworkspace" ढूंढना चाहिए। अगर हम कभी कोकोआपोड्स का उपयोग करने की आवश्यकता है, तो हम अपने आवेदन को एक्सेस करने के लिए खोलेंगे। अब "पॉडफाइल" नाम की फ़ाइल ढूंढें और वाक्यांश का उपयोग use_frameworks! तहत निम्न पंक्ति use_frameworks!

 pod “PureLayout” 

अपने टर्मिनल में फिर से pod install करें, और फिर "कमांड + बी" दबाकर अपनी परियोजना का निर्माण करें।

कॉफ़ी तोड़ना

अब जब सब कुछ सेट हो गया है, तो चलिए शुरू करते हैं असली काम से। "ViewController.swift" पर जाएं और एक कप कॉफी पकड़ो, क्योंकि यह वही है जो अंतिम परिणाम जैसा दिखेगा:

ImageView बनाएं

import UIKit तहत import PureLayout लाइन डालें ताकि आप इस फ़ाइल में लाइब्रेरी का उपयोग कर सकें। फिर, क्लास डिक्लेरेशन और किसी फ़ंक्शन के बाहर, हम आलसी (आलसी) Avatar ImageView चर बनाकर शुरू करते हैं:

 lazy var avatar: UIImageView = { let imageView = UIImageView(image: UIImage(named: "avatar.jpg")) imageView.autoSetDimensions(to: CGSize(width: 128.0, height: 128.0)) imageView.layer.borderWidth = 3.0 imageView.layer.borderColor = UIColor.lightGray.cgColor imageView.layer.cornerRadius = 64.0 imageView.clipsToBounds = true return imageView }() 

छवि के लिए, डेस्कटॉप पर किसी भी छवि को सहेजें जिसे आप एक अवतार के रूप में उपयोग करेंगे, और इसे <अपने प्रोजेक्ट नाम> फ़ोल्डर में Xcode में खींचें, जिसे मेरे मामले में "कॉन्टैक्टकार्ड" कहा जाता है, और "कॉपी आइटम" की आवश्यकता होने पर चेक करें ।



उसके बाद, "avatar.jpg" के बजाय UIImage घोषणा में इसके विस्तार के साथ इस फ़ाइल का नाम लिखें।

आप में से जो लोग नहीं जानते हैं, आलसी चर सामान्य चर के समान होते हैं, सिवाय इसके कि उन्हें आरम्भ में (या कुछ मेमोरी स्पेस आवंटित नहीं किया जाता है) जब तक कि उन्हें पहली बार जरूरत न हो या बुलाया न जाए। । इसका मतलब यह है कि जब दृश्य नियंत्रक को प्रारंभ किया जाता है, तो आलसी चर को प्रारंभ नहीं किया जाता है, बल्कि बाद के बिंदु की अपेक्षा करते हैं जब उन्हें वास्तव में आवश्यकता होती है, जो अन्य प्रक्रियाओं के लिए प्रसंस्करण शक्ति और मेमोरी स्पेस बचाता है। उपयोगकर्ता इंटरफ़ेस घटकों को प्रारंभ करते समय यह विशेष रूप से उपयोगी है।

PureLayout कार्रवाई में

जैसा कि आप इनिशियलाइज़ेशन के अंदर देख सकते हैं, लाइन imageView.autoSetDimensions (to: CGSize (width: 128.0, height: 128.0)) एक्शन में प्योरलायआउट है। एक पंक्ति में, हम UIImageView की ऊंचाई और चौड़ाई दोनों के लिए एक सीमा निर्धारित करते हैं, और सभी आवश्यक NSLayoutConstraints विशाल फ़ंक्शन कॉल की आवश्यकता के बिना बनाए जाते हैं। यदि आप प्रोग्राम बनाने पर प्रतिबंध लगा रहे हैं, तो आप सबसे पहले इस अद्भुत पुस्तकालय से प्यार कर सकते हैं।

इस छवि को गोल करने के लिए, हम इसके कोणीय त्रिज्या को इसकी चौड़ाई या ऊँचाई से आधा पर सेट करते हैं, जो कि 64.0 अंक है। इसके अलावा, clipsToBounds प्रॉपर्टी को true सेट करें, जो छवि को बताता है कि यह उस सब कुछ को क्लिप करना चाहिए जो त्रिज्या के बाहर है जो हम सेट करते हैं।

फिर हम एक UIView बनाने के लिए आगे बढ़ते हैं जो ग्रे पेंट अवतार के पीछे दृश्य के शीर्ष के रूप में काम करेगा। इस दृश्य के लिए निम्नलिखित आलसी चर की घोषणा करें:

 lazy var upperView: UIView = { let view = UIView() view.autoSetDimension(.height, toSize: 128) view.backgroundColor = .gray return view }() 

सबव्यू जोड़ना

आगे बढ़ने से पहले, चलिए एक func addSubviews () फ़ंक्शन बनाते हैं, जो हमारे द्वारा बनाए गए विचारों (और अन्य सभी जिन्हें हम बनाने जा रहे हैं) को व्यू कंट्रोलर के रूप में जोड़ता है:

 func addSubviews() { self.view.addSubview(avatar) self.view.addSubview(upperView) } 

अब viewDidLoad (): self.addSubviews () लिए निम्न पंक्ति जोड़ें

प्रतिबंध लगाना

बस हम कितनी दूर आ गए हैं इसका अंदाजा लगाने के लिए, आइए इन दो प्रकारों पर सीमाएं निर्धारित करें। एक अन्य फ़ंक्शन बनाएं जिसे func setupConstraints() कहा जाता है और निम्नलिखित बाधाओं को सम्मिलित करें:

 func setupConstraints() { avatar.autoAlignAxis(toSuperviewAxis: .vertical) avatar.autoPinEdge(toSuperviewEdge: .top, withInset: 64.0) upperView.autoPinEdge(toSuperviewEdge: .left) upperView.autoPinEdge(toSuperviewEdge: .right) upperView.autoPinEdgesToSuperviewEdges(with: .zero, excludingEdge: .bottom) } 

अब अंदर देखें setupConstraints() viewDidLoad() कॉल setupConstraints() , निम्नानुसार: self.setupConstraints() । addSubviews() कॉलिंग के बाद इस AFTER को जोड़ें। यह अंतिम निष्कर्ष होना चाहिए:

अवतार को सबसे आगे लाएं

दुर्भाग्य से, यह वह नहीं है जो मैं प्राप्त करना चाहूंगा। जैसा कि आप देख सकते हैं, हमारा upperView अवतार के ऊपर स्थित है। यह इस तथ्य के कारण है कि हमने upperView subviews से पहले upperView रूप में एक अवतार जोड़ा, और चूंकि ये upperView किसी न किसी रूप में स्टैक पर स्थित हैं, इसलिए हमें यह परिणाम मिलता है। इसे ठीक करने के लिए, हम बस इन दो पंक्तियों को एक दूसरे के साथ बदल सकते हैं, लेकिन एक और चाल है जो मैं आपको दिखाना चाहता हूं, अर्थात्: self.view.bringSubview (toFront: avatar) ।

यह विधि अवतार को ढेर के नीचे से ऊपर तक स्थानांतरित करेगी, इसलिए उस विधि को चुनें जो आपको सबसे अच्छी लगती है। निश्चित रूप से, पठनीयता के लिए, यह बेहतर है कि जिस क्रम में वे इंटरसेक्ट करते हैं, अगर वे इंटरसेक्ट करते हैं, तो सबट्यूशन जोड़ना बेहतर होगा, यह याद रखते हुए कि पहले जोड़ा गया सब-टेस्ट स्टैक के निचले भाग में होगा, और इसलिए किसी भी अन्य इंटरसेक्टिंग व्यू के शीर्ष पर दिखाई देगा।
और यह है कि यह वास्तव में कैसे दिखना चाहिए:

खंडित नियंत्रण बनाएँ

अगला, हम एक खंडित नियंत्रण बनाएंगे, जो एक ग्रे बार है जिसमें तीन खंड हैं। दरअसल, एक खंडित नियंत्रण बनाना आसान है। निम्नलिखित कार्य करें:

 lazy var segmentedControl: UISegmentedControl = { let control = UISegmentedControl(items: ["Personal", "Social", "Resumè"]) control.autoSetDimension(.height, toSize: 32.0) control.selectedSegmentIndex = 0 control.layer.borderColor = UIColor.gray.cgColor control.tintColor = .gray return control }() 

मेरा मानना ​​है कि सब कुछ स्पष्ट है, एकमात्र अंतर यह है कि आरंभीकरण के बाद हम इसे स्ट्रिंग की एक सरणी प्रदान करते हैं, प्रत्येक पंक्ति हमारे वांछित वर्गों में से एक के शीर्षक का प्रतिनिधित्व करती है। हमने selectedSegmentIndex को 0 पर सेट selectedSegmentIndex है, जो कि आरंभिककरण के दौरान पहले खंड को चुनने / चुनने के लिए खंडित नियंत्रण को बताता है। बाकी के साथ खेलने के लिए सिर्फ एक शैली है।

अब हम जारी रखते हैं और इसे addCubviews(): self.view.addSubview(segmentedControl) फ़ंक्शन के अंत में निम्नलिखित पंक्ति डालकर एक addCubviews(): self.view.addSubview(segmentedControl) के रूप में addCubviews(): self.view.addSubview(segmentedControl) और इसकी सीमाएँ इस तरह होंगी:

  segmentedControl.autoPinEdge(toSuperviewEdge: .left, withInset: 8.0) segmentedControl.autoPinEdge(toSuperviewEdge: .right, withInset: 8.0) segmentedControl.autoPinEdge(.top, to: .bottom, of: avatar, withOffset: 16.0) 

हम खंडित नियंत्रण को बताते हैं कि हम इसे अपने सुपरवाइवे के बाईं ओर संलग्न करना चाहते हैं, हालांकि हम अंतराल को थोड़ा बढ़ाना चाहते हैं, और इसे सीधे स्क्रीन के किनारे पर संलग्न नहीं करना चाहते हैं। यदि आप ध्यान दें, मैं तथाकथित आठ-बिंदु ग्रिड का उपयोग करता हूं, जहां सभी दूरी और आकार आठ के गुणक हैं। मैं खंडित नियंत्रण के दाईं ओर वही करता हूं। अंतिम सीमा के लिए, वह कहते हैं कि 16 अंकों के अंतराल के साथ अवतार के आधार पर एक शीर्ष संलग्न करें।

func setupConstraints() में उपरोक्त सीमाएँ जोड़ने के बाद func setupConstraints() कोड को चलाएं और सुनिश्चित करें कि यह इस तरह दिखता है:

एक बटन जोड़ना

अब हम पाठ्यपुस्तक के उपयोगकर्ता इंटरफ़ेस के अंतिम भाग को पास करेंगे, जो "संपादन" बटन है। निम्नलिखित आलसी चर जोड़ें:

 lazy var editButton: UIButton = { let button = UIButton() button.setTitle("Edit", for: .normal) button.setTitleColor(.gray, for: .normal) button.layer.cornerRadius = 4.0 button.layer.borderColor = UIColor.gray.cgColor button.layer.borderWidth = 1.0 button.tintColor = .gray button.backgroundColor = .clear button.autoSetDimension(.width, toSize: 96.0) button.autoSetDimension(.height, toSize: 32.0) return button }() 

चिंता मत करो कि आरंभीकरण कितना बड़ा है, लेकिन ध्यान दें कि मैंने button.setTitle और button.setTitleColor button.setTitle और button.setTitleColor को कैसे सेट करके शीर्षक और उसका रंग सेट किया है button.setTitleColor । कुछ कारणों से, हम सीधे अपने titleLabel पहुँचकर एक बटन का शीर्षक निर्धारित नहीं कर सकते हैं, और इसका कारण यह है कि बटन के लिए अलग-अलग राज्य हैं, और कई अलग-अलग राज्यों के लिए अलग-अलग हेडर / रंग रखने में सहज होंगे।

अब बटन को बाकी घटकों की तरह एक सबव्यू के रूप में जोड़ें, और निम्न प्रतिबंध जोड़ें ताकि यह दिखाई दे कि यह कहाँ होना चाहिए:

 editButton.autoPinEdge(.top, to: .bottom, of: upperView, withOffset: 16.0) editButton.autoPinEdge(toSuperviewEdge: .right, withInset: 8.0) 

यहां हमने बटन के लिए केवल सही और ऊपरी सीमाएं निर्धारित की हैं, क्योंकि हमने इसे एक आकार दिया है, इसका विस्तार नहीं होगा और कुछ और की आवश्यकता नहीं होगी। अब अंतिम परिणाम देखने के लिए प्रोजेक्ट चलाएँ:

हाल के कुछ नोट

अभ्यास करें, जितने चाहें उतने इंटरफ़ेस तत्व जोड़ें। किसी भी एप्लिकेशन के विचार बनाएं जो आपको कठिन लगते हैं। सरल शुरुआत करें और धीरे-धीरे कठिनाई बढ़ाएं। कागज़ के एक टुकड़े पर यूआई घटकों को खींचने की कोशिश करें कि वे कैसे एक साथ फिट होते हैं।
दूसरे भाग में, मैं इस गाइड को कोड में नेविगेशन बार, टेबल व्यू और डायनामिक-आकार की सेल बनाने के लिए विस्तारित करता हूं।