UICollectionView in UITableView in iOS with Swift 5

May 16, 2020 No Comments Development,iOS Development Pushpendra Kumar

Hi Guys, Welcome to this tutorial. Here I will tell you that how you can use the UICollectionView inside UITableView in iOS with Swift 5. And how you can handle all the delegates of UICollectionView inside UITableViewCell. So it’s that much difficult to handle. You can easily use this without having any issues. So for the deep knowledge Watch the complete video. And after watching the complete video. Please comment on the comment box with your feedback. And do not forget to subscribe to this YouTube channel for further updates.

UICollectionView in UITableView in swift

This sounds a little confusing. So In Simple world, I would like to tell you that. In this tutorial, I will explain to you that how you can use the collection view inside your UITableViewCell. And as you know this tutorial has been published in swift 5 programming language. So let’s begin with development. Please watch the complete video and understand how you could achieve your milestone.

Great 😊😊😊 So if you are looking for the important code which is related to this video. It is given below.

Product Class

//MARK: PRODUCT CLASS

class Product {
    var name : String?
    var sub_product : [Product] = [Product]()
}

Great. After that Add items into your list as given bellow!

ForLoop with items : UICollectionView in UITableView in swift

//MARK: FOR LOOP

        for i in 0...9 {
            let model = Product()
            model.name = "Product Header \(i + 1)"
            
            for j in 0...5 {
                let sub_model = Product()
                sub_model.name = "Product Header \(j + 1)"
                
                model.sub_product.append(sub_model)
            }
            
            list.append(model)
        }

Good job, Now we will write the all required function of tableView.

TableView Delegates Methods : UICollectionView with UITableView in swift

    // MARK: - Table view data source
    override func numberOfSections(in tableView: UITableView) -> Int {
        return list.count
    }
    
    override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        let cell = tableView.dequeueReusableCell(withIdentifier: "header")
        cell?.textLabel?.text = list[section].name
        cell?.textLabel?.textColor = .white
        cell?.textLabel?.font = UIFont(name: "Verdana", size: 25)
        return cell!
    }

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 1
    }


    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! TableViewCell
        cell.configure(items: list[indexPath.section].sub_product)
        return cell
    }
    
    override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
        80
    }
    
    override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        200
    }

Great job…. Now finally below is the code of the UITableViewCell

UITableViewCell in swift

//
//  TableViewCell.swift
//  Doublle Collection
//
//  Created by Pushpendra on 15/05/20.
//  Copyright © 2020 Pushpendra. All rights reserved.
//

import UIKit

class TableViewCell: UITableViewCell {

    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state
    }
    @IBOutlet weak var collectionView: UICollectionView!
    
    
    var list : [Product] = [Product]()
    func configure(items : [Product]) {
        list = items
        
        collectionView.delegate = self
        collectionView.dataSource  = self
        
        setLayout()
    }
    
    func setLayout() {
        let flowLayout = UICollectionViewFlowLayout()
        flowLayout.scrollDirection = .horizontal
        
        flowLayout.itemSize = CGSize(width: self.collectionView.frame.width / 2 - 10, height: self.collectionView.frame.width / 2 - 10)
        
        flowLayout.minimumLineSpacing = 5
        flowLayout.minimumInteritemSpacing = 5
        
        self.collectionView.setCollectionViewLayout(flowLayout, animated: true)
    }
}

extension TableViewCell : UICollectionViewDelegate, UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
       return list.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)
        cell.contentView.backgroundColor = .systemGray6
        
        return cell
    }
}

Wonderful,

In Conclusion, You have done with this tutorial. And hope now the concept of UICollectionView in UITableView in iOS with Swift 5. If you have any doubts regarding the UICollectionView in UITableView in iOS with Swift 5 then you can comment into the comment box. And if you like this tutorial with a complete description of the simple and attractive tutorial in iOS then please like my video on YouTube and do not forget to subscribe to my YouTube channel. Because you will get lots of videos related to swift development with very sort tricks.

Besides, If you are more curious about the development and knowing about tutorials then follow the below links 👇🏻👇🏻👇🏻😎