CollectionViewの基礎〜カスタムセルで画像とタイトルを表示〜

## サンプルの概要
CollectionViewのカスタムセルを用いた実装方法を紹介します。
今回はCollectionViewに画像、文字を表示しました。
GitHubリンク： https://github.com/hinakko02/CollectionViewsSample

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3090887/eb9f2cb8-c9d3-e765-d5b6-2b437c8d144f.jpeg" width=300>

## カスタムセルの作成方法
①StoryboardにCollectionViewをのせ、下記のように制約します！
今回はカスタムセルを作成するためCollectionViewCellは削除しておきます！
![76dc28d0f42fea966fc77f660db76357.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3090887/989c872d-581f-63cd-15c7-90199e81b648.png)

② CollectionViewからcontrolを押しながらViewControllerファイルに持っていき、IBOutletを作成する。
![cf891838787a7a9ff25de7df746ff520 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3090887/9591e237-dad1-2201-0c08-08db2fcc1c5f.png)

③command + n　を押し、カスタムセルのファイル作成。
CociaTouchを選択し、Nextを押す。
![c72f7b3a677a56315d0ce16b02452ea2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3090887/e9b46edb-fec9-e347-95f4-370a228b7b8f.png)

③Subclass ofをUICollectionViewCellに変更する！
ClassをCollectionViewCellのままにし、Also create XIB fileのチェックし、Nextを押す。
![2c9ba226e64c302f6ac604d791a551ac.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3090887/5c630839-7f6c-3182-b209-5848a6a63984.png)

④作成されたCollectionViewCell.xibのファイルを開く！
identifierにCollectionViewCellと入力。
![a44137958b4137888de4d53844070b5c.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3090887/060bd873-8bd2-62bd-b943-21f23bb29d9c.png)

⑤CollectionViewCellのWidth180、Height270にする。
![c93ae45d63ef709af5472a37e2c733ef.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3090887/4c6c8f6a-82e4-f8d0-571c-996c298d529e.png)
⑥UIImageViewを追加し、下記のように制約する。
![6f01f1078589027cb14e321d86b1bdc1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3090887/9a89acf4-7c18-2671-5d45-3eb8d15d5256.png)
⑦Labelを追加し、下記のように制約する。
![ff5fdf794a510e85a72740bc1d5c7969.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3090887/6437496f-08d9-46c5-cb58-28683643aaf9.png)

⑧　UIImageViewからcontrolを押しながらCollectionViewCellファイルに持っていき、IBOutletを作成する。
Labelからcontrolを押しながらCollectionViewCellファイルに持っていき、IBOutletを作成する。
![cdbb740463f8309e78d4fcc0e39d7cab.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3090887/03681fcf-1351-9d05-bc51-399db8db745b.png)
## CollectionViewCellに表示する画像、文字が記述されたModelのCreature.swiftを作成。
Assets.xcassetsに画像を追加する。
```Swift:Creature.swift
struct Creature {
    let title: String
    let image: UIImage
}

let creatures: [Creature] = [
    Creature(title: "Piyo", image: UIImage(named: "image1")!),
    Creature(title: "Chris", image: UIImage(named: "image2")!),
    Creature(title: "Ted", image: UIImage(named: "image3")!),
    Creature(title: "Isabella", image: UIImage(named: "image4")!),
    Creature(title: "Mike", image: UIImage(named: "image5")!),
    Creature(title: "Bem", image: UIImage(named: "image6")!),
    Creature(title: "Bera", image: UIImage(named: "image7")!),
    Creature(title: "Bero", image: UIImage(named: "image8")!),
    Creature(title: "Bob", image: UIImage(named: "image9")!),
    Creature(title: "Nick", image: UIImage(named: "image10")!)
]
```



## カスタムセルとViewControllerの紐付け
下記のようにviewDidLoad()に記述する。
forCellWithReuseIdentifierに先ほどのidentifierで設定した"CollectionViewCell"を記述する。
```Swift: ViewController.swift
class ViewController: UIViewController {

    @IBOutlet weak var collectionView: UICollectionView!

    override func viewDidLoad() {
        super.viewDidLoad()
　//カスタムセルとViewControllerの紐付け
        collectionView.register(UINib(nibName: "CollectionViewCell", bundle: nil), forCellWithReuseIdentifier: "CollectionViewCell")
        collectionView.dataSource = self
        collectionView.delegate = self
        collectionView.collectionViewLayout = UICollectionViewFlowLayout()
    }
}
```

## UICollectionViewDataSource
CollectionViewCellに画像と文字を表示するためにsetUp()メソッドを作成。
```Swift: CollectionViewCell.swift
class CollectionViewCell: UICollectionViewCell {

    @IBOutlet weak var collectionImageView: UIImageView!
    
    @IBOutlet weak var nameLabel: UILabel!
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }
    func setUp(with creatures: Creature) {
        nameLabel.text = creatures.title
        collectionImageView.image = creatures.image
    }
}

```
ViewControllerにUICollectionViewDataSource機能を拡張する
```Swift: ViewController.swift
extension ViewController: UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return creatures.count
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CollectionViewCell", for: indexPath) as! CollectionViewCell
        cell.setUp(with: creatures[indexPath.row])
        cell.layer.borderColor = UIColor.lightGray.cgColor
        cell.layer.borderWidth = 3.0
        cell.layer.cornerRadius = 8.0
        return cell
    }
}
```

## UICollectionViewDelegateFlowLayout
ViewControllerにUICollectionViewDelegateFlowLayout機能を拡張する
```Swift: ViewController.swift
extension ViewController: UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: 180, height: 270)
    }
}
```

## 参考文献

https://ios-docs.dev/collectionview/


https://youtu.be/aU_kTzMZHQ8?si=IU65pgwpDKxBNhv-