Instructions to combine UICollectionViews with UITableViewCell Xib

Wednesday, 25/12/2019

Tram Ho

I had some difficulty combining UICollectionView with UITableViewCell, so now I read many different sources and now I will summarize and form a clearer guide.

** Note: This article is not for beginners, by default you already know about tableView and creating cell options with xib files.

And it will not do anything to make your interface look good, just run the code, and display it as required **.

Start by creating a project with a tableView, which is connected via the storyboard, in addition to creating an xib file and the UITableViewCell class to associate with the UICollectionView.

1. Add UICollectionView to the Xib TableViewCell file

Drag and drop a collection view
More constraints
Find out why you can’t add CollectionViewCells to the collection view you’ve just dropped above

And actually you need a separate file to contain any collection of cell views you want to display. (When your UICollectionView is in an Xib file)

2. Add 1 file and 1 Xib UICollectionViewCell to your Project

You can do this whatever you want to display with Xib CollectionViewCell, for the purpose of this tutorial, I just changed their background color.

Make sure you give your cell a resuableIdentifier

3. Structure your TableViewCell class with UICollectionView Data Source and Delegate protocols

Step 1: Return to the Xib tableViewCell file

Step 2: Go to the Outline Document

Step 3: Drag and drop from your collectionView to ‘File Owner’ and select dataSource and then the delegate. (Can hold Cmd key to select simultaneously)

Step 4: Connect your collectionView to the TableViewCell class through creating an IBOutlet, drag and drop

Step 5: Configure your tableViewCell class in accordance with UICollectionViewDelegate and UICollectionViewDataSource

class TableViewCell: UITableViewCell, UICollectionViewDelegate, UICollectionViewDataSource {
    @IBOutlet weak var collectionView: UICollectionView!
    
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
        self.collectionView.dataSource = self
        self.collectionView.delegate = self
        self.collectionView.register(UINib.init(nibName: "CollectionViewCell", bundle: nil), forCellWithReuseIdentifier: "collectionViewID")
        
    }

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

        // Configure the view for the selected state
    }
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -&gt; Int {
        return 15
    }
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -&gt; UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "collectionViewID", for: indexPath as IndexPath) as! CollectionViewCell
        
        
        return cell
    }
}

class TableViewCell: UITableViewCell, UICollectionViewDelegate, UICollectionViewDataSource {

@IBOutlet weak var collectionView: UICollectionView!

override func awakeFromNib() {

super.awakeFromNib()

// Initialization code

self.collectionView.dataSource = self

self.collectionView.delegate = self

self.collectionView.register(UINib.init(nibName: "CollectionViewCell", bundle: nil), forCellWithReuseIdentifier: "collectionViewID")

}

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

super.setSelected(selected, animated: animated)

// Configure the view for the selected state

}

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {

return 15

}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "collectionViewID", for: indexPath as IndexPath) as! CollectionViewCell

return cell

}

Add UICollectionViewDelegate and UICollectionViewDataSource protocols in the class extension
Connect collectionView’s data source and delegate = self in awakeFromXib
Add the numberOfItemsInSection function
Add the cellForItemAt function
Create a cell with your reuseIdentifier and cast the cell type you customized

At this point, it will crash. We need to register the nib file or class for identifiers or connect a cell attribute in the storyboard.

4. Register your Xib

In the awake section of your tableViewCell, add this line:

self.collectionView.register(UINib.init(nibName: “CollectionViewCell”, bundle: nil), forCellWithReuseIdentifier: “collectionViewID”)

1 2	self.collectionView.register(UINib.init(nibName: “CollectionViewCell”, bundle: nil), forCellWithReuseIdentifier: “collectionViewID”)

Compile and execute, it will work. Next is the code addition for tableViewCell

class TableViewCell: UITableViewCell, UICollectionViewDelegate, UICollectionViewDataSource {
    @IBOutlet weak var collectionView: UICollectionView!
    
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
        self.collectionView.dataSource = self
        self.collectionView.delegate = self
        self.collectionView.register(UINib.init(nibName: "CollectionViewCell", bundle: nil), forCellWithReuseIdentifier: "collectionViewID")
        
    }

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

        // Configure the view for the selected state
    }
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -&gt; Int {
        return 15
    }
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -&gt; UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "collectionViewID", for: indexPath as IndexPath) as! CollectionViewCell
        
        
        return cell
    }
}