Swift এবং AutoLayout দিয়ে Spotify-ইনস্পায়ার্ড iOS অ্যাপ তৈরি করুন

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

এটি Spotify-এর মোবাইল অ্যাপের আসল হোম স্ক্রিন। এই ধরনের লেআউট অর্জন করতে, আমরা UICollectionView ব্যবহার করব, এবং আমরা TabBarControllerও ব্যবহার করতে পারি ট্যাব নেভিগেটর তৈরি করতে।

বেসিক রিকোয়ারমেন্ট: প্রথমে নিশ্চিত করুন আপনার কাছে Xcode ১০+ এবং Swift ৪+ ইনস্টলড আছে।

Xcode ব্যবহার করে একটি নতুন Xcode প্রজেক্ট তৈরি করে শুরু করা যাক:

এবং ViewController.swift-এ আমাদের প্রথম কাজ হলো সুপারক্লাসকে UICollectionViewController-এ পরিবর্তন করা UIViewController-এর বদলে কারণ আমাদের ক্লাস collectionView-এর ওপর ভিত্তি করবে।

// // ViewController.swift // spotifyAutoLayout // // Created by admin on 10/31/19. // Copyright © 2019 Said Hayani. All rights reserved. // import UIKit class ViewController: UICollectionViewController { override func viewDidLoad() { super.viewDidLoad() collectionView.backgroundColor = .purple // Do any additional setup after loading the view. } } 

আপনি যদি অ্যাপটি রান করার চেষ্টা করেন, বিল্ড ফেল করবে। AppDelegate.swift ফাইলে didFinishLaunchingWithOptions ফাংশনের ভিতরে এই কোডের টুকরোটি return স্টেটমেন্টের আগে যোগ করতে হবে:

 let layout = UICollectionViewFlowLayout() window = UIWindow() window?.rootViewController = ViewController(collectionViewLayout: layout)

এবং কোডটি এইভাবে দেখাবে:

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool { // Override point for customization after application launch. let layout = UICollectionViewFlowLayout() window = UIWindow() window?.rootViewController = ViewController(collectionViewLayout: layout) return true }

এখন আপনাকে অ্যাপটি রান করতে পারা উচিত এবং backgroundColor purple-এ পরিবর্তিত হয়ে যাবে:

পরবর্তী ধাপ হলো লেআউট বিতরণ করা এবং সেকশনগুলোর মধ্যে স্পেস সমানভাবে ভাগ করা।

আমাদের CollectionView-এর মেথডগুলো ডিফাইন করা যাক।

স্টেপগুলো:

• ইউনিক আইডেন্টিফায়ার দিয়ে একটি রিয়ুজেবল সেল রেজিস্টার করুন
• সেকশনে আইটেমের সংখ্যা ডিফাইন করুন
• রেজিস্টার করা সেলটি ব্যবহার করুন  

CollectionView-এর কিছু মেথড ব্যবহার করার জন্য আমাদের সবসময় UICollectionViewDelegateFlowLayout কনফর্ম করতে হবে সুপারক্লাস হিসেবে এবং মেথডগুলোর অটোকমপ্লিট পেতে। তাহলে সেল রেজিস্টার করার সাথে শুরু করা যাক।

ViewDidLoad()-এ আমরা collectionView.register() মেথড কল করি রিয়ুজেবল সেল রেজিস্টার করতে:

 collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: cellId)

তারপর numberOfItemsInSection ব্যবহার করে collectionView-এ কতগুলো সেল থাকবে সেটি ডিফাইন করি।  ফিলহাল আমাদের শুধু ৫টি আইটেম দরকার:

 override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { return 5 }

পরবর্তী ধাপ হলো cellForItemAt ব্যবহার করে রিয়ুজেবল সেল ডিফাইন করা যা UICollectionViewCell রিটার্ন করবে এবং একটি ইউনিক আইডি থাকবে cellId নামে। কোডটি এইভাবে দেখাবে:

 override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath) cell.backgroundColor = .red return cell }

পূর্ণ কোডটি এইভাবে দেখাবে:

import UIKit class ViewController: UICollectionViewController, UICollectionViewDelegateFlowLayout { let cellId : String = "cellId" override func viewDidLoad() { super.viewDidLoad() collectionView.backgroundColor = .purple collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: cellId) } override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { return 5 } override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath) cell.backgroundColor = .red return cell } }

আপনাকে ৫টি আইটেম লাল ব্যাকগ্রাউন্ডসহ স্ক্রিনে দেখতে পাওয়া উচিত:

সেলগুলোর কাস্টম width এবং height যোগ করুন

এখন আমাদের সেলগুলো সঠিক অর্ডারে রাখতে হবে এবং সেগুলোকে একটি width এবং height দিতে হবে। প্রতিটি সেল স্ক্রিনের width-কে নিজস্ব width- হিসেবে নেবে।

