How to add UICollectionView inside UITableViewCell using Swift
- December 21, 2019
- John Codeos
Today, I’m going to show you how to add a UICollectionView inside UITableView.
In this example, we have categories, and inside the categories we have a different number of subcategories.
Each subcategory has a UICollectionView and shows the items horizontally.
Every item(UICollectionViewCell) has a UIView to show the color and a UILabel for the name of the color.
Prepare the data
Before we start, create a swift file with a name Colors and paste the following data we’re going to use in this example.
Creating the TableView
Add an UITableView in your ViewController. In this example, the name of this ViewController is called TableView.
…and give the name tableView
Creating the TableView Cell
Create an UITableViewCell with XIB file.
Inside the UITableViewCell add an UILabel, which will be the title for the Subcategories and an UICollectionView for the items.
Add tableviewcellid as identifier
Creating the CollectionView Cell
Create an UICollectionViewCell with XIB file.
Add an UIView for the color and an UILabel for the color name.
Add collectionviewcellid as identifier
Creating the Models
Create a new swift file and give the name TableViewCellModel. This will be the model for the TableViewCell.
…and paste the following code inside.
Do the same for the CollectionViewCell, giving the name CollectionViewCellModel
Setting up the TableView
Go back to the TableView and create an extension for UITableViewDelegate and UITableViewDataSource.
In this example, row’s height is 200, and header’s 44.
Setting up the TableView Cell
On the TableViewCell, declare a variable with a name row and a type [CollectionViewCellModel], which’ll be used to pass the data from the TableViewCell to the collectionView inside the cell.
Also create the flow layout of the collectionView programmatically.
In this example, the cell is 150 width and 180 height (150×150 is the box(UIView) for the color and 150×30 the size of the UILabel for the color name)
Set the dataSource and delegate for the collectionView and register the XIB for the CollectionViewCell
Create an extension of the TableViewCell for UICollectionViewDelegate, UICollectionViewDataSource and UICollectionViewDelegateFlowLayout
Detecting which cell is tapped and passing the data
To detect which cell is tapped, go to TableViewCell and create a protocol with a name CollectionViewCellDelegate and inside there add a method that returns the cell (CollectionViewCell), the position(index) of this cell, and which TableViewCell is tapped.
Also declare the protocol CollectionViewCellDelegate as cellDelegate in your TableViewCell class
In the extension of the TableViewCell you created earlier, add the method didSelectItemAt
Every time the user presses a cell, it sends the data through the protocol.
To receive that data in the TableView (the ViewController with the UITableView), go back to the TableView and set the delegate of the cell (cellDelegate) inside the cellForRowAt method.
Lastly, create an extension for this delegate to receive the data.
You can find the final project here
If you have any questions feel free to DM me on Twitter @johncodeos or leave a comment below!