Fully custom cell in a UICollectionView list with compositional layout

Question

Created Oct ’20

Replies 1

Boosts 0

Views 1.3k

Participants 2

I'm currently migrating from a UITableView to a modern UICollectionView list with compositional layout to create a UITableView-like interface. In Apple's sample code and API documentation, as far as I can tell the only examples given are with preconfigured system styles (e.g. defaultContentConfiguration()) and convenience properties (e.g. text and secondaryText).

How would I, say, integrate my previous custom UITableViewCell made in Interface Builder (with outlets connected to the custom subclass)? I'm open to rewriting it as a fully programmatic cell since it's small enough in scope and needs UI work anyway.

More generally, in a UICollectionView list with compositional layout, how do you add a fully custom cell?

Boost

Answer 1

Frameworks Engineer OP

Apple

Oct ’20

The simplest way to design a custom collection view cell in Interface Builder is to create a standalone xib file for each custom cell, which contains a single UICollectionViewCell root-level object. In Xcode, go to File > New > File... and choose View. Select the default view in the newly-created xib file and delete it. Then open the Object Library (+ button in the top right of the window) and choose a Collection View Cell. You can now select the cell and set a custom class for it in the Identity inspector pane on the right, and add custom views to the cell's content view. Finally, you can use the new cell registration API in iOS 14 to dequeue a configured cell using a registration for this nib (documentation), or you can use the traditional register(_:forCellWithReuseIdentifier:) (documentation) method to register your nib.

2