Tutorial - UICollectionView inside TableViewCell

Dec 31, 2018

And here we are, last hours of 2018 and I'm writing the last post of the year, hope you like it.

Throughout this tutorial I'll try to explain how to insert an UICollectionView in a TableViewCell. Each TableViewCell will have the name of the band and a CollectionView with the members of the band. I am assuming that you have read this post. Here is the result

Create the project

Open Xcode and create a Single View App.
First of all we are going to create our model (we have created createModel() function to populate data).

struct Band {
    var name: String
    var image: UIImageView
    var members: [String]
}

Open Main.storyboard file
Drag and drop an UITableView
Drag and drop an UITableViewCell
Select the Main.storyboard file and press Show assistant editor button.
Create the tableView IBOutlet in your ViewController

Create XIB file

Create a new User interface file. File-> New File and name it BandCell.

Drop an UITableViewCell

Insert a UILabel (rock band name) and a UICollectionView (for members of the band) at the right of the UILabel

Create the BandCell class

Create a new Cocoa Touch class and name it BandCell
In the BandCell.xib file
- open the Identity Inspector tab and in custom class type BandCell.
- open the Attribute inspector tab and in Identifier type BandCellId

Create IBOutlets in BandCell class for UILabel and UICollectionView

@IBOutlet weak var bandName: UILabel!
@IBOutlet weak var collectionView: UICollectionView!
  ```


- Add a function to configure the data

swift public func configureCell(band: Band) { self.bandName.text = band.name self.members = band.members }




### Configure tableView, and tableview's delegate and datasource

- Register the BandCell nib and create UITableViewDataSource functions

swift override func viewDidLoad() { super.viewDidLoad() tableView.delegate = self tableView.dataSource = self tableView.register(UINib.init(nibName: "BandCell", bundle: nil), forCellReuseIdentifier: "BandCellId") tableView.tableFooterView = UIView() }

swift extension ViewController: UITableViewDataSource { func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return model.count }

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

let cell = tableView.dequeueReusableCell(withIdentifier: "BandCellId") as! BandCell

cell.configureCell(band: model[indexPath.row])

return cell } }



### Configure collectionView, and collectionView's datasource

Now it's time for our collectionView. In our BandCell class we have an UICollectionView and we have to do the same process as we did with our tableView. We are going to create a MembersCVCell.swift and a MembersCVCell.xib.

- MembersCVCell.xib will have a UILabel
- MembersCVCell.swift will extend UICollectionViewCell and an IBOutlet, just like this

swift class MembersCVCell: UICollectionViewCell {

@IBOutlet weak var bandMember: UILabel!

func configureCell(bandMember: String) { self.bandMember.text = bandMember }

}

- In BandCell.swift we have to setup the collectionView and UICollectionViewDataSource functions

swift override func awakeFromNib() { super.awakeFromNib() self.collectionView.register(UINib(nibName: "MembersCVCell", bundle: nil), forCellWithReuseIdentifier: "MembersId") collectionView.delegate = self collectionView.dataSource = self }

swift extension BandCell: UICollectionViewDelegate, UICollectionViewDataSource { func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { return members.count }

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "MembersId", for: indexPath) as! MembersCVCell

cell.configureCell(bandMember: members[indexPath.row])

return cell }

}

And thats all. Pretty easy, isn't it? here is the [code](/images/posts/collectiontableview/CollectionInsideTable.zip)

### Merry Christmas and Happy New Year