完全に理解する Storyboard & UIKit (Day 18): UICollectionViewのカスタムレイアウト

Day 17では UICollectionViewFlowLayout を用いて、単純な3列のタイル状一覧を作成しました。 しかし、実際のiOSアプリ（例えばApp Storeアプリの「Today」タブや「ゲーム」タブ）を見ると、画面全体は縦スクロールするのに、ある特定の行だけはNetflixのように横スクロール（カルーセル）するという複雑なレイアウトが使われています。

かつてはこれを実現するために数千行の地獄のようなコードが必要でしたが、iOS 13で導入された UICollectionView Compositional Layout により、非常にシンプルで宣言的に書けるようになりました。

1. Compositional Layout の3階層アーキテクチャ

Compositional Layoutは、レイアウト全体を以下の「3つの階層（入れ子構造）」で定義します。 小さいものから順に見ていきましょう。

1. Item (アイテム): 最小単位。1つのCell（マス目）に相当します。
2. Group (グループ): Itemを束ねるコンテナ。Itemを横に並べるか、縦に並べるかを決めます。
3. Section (セクション): Groupを束ねる大枠。この単位で横スクロール（Orthogonal Scrolling）させるかなどを決定します。

この3つをレゴブロックのように組み立てて、1つのLayoutを完成させます。

2. 実践：横スクロールするカルーセルの作成

「画面幅の80%の大きさのカードが横に並び、横にスクロールできる」というApp Store風のセクションを作ってみましょう。

コードは、ViewControllerの viewDidLoad などから呼ばれる独自のレイアウト作成メソッド内に記述します。

ステップ1: Layout Size (サイズ定義) の概念

Compositional Layoutでは、サイズを NSCollectionLayoutSize で定義します。指定方法には以下の3種類があります。

• .fractionalWidth / fractionalHeight: 「親コンテナに対する割合（0.0〜1.0）」
• .absolute: 「絶対値（ピクセル数）」
• .estimated: 「コンテンツに応じた可変値（推定値）」

ステップ2: コードの組み立て

swift
func createCarouselLayout() -> UICollectionViewLayout {
    // 1. Itemの定義
    // 幅はグループ(親)全体に広げ、高さも全体に広げる
    let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),
                                         heightDimension: .fractionalHeight(1.0))
    let item = NSCollectionLayoutItem(layoutSize: itemSize)
    // セル同士の隙間を定義
    item.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 8, bottom: 0, trailing: 8)

    // 2. Groupの定義
    // 幅は画面幅の80%（0.8）、高さは絶対値で300px。Horizontal(横並べ)として定義する
    let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.8),
                                           heightDimension: .absolute(300))
    // iOS 16以降の書き方 (subitemsを配列で渡す)
    let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])

    // 3. Sectionの定義
    let section = NSCollectionLayoutSection(group: group)
    // ⭐️ ここが魔法の1行！ セクション全体を主軸(縦)とは直交する方向(横)にスクロールさせる
    section.orthogonalScrollingBehavior = .groupPagingCentered

    // Sectionをレイアウトに渡して完成
    let layout = UICollectionViewCompositionalLayout(section: section)
    return layout
}

ステップ3: Collection Viewへの適用

作成したレイアウトを viewDidLoad でCollectionViewにセットするだけです。Day 17で使ったDelegateのサイズ計算メソッド（sizeForItemAt等）はすべて不要になり、削除できます。

swift
override func viewDidLoad() {
    super.viewDidLoad()
    collectionView.dataSource = self
    // カスタムレイアウトの適用
    collectionView.collectionViewLayout = createCarouselLayout()
}

3. 複数セクションで別々のレイアウトを適用する

Compositional Layoutの真髄は、「セクション0は横スクロール」「セクション1は縦3列のグリッド」といった全く異なるレイアウトを共存させられる点にあります。

UICollectionViewCompositionalLayout の初期化時に、クロージャを使って「対象のセクション番号」に応じたセクションUIを分岐して返すことができます。

swift
let layout = UICollectionViewCompositionalLayout { (sectionIndex, layoutEnvironment) -> NSCollectionLayoutSection? in
    if sectionIndex == 0 {
        // 横スクロールのカルーセル定義を返す
        return self.createCarouselSection()
    } else {
        // 縦スクロールのリスト定義を返す
        return self.createListSection()
    }
}

📝 今日のまとめ

• 複雑なレイアウトには UICollectionView Compositional Layout を使用する。
• Item -> Group -> Section の3つのブロックを組み立てて構築する。
• サイズ指定は fractional~ (割合) を使うことで、端末サイズごとの計算（除算）を手動で行う必要がなくなる。
• orthogonalScrollingBehavior を1行設定するだけで、ページング付きの滑らかな横スクロールカルーセルが完成する。
• セクション番号に応じて条件分岐することで、1つの画面内に複数の全く異なるUI構造を同居させられる。

最も表現力の高いコンポーネントであるCollectionViewをマスターしました。この力を使えば、どんなに複雑な画面デザインでも恐れることはありません。 明日の Day 19 では、既存のUI部品を組み合わせるのではなく、一から描画する「完全オリジナルなカスタムView」の作成と、それをStoryboard上でリアルタイムプレビューする仕組みを学びます。