UICollectionView inside UIView in Swift using XIB

3 min readMay 30, 2019

This post shows how to use UICollectionView inside UIView with custom UICollectionView cells and interface builder, this is super basic example without any extras.

First Create new Single View App.

Create custom view using File… New / Cocoa Touch Class, call it CustomView and make sure it subclasses UIView

Next create CustomView.xib, open New File… and select View, call it CustomView

Open this new .xib file in Interface Builder and set it’s File’s Owner to CustomView, also I like to change Size from Inferred to Freeform and set it’s size roughly to how the view will be presented.

Next we will connect the xib to swift.

From CustomView.xib drag the view to CustomView.swift and call it contentView.

Next override both inits (with frame and coder) they are necessary for either instantiating this view programmatically or by Storyboard. Both inits will call function in which we’ll load the .xib and setup the contentView.

Add “@IBDesignable” over class definition to see the view inside Storyboard.

Next open Main.storyboard and add this view by adding UIView and setting it’s Custom Class to CustomView. Set some constraints or use auto constraints feature.

Because we set the class as “@IBDesignable” we can already see the red background in the Storyboard.

Create custom UICollectionViewCell with corresponding .xib, File New…, Cocoa Touch Class, call it CustomCell, subclass UICollectionViewCell and check also create XIB file.

Open CustomCell.xib in Interface Builder and add Label to it. Center the label both horizontally and vertically.

Drag the label from .xib to swift. Make sure .xib’s File’s Owner is NSObject, not the CustomCell, also after creating the connection inside Connections Inspector make sure the label is connected with Custom Cell, not with File Owner (it can happen). If that happened break the connection, and reconnect outlet.

Set the cell’s reusable identifier to CustomCell:

Now back inside the CustomView we need to add collection view and register CustomCell.

Open CustomView.xib and add UICollectionView, connect it with CustomView.swift, let’s call the outlet collectionView. Conform CustomView to UICollectionViewDataSource and probably you will want to conform also to UICollectionViewDelegate although in this post there are no interactions with this collection view so no need for it:)

Create function initCollectionView() and register CustomCell and set dataSource for collectionView:

Finally implement func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) and func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) inside which we dequeue custom cell using it’s identifier “CustomCell” and we type cast it to CustomCell class.

Updated CustomView.swift:

https://gist.github.com/standinga/726c31bd3ea866643d5d8520c3343ab3

Run the project and enjoy super nice UI. It does look decent doesn’t it? :)