iOS অ্যাপের জন্য প্রোগ্রামগতভাবে সীমাবদ্ধতা লিখতে স্ন্যাপকিট কীভাবে ব্যবহার করবেন

যখন আমি প্রথম এক্সকোড দিয়ে অ্যাপ তৈরি করা শুরু করি, তখন আমি ভেবেছিলাম স্টোরিবোর্ডগুলো জাদু। জায়গায় সাবভিউ টেনে আনা এবং ড্রপ করা এত সহজ, আমি কখনই বুঝতে পারিনি যে লোকেরা কীভাবে তাদের ছাড়া ভিউ তৈরি করে।

অবশেষে, আমি সিদ্ধান্ত নিয়েছি যে একজন "মাস্টার প্রোগ্রামার" হওয়ার জন্য, আমাকে কীভাবে প্রোগ্রামগতভাবে ভিউ তৈরি করতে হয় তা শিখতে হবে। একটি সমস্যা, কোডে সীমাবদ্ধতা লেখা একটি ব্যথা।

let horizontalConstraint = NSLayoutConstraint(   item: newView,    attribute: NSLayoutAttribute.centerX,    relatedBy: NSLayoutRelation.equal,    toItem: view,    attribute: NSLayoutAttribute.centerX, multiplier: 1, constant: 0)

এটি একটি অনুভূমিক সীমাবদ্ধতা যা তার তত্ত্বাবধানের X অক্ষের উপর একটি সাবভিউ কেন্দ্রীভূত করবে। পড়া এত সহজ নয় যে লেখার কথা উল্লেখ না করার জন্য প্রতিটি সীমাবদ্ধতা দ্রুত পুরানো হয়ে যায়। তবুও, আমি স্টোরিবোর্ডগুলিকে খাদ করতে চেয়েছিলাম তাই আমি একটি বিকল্প অনুসন্ধান করেছি। তখনই আমি স্ন্যাপকিট খুঁজে পাই।

SnapKit এর একটি পরিষ্কার এবং সংক্ষিপ্ত API রয়েছে যা কোডে লেখার সীমাবদ্ধতাকে একটি হাওয়ায় পরিণত করে। SnapKit-এ কী করা যায় তার কয়েকটি সত্যিকারের মৌলিক উদাহরণের মধ্য দিয়ে যেতে যাচ্ছি।

আমি চলে যাব:

1. এর তত্ত্বাবধানে একটি সাবভিউ সাজানো
2. পরস্পরের সাপেক্ষে সাবভিউ সাজানো
3. আপডেট এবং অ্যানিমেটিং সীমাবদ্ধতা

শুরু করা

নিশ্চিত করুন যে আপনি আপনার প্রকল্পে SnapKit ডাউনলোড করেছেন। আমি তৃতীয় পক্ষের লাইব্রেরির জন্য কোকোপড ব্যবহার করি।

pod 'SnapKit' যোগ করুন আপনার Podfile এ এবং pod install চালান . এখন import SnapKit লিখুন আপনি যে ফাইলটিতে এটি ব্যবহার করতে চান তার শীর্ষে৷

এর সুপারভিউতে একটি সাবভিউ সাজানো

প্রথমে আমি এর তত্ত্বাবধানের প্রান্তে একটি সাবভিউ পিন করব:

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 ক্লিনার কোড লিখতে সাহায্য করে।

পরস্পরের সাপেক্ষে সাবভিউ লেআউট করা

একটি একক ভিউতে অনেকগুলি সাবভিউ যোগ করার সময়, সম্ভবত আপনি একে অপরের সাথে সাবভিউ লেআউট করতে চাইবেন। এই উদাহরণে, আমি করব:

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 লিখে ধরি .

আমি 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 হতে চান সবাই জানেন যে আপনাকে একটু ফ্লেয়ার যোগ করতে হবে! স্ন্যাপকিট গতিশীল দৃশ্য তৈরি করতে সীমাবদ্ধতাগুলিকে সহজে আপডেট করার একটি উপায় প্রদান করে৷

স্ন্যাপকিটের সাথে একটি সীমাবদ্ধতা আপডেট করা একটি নতুন যোগ করার মতো প্রায় অভিন্ন৷ এখানে, আমি 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-এর কোডে এবং স্টোরিবোর্ড এবং নিব-এ অটো লেআউট ব্যবহার করে, কখনও কখনও একই দৃশ্যে উভয় ক্ষেত্রেই সীমাবদ্ধতা যোগ করেছি। শেষ পর্যন্ত, আপনি যে ভিউ তৈরি করছেন তার জন্য কোনটি সবচেয়ে ভালো কাজ করে তা আপনাকে সিদ্ধান্ত নিতে হবে।

পড়ার জন্য অনেক ধন্যবাদ! আপনি যদি এই গল্পটি পছন্দ করেন তবে আমাকে টুইটারে অনুসরণ করুন যেখানে আমি পণ্য পরিচালনা, প্রকৌশল এবং ডিজাইন সম্পর্কে নিবন্ধ পোস্ট করি৷