আমরা লাকি যেন sizeForItemAt মেথড আছে যাতে আমরা সেলগুলোর কাস্টম width এবং height দিতে পারি। এটি একটি মেথড যেটি CGSize টাইপ রিটার্ন করা উচিত:

 func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize { let width = view.frame.width let height = CGFloat(200) return CGSize(width: width, height: height) }

সেজন্য আমরা Cell-কে স্ক্রিনের width দিয়েছি view.frame.width ব্যবহার করে এবং একটি কাস্টম height যা CGFloat টাইপ।

এখন আপনি সিমুলেটরে নিচের ফলাফলটি দেখতে পারেন :

সবকিছু এখন পর্যন্ত ভালো লাগছে। এইবার একটি কাস্টম সেল তৈরি করি যা রিয়ুজেবল হবে। CustomCell নামে একটি নতুন Swift ফাইল তৈরি করুন:

CustomCell.swift নিচের মতো দেখাবে:

 import UIKit class CustomCell: UICollectionViewCell { override init(frame: CGRect) { super.init(frame: frame) } required init?(coder aDecoder: NSCoder) { fatalError("init(coder:) has not been implemented") } } 

এখন আমাদের যে দুটি মেথড মডিফাই করতে হবে রিয়ুজেবল সেল সাপোর্ট করার জন্য, সেগুলো হলো collectionView.register এবং cellForItemAt.  প্রথমে রেজিস্টার মেথডটি মডিফাই করি। UICollectionViewCell.self কে CustomCell-এ রিপ্লেস করুন:

 collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: cellId) 

এরপর cellForItemAt-কে CustomCell-এ কাস্ট করতে হবে নিচের মতো:

 let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath) as! CustomCell

আপনি যদি অ্যাপটি রান করেন, সম্ভবত আপনি কোনো পরিবর্তন লক্ষ্য করবেন না, তাই CustomCell-এ একটি ব্যাকগ্রাউন্ড কালার দিন backgroundColor = .yellow। cellForItemAt-এ cell.backgroundColor = .red লাইনটি রিমুভ করতে ভুলবেন না। আপনি ব্যাকগ্রাউন্ড কালার ইয়েলোতে পরিবর্তিত হয়েছে দেখবেন?

এখন CustomCell-এ কিছু মসলা যোগ করার সময় :D

আপনি যদি Spotify হোম স্ক্রিনটি দেখেন, প্রতিটি সেকশন যা আমাদের উদাহরণে একটি CustomCell সেকশন টাইটেল, সাব সেলস, এবং হরিজন্টাল আছে:

একটি সেকশন টাইটেল যোগ করুন

সেলে একটি টাইটেল লেবেল যোগ করা যাক। CutomCell ক্লাসের ভিতরে titleLabel এলিমেন্ট তৈরি করুন:

let titleLabel: UILabel = { let lb = UILabel() lb.text = "Section Title" lb.font = UIFont.boldSystemFont(ofSize: 14) lb.font = UIFont.boldSystemFont(ofSize: 14) return lb }()

তারপর init() ব্লকের ভিতরে এলিমেন্টটি ভিউতে যোগ করুন:

addSubview(titleLabel)

আপনি যদি অ্যাপটি রান করেন, আপনি কোনো পরিবর্তন দেখবেন না, এবং এর কারণ হলো আমরা এলিমেন্টে কোনো কনস্ট্রেইন্ট দিয়ে নাই। তাহলে কিছু কনস্ট্রেইন্ট যোগ করা যাক – এই প্রোপার্টিটি              lb.translatesAutoresizingMaskIntoConstraints = false titleLabel-এ যোগ করুন যাতে এলিমেন্টে কনস্ট্রেইন্ট অ্যাপ্লাই করা যায়:

titleLabel-কে ভিউতে যোগ করার পর, আমরা কনস্ট্রেইন্ট ডিফাইন করি:

 addSubview(titleLabel) titleLabel.topAnchor.constraint(equalTo: topAnchor, constant: 8).isActive = truetitleLabel.leftAnchor.constraint(equalTo: leftAnchor,constant: 8 ).isActive = true

সবসময় নিশ্চিত করুন .isActive = true প্রোপার্টিটি আছে — এটা না থাকলে কনস্ট্রেইন্ট কাজ করবে না!

পরবর্তী অংশে যাওয়ার আগে, প্রথমে স্ক্রিনের ব্যাকগ্রাউন্ড কালার ব্ল্যাক করি এবং সেলের ইয়েলো কালারও রিমুভ করি:

এখন বড় অংশটি আসছে: প্রতিটি সেলে সাব সেলস রাখা। এটি অর্জন করতে আমরা CustomCell-এ একটি CollectionView যোগ করব।

