UICollectionView with custom layout - how/where to add a supplementary view programmatically?

Question

I'm working with an example of Circle Layout, using UICollectionView with a custom layout class defined in the storyboard.

Is there some sort of a tutorial or a step by step explanation of how to add a supplementary view over to a collection view that uses a custom layout?

I've been looking at the Introducing Collection Views example, but cannot really understand how supplementary views are defined in that project. It appears that they are registered in a storyboard using flow layout, but I'm at a loss as to how subsequent layout changes in that project move supplementary views around.

Solution

The idea is that you return UICollectionViewLayoutAttributes for the supplementary views in layoutAttributesForElements(in:). For example, in your UICollectionViewLayout subclass:

var headerAttributes: UICollectionViewLayoutAttributes!

override func prepare() {
    headerAttributes = UICollectionViewLayoutAttributes(
        forSupplementaryViewOfKind: UICollectionView.elementKindSectionHeader,
        with: IndexPath(item: 0, section: 0))
    headerAttributes.frame = CGRect(x: 0, y: 0, width: 100, height: 40)
}

override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
    if headerAttributes.frame.intersects(rect) {
        return [headerAttributes]
    } else {
        return nil
    }
}

The important part is that the attributes are created using the forSupplementaryViewOfKind: initialiser. By returning attributes for supplementary views from this method the collection view knows that these views exist and where they are positioned and will call collectionView(_:viewForSupplementaryElementOfKind:at:) to get the actual view from its data source.