iOS 7 Programming Cookbook

5.5. Feeding Custom Cells to Collection Views Using .xib Files

Problem

You want to configure collection view cells in Interface Builder and feed those cells to your collection view for rendering.

Solution

Follow these steps:

1. Create a subclass of the UICollectionViewCell and give it a name (we’ll use MyCollectionViewCell for this example).

2. Create an empty .xib file and name it MyCollectionViewCell.xib.

3. Drop a Collection View Cell from the Objects Library in Interface Builder onto your empty .xib file (see Figure 5-7) and change the class name of the dropped object in Interface Builder to MyCollectionViewCell (see Figure 5-8). Because you make this association, when you load the .xib file programmatically, your custom class of MyCollectionViewCell will automatically be loaded into memory. This is pure magic!

Figure 5-7. The Collection View Cell UI object in the Object Library of Interface Builder

Figure 5-8. Assigning our custom class to the .xib file of our custom collection view cell

1. Customize your cell in Interface Builder. For every UI component that you drop on your cell, ensure that you create an associated IBOutlet either in the header or the implementation file of your class (MyCollectionViewCell).

2. Register your nib with your collection view using the registerNib:forCellWithReuseIdentifier: ...