অটোলেআউট সহ iOS এর জন্য প্রোগ্রাম্যাটিকভাবে একটি স্পটিফাই ক্লোন কীভাবে তৈরি করবেন

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

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

মৌলিক প্রয়োজনীয়তা :প্রথমে নিশ্চিত করুন যে আপনার কাছে Xcode +10 ইনস্টল করা আছে এবং সুইফট +4 আছে।

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 মেনে চলতে হবে একটি সুপারক্লাস হিসাবে এবং পদ্ধতিগুলির স্বয়ংসম্পূর্ণতা পেতে। তো চলুন শুরু করা যাক কালেকশনভিউসেল নিবন্ধন দিয়ে।

ভিতরে View.DidLoad() আমরা collectionView.register() কল করি পুনঃব্যবহারযোগ্য সেল নিবন্ধন করার পদ্ধতি:

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

তারপর আমরা collectionView-এর ভিতরে কতগুলি কক্ষ থাকবে তা সংজ্ঞায়িত করি numberOfItemsInSection ব্যবহার করে . আপাতত আমাদের এটিকে 5টি আইটেম তৈরি করতে হবে:

 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
    }

}

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

কক্ষগুলিতে একটি কাস্টম প্রস্থ এবং উচ্চতা যোগ করুন

এখন আমাদের ঘরগুলিকে সঠিক ক্রমে স্থাপন করতে হবে এবং তাদের একটি 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 নামে একটি নতুন সুইফট ফাইল তৈরি করুন :

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

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

এখন CutomCell এ কিছু লবণ দেওয়ার পালা :D

আপনি যদি Spotify হোম স্ক্রিনে দেখেন, প্রতিটি বিভাগ যা একটি CustomCell আমাদের উদাহরণে একটি বিভাগের শিরোনাম, উপ-কোষ রয়েছে এবং এটি অনুভূমিক:

একটি বিভাগের শিরোনাম যোগ করুন

আসুন ঘরে একটি শিরোনাম লেবেল যোগ করি। titleLabel তৈরি করুন CutomCell ভিতরের উপাদান ক্লাস:

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 যোগ করতে ভুলবেন না সম্পত্তি - এটি ছাড়া সীমাবদ্ধতা কাজ করবে না!

আমরা পরবর্তী অংশে যাওয়ার আগে, আসুন প্রথমে পর্দার পটভূমির রঙটি কালোতে পরিবর্তন করি এবং কোষগুলির জন্য হলুদ রঙটিও সরিয়ে ফেলি:

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

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

চলুন 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
    }

self এ প্রতিনিধি সেট করা নিশ্চিত করুন collectionView-এর জন্য এবং ডাটাসোর্সও:

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)
        
    }

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

চমৎকার! আমি এই মুহুর্তে থামতে যাচ্ছি তাই এই পোস্টটি খুব দীর্ঘ নয়। আমি একটি দ্বিতীয় অংশ তৈরি করব যেখানে আমরা কিছু উপহাস করা ছবি যোগ করব এবং কিছু ডেটা দিয়ে এটি পূরণ করব।

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

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

সাবস্ক্রাইব করুন এই টিউটোরিয়ালের দ্বিতীয় অংশ