SnapKit মোস্টার করুন: iOS অ্যাপের জন্য ক্লিন, প্রোগ্রাম্যাটিক কনস্ট্রেইন্ট লেখা

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

একসময় আমি ডिसাইড করলাম "মাস্টার প্রোগ্রামার" হতে হলে প্রোগ্রাম্যাটিক্যালি ভিউ কনস্ট্রাক্ট করা শিখতে হবে। একটা সমস্যা, কোডে কনস্ট্রেইন্ট লেখা একটি পেন।

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

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

SnapKit-এ একটি স্পষ্ট এবং সংক্ষিপ্ত API আছে যা কোডে কনস্ট্রেইন্ট লেখাকে খুব সহজ করে দেয়। আমি SnapKit-এ কী কী করা যায় তার কিছু বেসিক উদাহরণ দেখাব।

আমি যেগুলো কভার করব:

1. একটি সাবভিউকে এর সুপারভিউতে লে আউট করা
2. সাবভিউগুলোকে একে অপরের সাপেক্ষে লে আউট করা
3. কনস্ট্রেইন্ট আপডেট এবং অ্যানিমেট করা

শুরু করা যাক

আপনার প্রজেক্টে SnapKit ডাউনলোড করুন নিশ্চিত করুন। আমি থার্ড পার্টি লাইব্রেরির জন্য CocoaPods ব্যবহার করি।

আপনার Podfile-এ pod 'SnapKit' যোগ করুন এবং 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)}

এটি সাবভিউর টপ, বটম, লেফ্ট, এবং রাইট এজকে এর সুপারভিউর সংশ্লিষ্ট এজের সাথে ০ কনস্ট্যান্ট দিয়ে কনস্ট্রেইন্ট সেট করবে।

লক্ষ্য করুন, আমি সাবভিউকে সুপারভিউতে অ্যাড করার পরই সাবভিউর কনস্ট্রেইন্ট সেট করলাম। যদি আপনি সুপারভিউতে অ্যাড হওয়ার আগে ভিউর কনস্ট্রেইন্ট লিখেন, তবে ভিউ লোড হওয়ার সময় ফেটাল রানটাইম এরর থ্রো করবে।

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 subview1-এর left-কে view-এর left-এর সাথে সেট করে। আমি অন্যথা স্পেসিফাই না করলে SnapKit স্বয়ংক্রিয়ভাবে আমার সেট করা কনস্ট্রেইন্ট ম্যাচ করে দেয়।

subview2-এর left কনস্ট্রেইন্টের জন্য, আমি এটাকে subview1-এর right এজে সেট করতে চাই। যদি আমি make.left.equalTo(subview1) লিখতাম, SnapKit subview2-এর left এজকে subview1-এর left এজে সেট করত। বদলে, আমি subview1-এর right এজ ব্যবহার করি যা আমি subview1.snp.right লিখে পাই।

আমি যেকোনো ভিউর লেআউট কনস্ট্রেইন্ট এক্সেস করতে পারি উপরে দেখানো মতো snp যোগ করে।

এখন যেহেতু subview2, subview1-এর ডানে আছে, আমি অফসেট যোগ করে তাদের মাঝে কিছু স্পেস তৈরি করব।

subview2.snp.makeConstraints { (make) in make.width.height.equalTo(subview1) make.left.equalTo(subview1.snp.right).offset(50)}

যেকোনো equalTo()-র শেষে একটি অফসেট অ্যাপেন্ড করা যাবে সেই কনস্ট্রেইন্টের কনস্ট্যান্ট পরিবর্তন করতে। এখন subview2-এর left কনস্ট্রেইন্টে ৫০ কনস্ট্যান্ট থাকবে।

কনস্ট্রেইন্ট আপডেট এবং অ্যানিমেট করা

আপনার অ্যাপ যদি #NextBigThing হতে চায় তবে সব জানেন আপনাকে একটু ফ্লেয়ার যোগ করতে হবে! SnapKit ডাইনামিক ভিউ তৈরি করার জন্য সহজে কনস্ট্রেইন্ট আপডেট করার উপায় দেয়।

SnapKit-এ কনস্ট্রেইন্ট আপডেট করা নতুন যোগ করার সাথে почти একই। এখানে, আমি পূর্বের উদাহরণের subview1-এর কনস্ট্রেইন্ট আপডেট করব left এজ কনস্ট্রেইন্টের কনস্ট্যান্ট ০ থেকে ৫০ করে:

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() শুধু এক্সিস্টিং কনস্ট্রেইন্ট আপডেট করতে পারে। এমন কনস্ট্রেইন্ট আপডেট করার চেষ্টা করলে যা ইতিমধ্যে inplace নয়, ফেটাল রানটাইম এরর হবে।

আপনি যদি আপনার সাবভিউতে নতুন কনস্ট্রেইন্ট যোগ করতে চান, তবে remakeConstraints() ব্যবহার করুন। remakeConstraints() আপনার সেট করা সাবভিউর যেকোনো এক্সিস্টিং কনস্ট্রেইন্ট রিমুভ করবে এবং নতুন যোগ করতে দেবে।

আপনি deactivate()ও ব্যবহার করতে পারেন একটি কনস্ট্রেইন্ট রিমুভ করতে। নিচে আমি একটি কনস্ট্রেইন্ট তৈরি, সেট, এবং তারপর deactivate() ব্যবহার করে রিমুভ করলাম:

var constraint: Constraint!let subview = UIView()

subview.snp.makeConstraints { (make) in constraint = make.height.equalTo(100).constraint}

constraint.deactivate()

আপনি অ্যানিমেশন ব্লকের ভিতরে ডি-অ্যাক্টিভেট করে কনস্ট্রেইন্ট রিমুভালও অ্যানিমেট করতে পারেন।

তাহলে এখন আপনি প্রোগ্রাম্যাটিক্যালি কনস্ট্রেইন্ট লেখার মাস্টার। Storyboards এখন জোকের মতো লাগছে এবং সেখানে ফিরে যাওয়ার কোনো কারণ নেই, ঠিক না?

নয়, আসলেই নয়। Storyboards এবং nibs এখনও ভিউ কন্ট্রোলার একসাথে রাখার সবচেয়ে দ্রুত উপায়, এবং যদি আপনি নন-ডেভেলপারদের সাথে কাজ করেন, তবে তারা বেটা ভার্সন পাঠানো ছাড়া অ্যাপ কীভাবে দেখাবে তা দেখানোর সেরা উপায়।

ব্যক্তিগতভাবে, আমি দুটোই ব্যবহার করি। আমার বানানো শেষ অ্যাপে, আমি SnapKit-এ কোডে কনস্ট্রেইন্ট যোগ করেছিলাম এবং Storyboards ও nibs-এ Auto Layout ব্যবহার করেছিলাম, কখনো কখনো একই ভিউতে। শেষে, আপনাকে ডिसাইড করতে হবে কোনটি আপনার বানানো ভিউর জন্য সেরা কাজ করে।

পড়ার জন্য ধন্যবাদ! আপনি এই গল্প পছন্দ করলে টুইটারে ফলো করুন যেখানে আমি প্রোডাক্ট ম্যানেজমেন্ট, ইঞ্জিনিয়ারিং, এবং ডিজাইন সম্পর্কে আর্টিকেল পোস্ট করি।