UICollectionViewFlowLayoutでヘッダーとフッターを設定する

フローレイアウト(UICollectionViewFlowLayout)で、セクションごとにヘッダーとフッターを設定してみたいと思います。

StoryBoardはこんな感じです。
Collection Reusable ViewをオブジェクトライブラリからCollectionViewにドラッグ&ドロップすると、セルの上下に配置されます。
フローレイアウトではこれらがヘッダーおよびフッターになります。

ViewControllerの実装は以下のとおりです。

ViewController

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var collectionView: UICollectionView!

    override func viewDidLoad() {
        super.viewDidLoad()

        collectionView.dataSource = self
    }
}

extension ViewController: UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 10
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath)
        cell.backgroundColor = .red

        return cell
    }

    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 2
    }

    func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
        let identifier: String
        let bgColor: UIColor

        if kind == UICollectionElementKindSectionHeader {
            identifier = "Header"
            bgColor = .blue
        } else {
            identifier = "Footer"
            bgColor = .yellow
        }

        let supplement = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: identifier, for: indexPath)
        supplement.backgroundColor = bgColor

        return supplement
    }
}

ヘッダーおよびフッターの設定をしているのは、UICollectionViewDataSourceのcollectionView: viewForSupplementaryElementOfKind:at:というメソッドです。

引数kindには、種類文字列と呼ばれる識別子が格納されています。
セルと違い、補助ビューは再利用識別子と種類文字列の2つの識別子を持っており、オブジェクトの再利用時に使用します。

フローレイアウトでは、種類文字列はUICollectionElementKindSectionHeaderおよびUICollectionElementKindSectionFooterという定数が定義されています。
ここではこれらの定数を利用して、UICollectionElementKindSectionHeaderつまりヘッダーの場合は背景を青に、それ以外つまりフッターの場合は背景を黄色に設定しています。

セルについては、2つのセクションそれぞれに10個ずつのセルが配置されるようにしました。

上記のコードを実行すると、以下のような画面になります。

セクションごとにヘッダー(青)とフッター(黄色)が配置されているのがわかります。