第1章　UICollectionViewの概要

1.1　UICollectionViewの特徴

UICollectionViewは、コンテンツをグリッド状またはリスト状に表示するためのクラスです。データを柔軟かつ効率的に表示できます。

図1.1: UICollectionViewの画面の例

以下のような特徴を持ちます。

• グリッド表示：UICollectionViewは、データをグリッド形式で表示できます。これにより、画像ギャラリーやプロダクトカタログなど、複数のアイテムを整然としたレイアウトで見やすく表示可能です。
• リスト表示：UICollectionViewを使って、データをリスト形式で表示できます。これにより、タスクリストやメッセージ一覧など、順序付けられたアイテムを縦方向にスクロールして閲覧できます。
• カスタムレイアウト：UICollectionViewは、カスタムレイアウトを実装できます。これにより、アプリケーションの要件に合わせた独自のレイアウトを作成可能です。
• セルの再利用：UICollectionViewは、セルの再利用機能を提供しています。これにより、大量のデータや複雑なレイアウトでもスムーズなスクロールを実現できます。セルの再利用は、メモリ消費を抑えることにも寄与します。
• データの動的な更新：UICollectionViewは、データソースが変更されたときに簡単にコンテンツを更新できます。これにより、リアルタイムでデータが変更されるアプリケーションでも、スムーズな表示が実現できます。
• セクションとヘッダー、フッター：UICollectionViewでは、データを複数のセクションに分けて表示できます。また、各セクションにヘッダーやフッターを追加することで、データをより整理された形で表示可能です。
• アイテムの選択と編集：UICollectionViewでは、アイテムを選択したり、編集モードに入ってアイテムを削除や並び替えを行ったりできます。これにより、ユーザーがアプリケーション内でアイテムを簡単に操作できるようになります。
• アニメーションとインタラクション：UICollectionViewは、アイテムの追加、削除、移動などの操作にアニメーションを適用できます。これにより、アプリケーションの操作性や見た目を向上させることができます。

これらの機能を組み合わせることで、UICollectionViewはさまざまなシーンでのデータ表示に適したUIコンポーネントとなっています。また、UICollectionViewはUIKitフレームワークの一部であるため、iOSアプリケーション開発において幅広く利用されています。

1.2　UICollectionViewの考え方

UICollectionViewは、データの表示と管理に関して、3つの主要なコンポーネントに分ける考え方があります。

• Data
• Layout
• Presentation

これらのコンポーネントは、それぞれDataSourceクラス、Layoutクラス、Cellクラスに対応しています。このアーキテクチャにより、各コンポーネントの役割が明確になり、アプリケーションの開発が容易になります。

1.3　UICollectionViewの学び方

UICollectionViewは、歴史が古く構成要素も多いため、いざ学ぼうとすると案外大変です。最初の、動く画面を作るまでにも案外手間がかかります。

しかしやはり、プログラミングを学ぶうえでは、実際に動かすことが大切です。

そこで本書では、まず最小限の実装で動く画面を作ります。そうして基本的な構成要素に触れたあとで、それぞれの構成要素を詳しく見ていくことにします。

2.1　最小限の実装

UICollectionViewを理解するために、まずはできるだけ小さな実装から始めることにします。なお、本章で説明する実装はiOS 14以降で動作するものです。

できるだけ小さな実装と言っても、UICollectionViewを構成する要素は多いため、実装もある程度は大きくなってしまいます。大きく分けると、実装は次の4つのパートからなります。

• ViewController / Repository
• Layout
• DataSource
• Cell

本章ではこれらを順に説明します。

2.2　ViewController / Repository

まずは UICollectionView を含む画面を作ります。ここでは、その画面のViewControllerクラスを MyViewController という名前で作ります。また、画面に表示するデータを取得するためのクラス MyItemRepository も作ります。

import UIKit

final class MyViewController: UIViewController {
    private let repository = MyItemRepository()
    private var collectionView: UICollectionView!
    private var dataSource: MyCollectionViewDataSource!

    override func viewDidLoad() {
        super.viewDidLoad()

        collectionView = UICollectionView(
            frame: .zero,
            collectionViewLayout: makeCollectionViewLayout()
        )
        setupConstraints()

        dataSource = MyCollectionViewDataSource(repository: repository)

        collectionView.dataSource = dataSource
        collectionView.reloadData()
    }

    private func setupConstraints() {
        view.addSubview(collectionView)
        collectionView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            collectionView.topAnchor.constraint(equalTo: view.topAnchor),
            collectionView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
            collectionView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            collectionView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
        ])
    }
}

UICollectionView を生成するには、UICollectionViewLayout を与える必要があります。ここでは、makeCollectionViewLayout() メソッドで生成しています。これは後述します。

画面上に UICollectionView を配置するためにAuto Layoutを使うことにします。setupConstraints() メソッドで制約を設定しています。

UICollectionView に表示する内容はプロパティ dataSource で与えます。ここでは、MyCollectionViewDataSource クラスとして実装しています。これは後述します。

その後、reloadData() メソッドを呼ぶことで dataSource にセットされた値が表示されます。

MyCollectionViewDataSource に渡している MyItemRepository の実装は次のとおりです。実際のアプリではデータをAPIやDBから取得することになるでしょうが、今回は簡単のためにメモリ上にデータを生成しています。

import Foundation

struct MyItem {
    let name: String
}

final class MyItemRepository {
    private var items = (0..<30).map { MyItem(name: "Item \($0)") }

    func numberOfItems() -> Int {
        items.count
    }

    func item(at index: Int) -> MyItem {
        items[index]
    }
}