UICollectionViewCell-এ একটি CollectionView যোগ করতে, আমাদের CustomCell-এ সুপারক্লাস হিসেবে UICollectionViewDelegate, UICollectionViewDelegateFlowLayout, এবং UICollectionViewDataSource প্রোপার্টিগুলো যোগ করতে হবে।

যেকোনো সিম্পল ভিউর মত collectionView এলিমেন্টটি তৈরি করা যাক:

 let collectionView : UICollectionView = { // init the layout let layout = UICollectionViewFlowLayout() // set the direction to be horizontal layout.scrollDirection = .horizontal // the instance of collectionView let cv = UICollectionView(frame: .zero, collectionViewLayout: layout) // Activate constaints cv.translatesAutoresizingMaskIntoConstraints = false return cv }()

লক্ষ্য করুন যে আমরা layout-কে collectionView-এ লেয়ার হিসেবে ইনিশিয়ালাইজারে যোগ করেছি যেমন আমরা প্রথমবারের মতো viewController.swift-এ করেছিলাম। এখানে আমরা FlowLayout-এর ডায়рекশনও .horizontal হিসেবে স্পেসিফাই করেছি।

collectionView এলিমেন্টটি সাবভিউ হিসেবে ভিউতে যোগ করা যাক।

আমরা একটি ফাংশন তৈরি করব যা আমাদের জন্য এটি করবে কোডটি কিছুটা ক্লিন রাখতে।

 fileprivate func setupSubCells(){ // add collectionView to the view addSubview(collectionView) collectionView.dataSource = self collectionView.delegate = self // setup constrainst // make it fit all the space of the CustomCell collectionView.topAnchor.constraint(equalTo: titleLabel.bottomAnchor).isActive = true collectionView.leftAnchor.constraint(equalTo: leftAnchor).isActive = true collectionView.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true collectionView.rightAnchor.constraint(equalTo: rightAnchor).isActive = true } 

collectionView-এর ডেলিগেট self-এ সেট করতে ভুলবেন না এবং ডেটাসোর্সও:

 collectionView.dataSource = self

  collectionView.delegate = self

তারপর init ব্লকের ভিতরে ফাংশনটি কল করুন।

আপনি যদি অ্যাপ বিল্ড করার চেষ্টা করেন, Xcode কিছু এরর দেখাবে কারণ আমরা UICollectionViewDelegate এবং UICollectionViewDelegateFlowLayout প্রোটোকল কনফর্ম করছি না। এটিকে ফিক্স করতে আমাদের প্রথমে সাব সেলটি রিয়ুজেবল সেল হিসেবে রেজিস্টার করতে হবে।

ক্লাসের টপে একটি ভেরিয়েবল তৈরি করুন এবং এর নাম দিন cellId যাতে সেল আইডেন্টিফায়ারের সময় ব্যবহার করতে পারি:

let cellId : String = "subCellID"

collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: cellId)

এখন দুইটি মেথড আর মিসিং যাতে এররগুলো চলে যায়: numberOfItemsInSection যা সেকশনে সেলের সংখ্যা ডিফাইন করে এবং cellForItemAt যা রিয়ুজেবল সেল ডিফাইন করে। এই মেথডগুলো collectionView-এর সঠিকভাবে কাজ করার জন্য জরুরি:

 // number of cells func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { return 4 } // reusable Cell func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath) cell.backgroundColor = .yellow return cell }

ফলাফলটি এইভাবে দেখাবে:

আপনি দেখতে পাচ্ছেন, collectionViewগুলো ব্ল্যাক ব্যাকগ্রাউন্ড এবং সাব সেলগুলো ইয়েলো।

শেষ কাজ যা আমরা করতে পারি সেটি হলো subCells-কে সেকশনের হাইট এবং ওইডথ দেয়া। আবার আমরা sizeForItemAt ব্যবহার করছি সেলের height এবং width ডিফাইন করার জন্য।

 func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize { let width = frame.height let height = frame.height return CGSize(width: width, height: height) }

এবং আমরা এখানে ?:

NICE! আমি এখানেই থামব যাতে পোস্টটি খুব লম্বা না হয়। আমি একটি দ্বিতীয় পার্ট তৈরি করব যেখানে আমরা কিছু মক পিকচার যোগ করব এবং ডেটা দিয়ে ফিল করব।

পূর্ণ সোর্স কোড ? এখানে

দয়া করে যদি আপনার কোনো যোগাযোগ, প্রশ্ন, বা সংশোধন থাকে, নিচে কমেন্টে পোস্ট করুন ? অথবা টুইটারে আমাকে নক করুন।

সাবস্ক্রাইব করুন আমার ইমেইল লিস্টে যাতে এই টিউটোরিয়ালের দ্বিতীয় পার্ট পাবলিশ হলে আপনাকে নোটিফিকেশন যায়।