Adding UICollectionViews to a custom UITableViewCell which is done through Xib

I was surprised to find out how many obstacles there were to implement the UICollectionView in the UITableViewCell. Therefore, this tutorial is here, I hope it saves you a lot of time.

Note: this tutorial is not for beginners. It is assumed that you are aware of tableViews and creating custom cells with xib files.

Also, I do not describe anything about the visual component.

1) Add a UICollectionView to your Xib TableViewCell

1. Drag a UICollectionView into your TableViewCell Xib
2. Add Constrains
3. And find out that you cannot add CollectionViewCells to your newly added UICollectionView :)

It turns out that you need a separate file to place any collection view cells that you want to display. (When your UICollectionView is in the Xib file)

2) Add the UICollectionViewCell and Xib file to your project



You can do whatever you want in your Collection View Cell Xib cell (add label, image, etc.), for the purposes of this tutorial we don’t touch it here.

Make sure you give your cell a resuableIdentifier.



3) Verify that your TableViewCell class has UICollectionView Data Source and Delegate protocols.

Step 1: Return to your tableViewCells Xib file.



Step 2: Drag from your collectionView to 'File's Owner' and select dataSource and then delegate.



Step 3: Drag from your collectionView to your TableViewCell class and create an IBOutlet



Step 4: Make sure your TableViewCell class matches the UICollectionView Data Source and Delegate protocols.

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

Code Explanation:

1. Add UICollectionViewDelegate and UICollectionViewDataSource to the class description
2. Make datasource collectionView and delegate = self in awakeFromXib
3. Add function numberOfItemsInSection
4. Add function cellForItemAt
5. Create a cell with your reuseIdentifier as your custom cell.

Troubleshooting steps:

1. Are my identifiers assigned and correct?
2. Have I dragged from my collectionView to Files Owner in your Xib file?

If you have questions, write in the comments.

If this helped you or will help in the future, like.

I hope someone will save a lot of time.