जब मैंने पहली बार Xcode के साथ ऐप्स बनाना शुरू किया, तो मुझे लगा कि Storyboards जादू है। सबव्यूज़ को जगह में खींचना और छोड़ना इतना आसान था, मैं कभी नहीं समझ पाया कि लोग उनके बिना कैसे व्यू बनाते हैं।
आखिरकार, मैंने फैसला किया कि "मास्टर प्रोग्रामर" बनने के लिए, मुझे सीखना होगा कि प्रोग्रामेटिक रूप से विचारों का निर्माण कैसे किया जाए। एक समस्या, कोड में बाधाओं को लिखना एक दर्द है।
let horizontalConstraint = NSLayoutConstraint( item: newView, attribute: NSLayoutAttribute.centerX, relatedBy: NSLayoutRelation.equal, toItem: view, attribute: NSLayoutAttribute.centerX, multiplier: 1, constant: 0)यह एक क्षैतिज बाधा है जो अपने पर्यवेक्षण के एक्स अक्ष पर एक सबव्यू को केन्द्रित करेगी। पढ़ने में इतना आसान नहीं है कि लिखने का जिक्र न हो कि हर बाधा के लिए तेजी से पुराना हो जाता है। फिर भी, मैं स्टोरीबोर्ड को छोड़ना चाहता था इसलिए मैंने एक विकल्प खोजा। तभी मुझे SnapKit मिला।
SnapKit में एक स्पष्ट और संक्षिप्त API है जो कोड में लेखन बाधाओं को आसान बनाता है। मैं SnapKit में क्या किया जा सकता है, इसके कुछ मूल उदाहरणों के माध्यम से जा रहा हूँ।
मैं खत्म हो जाऊंगा:
- इसके पर्यवेक्षण में एक सबव्यू तैयार करना
- एक दूसरे के सापेक्ष साक्षात्कार प्रस्तुत करना
- अपडेट और एनिमेट करने की कमी
आरंभ करना
सुनिश्चित करें कि आपने अपने प्रोजेक्ट में SnapKit डाउनलोड किया है। मैं तृतीय पक्ष पुस्तकालयों के लिए Cocoapods का उपयोग करता हूं।
pod 'SnapKit'जोड़ें अपने पॉडफाइल पर जाएं और pod install चलाएं . अब import SnapKit write लिखें फ़ाइल के शीर्ष पर आप इसका उपयोग करना चाहते हैं।
इसके सुपरव्यू में एक सबव्यू तैयार करना
सबसे पहले मैं इसके पर्यवेक्षण के किनारों पर एक सबव्यू पिन करूंगा:
let subview = UIView()view.addSubview(subview)subview.snp.makeConstraints { (make) in make.top.equalTo(view) make.bottom.equalTo(view) make.left.equalTo(view) make.right.equalTo(view)}यह सबव्यू के ऊपर, नीचे, बाएँ और दाएँ किनारों के लिए बाधाओं को 0 के स्थिरांक के साथ इसके पर्यवेक्षण के संगत किनारों पर सेट करेगा।
ध्यान दें कि मैं सबव्यू की बाधाओं को सेट करने से पहले पर्यवेक्षण में सबव्यू जोड़ता हूं। यदि आप उन दृश्यों के लिए बाधाएं लिखते हैं जो पहले से ही पर्यवेक्षण में नहीं जोड़े गए हैं, तो दृश्य लोड होने पर यह एक घातक रनटाइम त्रुटि उत्पन्न करेगा।
SnapKit सिंटैक्स पहले से ही मानक पुस्तकालय की तुलना में बहुत अधिक पठनीय है लेकिन इसे छोटा किया जा सकता है। SnapKit अपने पर्यवेक्षण के किनारों पर एक दृश्य को बाधित करने के लिए और भी अधिक संक्षिप्त तरीका प्रदान करता है:
let subview = UIView()view.addSubview(subview)subview.snp.makeConstraints { (make) in make.top.bottom.left.right.equalTo(view)}यह मेरे सबव्यू को ऊपर दिए गए कोड की तरह ही लेआउट करेगा, लेकिन चार के बजाय एक लाइन के साथ।
मैं अपने सबव्यू के आकार को भी सीमित कर सकता हूं। नीचे, मैं सबव्यू की ऊंचाई और चौड़ाई सेट करने जा रहा हूं और इसे इसके पर्यवेक्षण के केंद्र में सेट करूंगा:
subview.snp.makeConstraints { (make) in make.width.equalTo(200) make.height.equalTo(200) make.centerX.equalTo(view) make.centerY.equalTo(view)}
वह उदाहरण बहुत आसान है, लेकिन मैंने खुद को बहुत दोहराया। समान मान वाले बाधाओं को सेट करते समय, SnapKit मुझे इस तरह से एक साथ श्रृंखलाबद्ध करने की अनुमति देता है:
subview.snp.makeConstraints { (make) in make.width.height.equalTo(200) make.centerX.centerY.equalTo(view)}इस ब्लॉक का परिणाम ऊपर वाले के समान ही बाधाओं में होगा। एक और तरीका है कि SnapKit क्लीनर कोड लिखने में मदद करता है।
एक दूसरे के सापेक्ष सबव्यू का निर्धारण
एक ही दृश्य में कई सबव्यू जोड़ते समय, यह संभावना है कि आप एक दूसरे के संबंध में सबव्यू को लेआउट करना चाहेंगे। इस उदाहरण में, मैं:
subview1जोड़ें और इसे बाएं किनारे पर इसके पर्यवेक्षण के लिए बाध्य करेंsubview2जोड़ें और इसेsubview1. के दाहिने किनारे पर सीमित करें
let subview1 = UIView()let subview2 = UIView()view.addSubview(subview1)view.addSubview(subview2)subview1.snp.makeConstraints { (make) in make.width.height.equalTo(100) make.left.equalTo(view)}subview2.snp.makeConstraints { (make) in make.width.height.equalTo(subview1) make.left.equalTo(subview1.snp.right)}
अब तक, मैं चाहता हूं कि मेरी बाधाएं सापेक्ष दृश्य के लिए संबंधित बाधा के बराबर हों। उदाहरण के लिए, make.left.equalTo(view) . में SnapKit left सेट करता है का subview1 करने के लिए left का view . अगर मैं अन्यथा निर्दिष्ट नहीं करता तो SnapKit स्वचालित रूप से मेरे द्वारा निर्धारित बाधा से मेल खाएगा।
left के लिए subview2 . की बाधा , मैं इसे right . पर सेट करना चाहता हूं subview1 . के किनारे . अगर मैंने make.left.equalTo(subview1) लिखा होता SnapKit left सेट करेगा subview2 के किनारे करने के लिए left subview1 . के किनारे . इसके बजाय, मैं right . का उपयोग करता हूं subview1 . के किनारे जिसे मैं subview1.snp.right writing लिखकर हड़प लेता हूं ।
मैं snp . जोड़कर दृश्य के लेआउट की किसी भी बाधा तक पहुंच सकता हूं जैसा कि ऊपर देखा गया है।
अब जबकि मेरे पास subview2 है subview1 . के दाईं ओर , मैं एक ऑफ़सेट . जोड़कर उनके बीच कुछ जगह बनाऊंगा करने के लिए subview2 ।
subview2.snp.makeConstraints { (make) in make.width.height.equalTo(subview1) make.left.equalTo(subview1.snp.right).offset(50)}
किसी भी equalTo() . के अंत में ऑफ़सेट जोड़ा जा सकता है उस बाधा के स्थिरांक को बदलने के लिए। अब subview2 इसके left . पर 50 का एक स्थिरांक होगा बाधा।
अपडेट करना और एनिमेट करना बाधाएं
अगर आप चाहते हैं कि आपका ऐप #NextBigThing हो, तो हर कोई जानता है कि आपको थोड़ा सा स्वभाव जोड़ना होगा! SnapKit गतिशील दृश्य बनाने के लिए बाधाओं को आसानी से अपडेट करने का एक तरीका प्रदान करता है।
SnapKit के साथ एक बाधा को अपडेट करना लगभग एक नया जोड़ने के समान है। यहां, मैं subview1 . के लिए बाधा को अपडेट करूंगा left . को बदलकर पिछले उदाहरण से धार बाधा का 0 से 50 तक स्थिरांक:
subview1.snp.updateConstraints { (make) in make.left.equalTo(50)}और बस! कोड ब्लॉक चलने पर मेरा सबव्यू नई बाधाओं के लिए अपडेट हो जाएगा।
आपने शायद गौर किया है कि subview2 जब मैंने subview1 को अपडेट किया तो स्थानांतरित हो गया भले ही मैंने इसकी बाधाओं को अपडेट नहीं किया।subview2 subview1 . के दाहिने किनारे तक सीमित है . जब subview1 स्थानांतरित हो जाता है, subview2 subview1 . के साथ बाईं बाधा का सम्मान करना जारी रखेगा ।
अब मैं संक्रमण को सुचारू करने के लिए एक एनीमेशन जोड़ूंगा। यदि आपने पहले कभी किसी दृश्य को एनिमेट किया है, तो यह सिंटैक्स परिचित होगा:
UIView.animate(withDuration: 0.3) { subview1.snp.updateConstraints { (make) in make.left.equalTo(50) } self.view.layoutIfNeeded()}
मेरी बाधाओं पर अपडेट को एनिमेट करते समय, मुझे layoutIfNeeded() . पर कॉल करने की आवश्यकता है सबव्यू के माता-पिता पर। अगर मैं एक बार में एक से अधिक दृश्यों को एनिमेट कर रहा हूं, तो मुझे layoutIfNeeded() . पर कॉल करना होगा सबव्यू के निकटतम सामान्य पर्यवेक्षण पर।
updateConstraints() केवल मौजूदा बाधाओं को अपडेट कर सकता है। एक बाधा को अद्यतन करने का प्रयास जो पहले से मौजूद नहीं है, परिणामस्वरूप एक घातक रन टाइम त्रुटि होगी।
यदि आप अपने सबव्यू में नई बाधाएं जोड़ना चाहते हैं, तो remakeConstraints() . का उपयोग करें . remakeConstraints() आपके द्वारा उस सबव्यू पर सेट की गई मौजूदा बाधाओं को हटा देगा और आपको नए जोड़ने की अनुमति देता है।
आप deactivate() . का भी उपयोग कर सकते हैं एक बाधा को दूर करने के लिए। नीचे मैं deactivate() . का उपयोग करके एक बाधा बनाता हूं, सेट करता हूं और उन्हें हटाता हूं :
var constraint: Constraint!let subview = UIView()subview.snp.makeConstraints { (make) in constraint = make.height.equalTo(100).constraint}constraint.deactivate()आप किसी ऐनिमेशन ब्लॉक के अंदर किसी बाधा को निष्क्रिय करके उसे हटाने को चेतन भी कर सकते हैं।
तो अब आप प्रोग्रामेटिक रूप से बाधाओं को लिखने में माहिर हैं। स्टोरीबोर्ड अब एक मजाक की तरह लगते हैं और उनके पास वापस जाने का कोई कारण नहीं है, है ना?
ज़रुरी नहीं। स्टोरीबोर्ड और निब अभी भी एक दृश्य नियंत्रक को एक साथ रखने का सबसे तेज़ तरीका है, और, यदि आप गैर-डेवलपर्स के साथ काम कर रहे हैं, तो वे यह दिखाने का सबसे अच्छा तरीका हैं कि बीटा संस्करण भेजे बिना ऐप कैसा दिखेगा।
व्यक्तिगत रूप से, मैं दोनों का उपयोग करता हूं। मेरे द्वारा बनाए गए पिछले ऐप में, मैंने SnapKit के साथ कोड में और स्टोरीबोर्ड और निब्स पर ऑटो लेआउट का उपयोग करते हुए, कभी-कभी एक ही दृश्य पर बाधाओं को जोड़ा। अंत में, आपको यह तय करना होगा कि आपके द्वारा बनाए जा रहे दृश्य के लिए कौन सा सबसे अच्छा काम करता है।
पढ़ने के लिए बहुत-बहुत धन्यवाद! अगर आपको यह कहानी पसंद आई हो, तो मुझे ट्विटर पर फॉलो करें जहां मैं उत्पाद प्रबंधन, इंजीनियरिंग और डिजाइन के बारे में लेख पोस्ट करता हूं।