【Swift/Xcode】UICollectionViewの実装方法・コンプリートガイド

まずはCollectionViewを配置します。

AutoLayoutをつけます。

①UICollectionViewを選択
② (Add New Constraint)をクリック
③上下左右に0を入力
④Add 4 Constraintsをクリック

①CollectionViewを右クリック
②dataSourceの右側の丸ぽちををViewControllerにドラッグ&ドロップ

同じく、delegateも行います。

①CollectionViewを右クリック
②delegateの右側の丸ぽちををViewControllerにドラッグ&ドロップ

collectionView.delegate = self
collectionView.dataSource = self

①Collection View Cellを選択
② (Show The Attributes inspector)をクリック
③Cellと入力

ViewController.swiftに、以下のようにextensionでコードを記述しましょう。

extension ViewController: UICollectionViewDelegate, UICollectionViewDataSource {
    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 1
    }
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 10
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath)
        cell.backgroundColor = .blue
        
        return cell
    }
}

ざっくり説明すると、numberOfSectionsは、セクションの数で、numberOfItemsInSectionは、セルの数です。

collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath)で、Storyboardに紐付けたセルを呼んでいます。

これで、UICollectionViewの実装が出来ました。

command + option + control + enterで二分割して、CollectionViewを紐付けましょう。

まずは、セルだけのファイルを作成します。

command + nを押して新規ファイルウィンドウを開きましょう。

①Cocoa Touch Classを選択
②Nextをクリック

①Subclass ofをUICollectionViewCellに変更
②CollectionViewCellと入力されていることを確認
③Also create XIB fileのチェックをONにする
④Nextをクリック

そのままCreateをクリック

①CollectionViewCell.xibを選択
②Collection View Cellを選択
③  (Show The Attributes inspector)をクリック
④CustomCellと入力

わかりやすいように背景色を青にしておきます。

CollectionViewCell.swiftのawakeFromNib()に以下のコードを追記しましょう。

backgroundColor = .blue

ここで色々とセルの装飾を行います。

ViewController.swiftのViewDidLoad()に以下のコードを記述

collectionView.register(UINib(nibName: "CollectionViewCell", bundle: nil), forCellWithReuseIdentifier: "CustomCell")

これで別ファイルのカスタムセルをViewControllerに登録しているイメージです。

引き続きViewController.swiftに、extensionで以下のコードを記述しましょう。

extension ViewController: UICollectionViewDelegate, UICollectionViewDataSource {
    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 1
    }
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 10
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CustomCell", for: indexPath) as! CollectionViewCell
        return cell
    }
}

ポイントは、cellという変数に、as! CollectionViewCellでインスタンスを生成しているところです。

では、もう少し装飾してみましょう。CollectionViewCellにLabelを配置しましょう。

①CollectionViewCell.xibを選択
②Labelを適当に配置

command + option + control + enterで二分割して、labelを紐付けましょう。

ViewController.swiftのcollectionViewのセルの内容を決める関数に以下のコードを記述

cell.label.text = "\(indexPath.row)番目のセル"

これで、カスタムセルを使ったUICollectionViewの実装が出来ました。