Computer >> कंप्यूटर >  >> स्मार्टफोन्स >> iPhone

आईओएस ऐप्स के लिए प्रोग्रामेटिक रूप से बाधाओं को लिखने के लिए स्नैपकिट का उपयोग कैसे करें

जब मैंने पहली बार 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 में क्या किया जा सकता है, इसके कुछ मूल उदाहरणों के माध्यम से जा रहा हूँ।

मैं खत्म हो जाऊंगा:

  1. इसके पर्यवेक्षण में एक सबव्यू तैयार करना
  2. एक दूसरे के सापेक्ष साक्षात्कार प्रस्तुत करना
  3. अपडेट और एनिमेट करने की कमी

आरंभ करना

सुनिश्चित करें कि आपने अपने प्रोजेक्ट में 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 के स्थिरांक के साथ इसके पर्यवेक्षण के संगत किनारों पर सेट करेगा।

आईओएस ऐप्स के लिए प्रोग्रामेटिक रूप से बाधाओं को लिखने के लिए स्नैपकिट का उपयोग कैसे करें
सबव्यू को इसके सुपरव्यू के किनारों पर 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 क्लीनर कोड लिखने में मदद करता है।

एक दूसरे के सापेक्ष सबव्यू का निर्धारण

एक ही दृश्य में कई सबव्यू जोड़ते समय, यह संभावना है कि आप एक दूसरे के संबंध में सबव्यू को लेआउट करना चाहेंगे। इस उदाहरण में, मैं:

  1. subview1जोड़ें और इसे बाएं किनारे पर इसके पर्यवेक्षण के लिए बाध्य करें
  2. 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 . जोड़कर दृश्य के लेआउट की किसी भी बाधा तक पहुंच सकता हूं जैसा कि ऊपर देखा गया है।

आईओएस ऐप्स के लिए प्रोग्रामेटिक रूप से बाधाओं को लिखने के लिए स्नैपकिट का उपयोग कैसे करें
सबव्यू 2 सबव्यू 1 के दाईं ओर 0 के स्थिरांक के साथ सीमित है

अब जबकि मेरे पास 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 का एक स्थिरांक होगा बाधा।

आईओएस ऐप्स के लिए प्रोग्रामेटिक रूप से बाधाओं को लिखने के लिए स्नैपकिट का उपयोग कैसे करें
सबव्यू 2 अब 50 के स्थिरांक के साथ 1 सबव्यू के लिए विवश है

अपडेट करना और एनिमेट करना बाधाएं

अगर आप चाहते हैं कि आपका ऐप #NextBigThing हो, तो हर कोई जानता है कि आपको थोड़ा सा स्वभाव जोड़ना होगा! SnapKit गतिशील दृश्य बनाने के लिए बाधाओं को आसानी से अपडेट करने का एक तरीका प्रदान करता है।

SnapKit के साथ एक बाधा को अपडेट करना लगभग एक नया जोड़ने के समान है। यहां, मैं subview1 . के लिए बाधा को अपडेट करूंगा left . को बदलकर पिछले उदाहरण से धार बाधा का 0 से 50 तक स्थिरांक:

subview1.snp.updateConstraints { (make) in   make.left.equalTo(50)}

और बस! कोड ब्लॉक चलने पर मेरा सबव्यू नई बाधाओं के लिए अपडेट हो जाएगा।

आईओएस ऐप्स के लिए प्रोग्रामेटिक रूप से बाधाओं को लिखने के लिए स्नैपकिट का उपयोग कैसे करें
बटन पर क्लिक करने से सबव्यू1 की कमियां अपडेट हो जाती हैं

आपने शायद गौर किया है कि 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 के साथ कोड में और स्टोरीबोर्ड और निब्स पर ऑटो लेआउट का उपयोग करते हुए, कभी-कभी एक ही दृश्य पर बाधाओं को जोड़ा। अंत में, आपको यह तय करना होगा कि आपके द्वारा बनाए जा रहे दृश्य के लिए कौन सा सबसे अच्छा काम करता है।

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


  1. ऐसे ऐप्स कैसे देखें जिन्हें आपने कभी Android और iOS पर डाउनलोड किया है

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

  1. आईटी पेशेवरों के लिए 10 सर्वश्रेष्ठ iOS ऐप्स

    ऐप डेवलपमेंट एक ऐसी चीज है जिसे हर कोई अपनाता है! आईटी उद्योग अलग नहीं है! एक समय हुआ करता था जब आईटी पेशेवरों को या तो अपने भारी सिस्टम को हर जगह ले जाना पड़ता था या चलते समय अपना काम छोड़ देना पड़ता था! हालाँकि, अब चीजों में काफी सुधार हुआ है और स्मार्टफ़ोन की शुरुआत के साथ लगभग हर क्षेत्र में हमा

  1. iOS 13 में एनएफसी टैग का उपयोग, पढ़ने और लिखने का तरीका

    स्मार्टफोन के नवीनतम संस्करणों के साथ, एनएफसी वह सुविधा है जो एक फोन से दूसरे फोन में जानकारी स्थानांतरित करने में मदद कर सकती है। एनएफसी नियर फील्ड कम्युनिकेशन का संक्षिप्त नाम है। यह एक वायरलेस कनेक्शन है जिसका उपयोग स्मार्टफोन से जानकारी स्थानांतरित करने के लिए किया जा सकता है। यह सुविधा उत्पादो