SwiftでUICollectionViewを実装する方法｜コードから作成する手順を解説

UICollectionViewの基本的な使い方

SwiftでUICollectionView（コレクションビュー）を使用するには、まずコレクションビューそのものを作成する必要があります。作成方法は主に2つあります。1つはStoryboard上にドラッグ＆ドロップで配置する方法、もう1つはコードから動的に生成する方法です。

コレクションビューを作成したら、次に自クラスを以下のプロトコルに準拠させます。

• UICollectionViewDataSource … セルの数や中身など、表示するデータを提供するためのプロトコル
• UICollectionViewDelegate … セルのタップなど、ユーザーのアクションを検知するためのプロトコル
• UICollectionViewDelegateFlowLayout … セルのサイズやレイアウトをカスタマイズしたい場合に準拠するプロトコル

それでは、コードだけでコレクションビューを作成するために必要なステップを順番に見ていきましょう。

コードからUICollectionViewを作成する

まずは、レイアウトを定義してコレクションビューを生成し、dataSourceとdelegateを設定する関数を用意します。

func initCollection() {
    let layout = UICollectionViewFlowLayout()
    layout.itemSize = CGSize(width: 50, height: 50)
    let collection = UICollectionView.init(frame: self.view.frame, collectionViewLayout: layout)
    collection.dataSource = self
    collection.delegate = self
    collection.backgroundColor = colorLiteral(red: 0.3411764801, green: 0.6235294342, blue: 0.1686274558, alpha: 1)
    collection.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "cell")
    self.view.addSubview(collection)
}

この関数はviewDidLoad()メソッド内で呼び出してください。Storyboardを使う場合でもコードで生成する場合でも、dataSourceとdelegateの割り当ては必須です。それぞれ、コレクションビューへデータを供給する役割と、ユーザー操作を監視する役割を担っています。

セクション数を指定する

次に、コレクションビューにセクションがいくつあるかを伝えます。

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

アイテム数とセルの中身を設定する

続いて、各セクションに含まれるアイテムの数と、セルに表示するデータを指定します。

func collectionView(_ collection: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return 7
}
func collectionView(_ collection: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collection.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)
    cell.layer.backgroundColor = colorLiteral(red: 0.4392156899, green: 0.01176470611, blue: 0.1921568662, alpha: 1)
    return cell
}

セルのサイズをカスタマイズする（任意）

必要に応じて、セルごとに異なるサイズを返すこともできます。

func collectionView(_ collection: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let size = CGSize(width: 200, height: 50)
    return size
}

実行結果

上記のコードをシミュレーターまたは実機で実行すると、緑色の背景の上に赤紫色のセルが7つ並んだコレクションビューが表示されます。