ways to Custom Cell with Xib

There are 3 ways to create custom cell in UITableView or UICollectionView

1. Directly set the default collectionViewCell

“Custom Class” to “yourCustomCell.swift”

from the current UITableView or UICollectionView in storyboard.

• Remember to set Identifier in cell attribute.

let cell = collectionView.dequeueReusableCell(withReuseIdentifier: “collectionCell”, for: indexPath) in the place where you need the instance of the cell view.

Then you can drag all the reference from storyboard to “yourCustomCell.swift” to do what ever you want for the view(etc. set image or title).

2. Use custom Xib — method 1

You still set the custom class and the identifier through the storyboard your UITableView or UICollectionView is locating.

Then you create a “YourCustomCell.swift” and a “YourCustomCell.xib” file.

Now, if you call the method, collectionView.dequeueReusableCell(withReuseIdentifier: “collectionCell”, for: indexPath) in the place where you need the instance of the cell view, the OS will get the CellView from storyboard and links it to “YourCustomCell.swift”.

This will cause a problem because all the reference you have is linked to .xib file like below.

So the OS cannot get the true reference of your subviews since your .swift is not linked to .xib.

So, here’s how we link them:

We set File’s owner to “YourCustomCell.swift”. This means YourCustomCell.swift is the loader of this xib file.

so we need to load this xib in code:

override func awakeFromNib() {
super.awakeFromNib()
// Initialization code
setup()
}
func setup() {
let view = loadViewFromNib()
view.frame = bounds
addSubview(view)
}
func loadViewFromNib() -> UIView {
let bundle = Bundle(for: type(of: self))
let nib = UINib(nibName: "collectionItemCollectionViewCell", bundle: bundle)
let view = nib.instantiate(withOwner: self, options: nil)[0] as! UIView
return view
}

Note that, now the xib view is added to “YourCustomCell.swift” as a SUBVIEW, so your view hierarchy may be very deep like this:

And the xib you added as subview may take away the touch event from your collectionView.

That’s it!

Now you may link the reference from xib to “YourCustomCell.swift” and work like a charm.

3. Use custom Xib — method 2

The last approach is using custom Xib without setting any attribute the storyboard that UITableView or UICollectionView is in.

Here’s how it works:

First we create a “YourCustomCell.swift” and a “YourCustomCell.xib”

Then we set the class of the “CollectionCell”(it’s a view) in the xib.

Note that we are setting the custom class in the view attribute NOT in file’s owner attribute!!

And set the Identifier to “collectionCell”

The identifier is used for getting the instance of this cell by calling: collectionView.dequeueReusableCell(withReuseIdentifier: “collectionCell”, for: indexPath) in the place where you need the instance of the cell view.

The third step is to let the UITableView know which cell file it should reference to. So we need to link the xib to the swift file UITableView is currently on:

let nib = UINib(nibName: "YourCustomCell",bundle: nil)
self.collectionView.register(nib, forCellWithReuseIdentifier: "collectionCell")

This way, the OS will link the .swift class which UITableView is in and the YourCustomCell.xib you just set with Identifier and Custom Class.

The last step is most easily to confused.

Since we did not connect “YourCustomCell.swift” with “YourCustomCell.xib” through the initial function loadViewFromNib() like the previous method, the xib file does not linked to the “YourCustomCell.swift”.

But since we set the Custom Class of “CollectionCell”(the root view) to “YourCustomCell.swift”, the OS will link the view to the class!

So what we need to do is link the subviews of CollectionCell view to swift file, what you should see on Connection inspector will be like this:

Note that the reference outlet should connect to the view, instead of file owner!

To Wrap Up

These are the 3 approach about how to customize the cell in UITableView or UICollectionView

I personally recommend the third method because we can extract the cell view from storyboard compared to method 1 and we won’t produce too deep view hierarchy as method 2 would.

Please let mw know if there’s anything I misinterpreted or incorrectly introduce.