iOSアプリでCollectionViewレイアウトを作成する方法を初心者向けに解説

CollectionViewとは？

CollectionViewとTableViewは、iOS開発における最も基本的なUIコンポーネントの2つです。優れたiOS開発者になるためには、両方をしっかりマスターしておく必要があります。

この記事では、主にCollectionViewに焦点を当てて解説していきます。CollectionViewはTableViewとよく似ていますが、いくつか重要な違いがあります。最大の特徴は、縦方向・横方向の両方のスクロールに対応しており、グリッド状のレイアウトを実現できる点です。Androidでいうところの「GridView」に相当するUI要素です。

さらに詳しく知りたい方は、Appleの公式ドキュメント（UICollectionView）も参照してみてください。

CollectionViewの構成要素

CollectionViewは「Cell（セル）」と「Supplementary View（補助ビュー）」という2つの主要な要素で構成されています。

コレクションビューは、UICollectionViewCellクラスのインスタンスであるセルを使ってアイテムを画面上に表示します。セルの内容は、データソース（DataSource）によって設定・提供されます。

また、セルに加えて、セクションヘッダーやセクションフッターなどのSupplementary Viewを配置することもできます。これらは個々のセルとは独立していますが、セクションに関する情報などを表示する役割を担います。なお、補助ビューのサポートは任意であり、コレクションビューのレイアウトオブジェクトによってその有無や配置位置が定義されます。

それでは、実際にCollectionViewを作成する具体的な手順を見ていきましょう。

CollectionView作成の9ステップ

ステップ1：プロジェクトの新規作成

Xcodeを開き、Single View Applicationを作成します。プロジェクト名は「SampleCollectionView」としましょう。

ステップ2：UICollectionViewの配置

Main.storyboardに、下図のようにUICollectionViewを追加します。

ステップ3：Reuse Identifierの設定

コレクションビューセルを選択し、Reuse Identifier（再利用識別子）に「cell」という名前を設定します。

ステップ4：カスタムセルクラスの作成

Cocoa Touch Classファイルを新規作成し、「CollectionViewCell」という名前でUICollectionViewCell型のクラスを作成します。作成したクラスを、Storyboard上のセルに割り当てます。

ステップ5：IBOutletの接続

ViewController.swiftに、コレクションビューの@IBOutletを作成して接続します。

ステップ6：DelegateとDataSourceの設定

コレクションビューに対して、delegateとdataSourceを接続します。

ステップ7：プロトコルへの準拠

ViewController.swiftを開き、クラス宣言部分でUICollectionViewDelegateとUICollectionViewDataSourceに準拠させます。

class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource

ステップ8：必須デリゲートメソッドの実装

次に、必須となるデリゲートメソッドを実装します。ここでは500個のセルを返す例を示します。

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return 500
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell: UICollectionViewCell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! CollectionViewCell
    cell.backgroundColor = UIColor.gray
    return cell
}

ステップ9：アプリの実行とスクロール方向の変更

アプリを実行すると、まずは垂直方向にスクロールできることを確認できます。コレクションビューを水平方向にスクロールさせたい場合は、Scroll Directionプロパティを「Horizontal」に変更してください。

完成版コード

ここまでの内容をすべてまとめたViewController.swiftの完全なコードがこちらです。

import UIKit
class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource {
    @IBOutlet var collectionView: UICollectionView!
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 500
    }
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell: UICollectionViewCell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! CollectionViewCell
        cell.backgroundColor = UIColor.gray
        return cell
    }
}

このように、Storyboardでの設定とわずかなコードだけで、簡単にCollectionViewを実装できます。まずは基本形を覚えて、セルのカスタマイズやレイアウト調整などに挑戦してみてください。