How to add UICollectionView inside UITableViewCell using Swift

How to add UICollectionView inside UITableViewCell using Swift

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.

That’s it!

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!

Leave a Reply

Notify of

Follow me