完全に理解する Storyboard & UIKit (Day 17): UICollectionViewの実装基礎

UITableViewは「1列で縦に並ぶ」リストでした。しかし、iPhoneの「写真」アプリのように、画像が3列〜4列のタイル状（グリッド）に並ぶUIを作りたい場合はどうすれば良いでしょうか？

そこで登場するのが、TableViewの進化系であり兄弟とも言えるコンポーネント、UICollectionView です。

1. UICollectionViewとは？

UICollectionView は、データの集合（コレクション）を、カスタム可能なレイアウトで画面上に配置・スクロールさせるためのビューです。

UITableViewと基礎概念は全く同じ（DataSourceとDelegateプロトコルを使う）ですが、最大的な違いは 「レイアウトの決定権を別のオブジェクト（レイアウトオブジェクト）が持っている」 という点です。これにより、縦横のグリッドだけでなく、円形レイアウトやPinterestのような複雑な配置も可能になります。

2. Storyboard上の準備とセル作成

設定方法はUITableViewとほぼ同じです。

1. ViewControllerのキャンバス内に Collection View を配置し、四方に制約をつけます。
2. 配置した Collection View の中にある四角いマス目、Collection View Cell を選択します。（※UITableViewCellとは異なります）
3. このマスの中に、UIImageView や UILabel を配置し、制約をつけます。
4. Attributes Inspectorで、Cellに Identifier（例: PhotoCell）を設定します。
5. View Controllerに接続する専用のクラスファイル（UICollectionViewCellのサブクラス）を作成し、Storyboard上で Custom Class として指定します。
6. IBOutlet を接続します（Collection View自体と、Cell内の画像など）。

3. 実装の3ステップ

UITableViewと瓜二つなので、前々回の復習を兼ねて見ていきましょう。

ステップ1: プロトコルに準拠する

swift
class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate {

    @IBOutlet weak var collectionView: UICollectionView!
    let photos = ["cat1", "cat2", "cat3", "cat4", "cat5"] // アセット名
    // ...

ステップ2: 委譲先（自分自身）を登録する

swift
    override func viewDidLoad() {
        super.viewDidLoad()
        collectionView.dataSource = self
        collectionView.delegate = self
    }

ステップ3: 必須メソッドを実装する

swift
    // ① 表示するアイテムの総数
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return photos.count
    }

    // ② 各マスのセルの構築
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

        guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "PhotoCell", for: indexPath) as? PhotoCell else {
            return UICollectionViewCell()
        }

        let imageName = photos[indexPath.item] // TableViewのrowではなくitemを使います
        cell.imageView.image = UIImage(named: imageName)

        return cell
    }

これでデータとセルは結びつきました！しかし、この状態で実行してもおそらく意図した通りの3列並びにはなりません。マスのサイズがバラバラだったり、1列になったりします。

なぜなら、CollectionViewにおけるセルのサイズは、UITableViewとは違って開発者が明示的にサイズ計算ロジック（レイアウト）を提供しなければならない からです。

4. UICollectionViewFlowLayout の基礎

最も標準的でよく使われるレイアウトクラスが UICollectionViewFlowLayout です。これは要素を「左から右へ、端まで行ったら次の行へ」と並べる（フローさせる）レイアウトを提供します。

サイズの指定は、もう一つのプロトコル UICollectionViewDelegateFlowLayout を使って行います。

swift
// プロトコルを追加
extension ViewController: UICollectionViewDelegateFlowLayout {

    // ③ セルのサイズを返すメソッド（超重要）
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

        // 画面幅を3等分して、1辺の長さを決める（隙間を持たせたい場合はその分の数値を引く）
        let width = collectionView.frame.width / 3.0
        return CGSize(width: width, height: width) // 正方形のマスにする
    }

    // セル同士の縦の隙間（行間）
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return 0
    }

    // セル同士の横の隙間（列間）
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        return 0
    }
}

この計算コードを追加することで、はじめてInstagramのプロフィール画面のような「完璧な3列の正方形グリッド」が完成します。

📝 今日のまとめ

• UICollectionView は、データをタイル（グリッド）状に並べるためのコンポーネント。
• DataSourceとDelegateの考え方はUITableViewと全く同じ。行は row ではなく item と呼ぶ。
• 最大の違いはレイアウトの概念。標準では UICollectionViewFlowLayout が使われる。
• UICollectionViewDelegateFlowLayout プロトコルを使い、sizeForItemAt メソッドを実装してマスのサイズを計算・指定する必要がある。

これでグリッドレイアウトの基礎が完成しました。 しかし、AppleはiOS 13/14でCollectionViewのレイアウトエンジンを根本から刷新し、より直感的で恐ろしいほど強力なシステムを導入しました。 明日の Day 18 では、現代のiOS開発の主流となっている UICollectionView Compositional Layout に挑戦します。