CollectionViewをつくってみる

## 環境
Xcode  13.1
Swift 5.5.1

## CollectionViewをつくる

#### View Controller > View の上に、Collection Viewを配置
`Section　Header`をSB上で表示するには `Attributes Inspector` > `Accessories` > `Section Header` にチェックしました
背景色の設定はStoryboard上で行いました
![スクリーンショット 2021-11-13 23.28.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505421/3f49df5e-c035-a262-603c-a6f1b208dd94.png)

#### HeaderやCellのidentifierを設定
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505421/b7ebed8d-c715-83b9-8ed2-b02d66b274e6.png" width=300px>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505421/5c0d6e48-0c6a-1276-f455-7395c211306c.png" width=300px>

#### HeaderやCellのクラスを作成する

- CollectionViewにはTableViewとは異なり、中はほとんど空なので自分で作る
- Headerのクラスは`UICollectionReusableView`

```swift
import UIKit

class CollectionReusableView: UICollectionReusableView {
    @IBOutlet weak var label: UILabel!
}
```

```swift
import UIKit

class CollectionViewCell: UICollectionViewCell {
    @IBOutlet weak var label: UILabel!
}
```
#### Header / CellのCustom Classを設定
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505421/3cd8f5db-b1ab-76bc-c993-25aa167f5f08.png" width=200px>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505421/b61dcee7-6777-f976-1db6-94ac1ff0742d.png" width=200px>

#### コードの実装

- `TableView`でrowとする部分は`row`でもエラーは発生しないものの基本的に`item`を使います
- `CollectionView`では基本レイアウトのようなものが存在しないので、全て設定しないと思ったようなものになりません（ここでは`UICollectionViewFlowLayout`を使用）

```swift
import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var collectionView: UICollectionView!
    // CellのUILabelに表示するテキスト
    var data = [["0A", "0B", "0C", "0D", "0E"], ["1A", "1B"], ["2A", "2B", "2C"]]

    override func viewDidLoad() {
        super.viewDidLoad()
        collectionView.dataSource = self
        // レイアウト設定（任意）　　
        let layout = UICollectionViewFlowLayout()
        layout.sectionInset = UIEdgeInsets(top: 20, left: 15, bottom: 20, right: 15)
        let cellSize = view.bounds.width / 3 - 20
        layout.itemSize = CGSize(width: cellSize, height: cellSize)
        layout.headerReferenceSize = CGSize(width: view.bounds.width, height: 50)
        collectionView.collectionViewLayout = layout
    }
}

extension ViewController: UICollectionViewDataSource {
    // Sectionの数
    func numberOfSections(in collectionView: UICollectionView) -> Int {
        data.count
    }

    // 各Sectionのアイテム（Cell)数
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        data[section].count
    }

    // Headerに表示するビューの設定
    func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
        let header = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "Header", for: indexPath) as! CollectionReusableView
        header.label.text = "Section\(indexPath.section)"
        return header
    }

    // アイテム（Cell）に表示するビューの設定
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath) as! CollectionViewCell
        cell.label.text = data[indexPath.section][indexPath.item]
        cell.backgroundColor = .green![Something went wrong]()

        return cell
    }
}
```

ここまでで静的な表示は完了
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505421/2db0c339-6303-aa87-587e-463c103e956e.png" width=30%>

誤りなどがありましたら、ご指摘いただければ幸いです。