UICollectionView with custom layout - unable to add supplementary view in storyboard

Question

From the Collection View Programming Guide for IOS:

---

Registering Your Cells and Supplementary Views

You can configure the cells and views of your collection view programmatically or in your app’s storyboard file.

• To configure cells and views in your storyboard:

  When configuring cells and supplementary views in a storyboard, you do so by dragging the item onto your collection view and configuring it there. This creates a relationship between the collection view and the corresponding cell or view.

  • For cells, drag a Collection View Cell from the object library and drop it on to your collection view. Set the custom class and the collection reusable view identifier of your cell to appropriate values.
  • For supplementary views, drag a Collection Reusable View from the object library and drop it on to your collection view. Set the custom class and the collection reusable view identifier of your view to appropriate values.

---

There is no way that I manage to drop a Collection Reusable View unto a collection view in my storyboard as long as layout is set to Custom instead of Flow. If I drop one when layout is set to flow, it's gone as soon as I set Layout back to custom.

If I drop it outside of the collection view, as a top level object, it's not used at runtime, even though both the class and identifier is set right. Instead I get an error telling me that I have to register the supplementary view. If I register it manually, it want use my visual design from the storyboard.

Any suggestions on how this is ment to work?

Answer 1

You can do this only if your layout is a subclass of UICollectionViewFlowLayout.

1. Don't specify custom layout in storyboard.
2. Select flow layout and design your supplementary view.
3. Then in your viewcontroller programmatically create and assign your new layout object to collectionview.
4. Call InvalidateLayout on your layout object
5. Use the supplementary view you designed in storyboard with your custom layout

This has worked for me. Hope it helps anybody else too !

Answer 2

You cannot add supplementary views to the storyboard with custom layout. The supplementary views are managed by the layout object. Only layout knows its position,number.. It is not necessary to implement supplementary views by the layout object. It is the concern of layout object. UICollectionViewFlowLayout is provided with supplementary views(section header/footer). So you can design it in the storyboard. If you are using custom layout, how the storyboard knows whether it supports supplementary views. So it will give that job to you. You have to register the class/nib for the supplementary views.

Answer 3

This comment from the current top answer seems to be the best solution.

If your custom layout is a subclass of a UICollectionViewFlowLayout, open storyboard editor and select flow layout (yellow cube) in the left object list under Collection View object. Then in "Identity Inspector" select your descendant class. That's it. No code change required

- adnako