swift CollectionView超基本の使い方

TableViewに続いてCollectionViewの使い方をメモしておきます。

1.基本要素
　1.1 DataSource、Delegate（StoryBoard上）
　StoryboardでCollectionViewを追加したら、
　CollectionViewとViewControllerの関連付をしてDataSource、Delegateをチェック
　チェックできたら、こんな感じ
　![スクリーンショット 2020-11-09 13.49.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/644086/d0c56d72-233d-d7a4-0cd5-865ea00c78df.png)

　CellにIDを追加
![スクリーンショット 2020-11-24 10.52.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/644086/ff348951-c418-6cf5-9246-977ac6d46fcb.png)

　1.2 DataSource、Delegate（ソースコード上）
　ViewControllerでプロトコルを追加

```swift:CellDetailPageViewController
class CellDetailPageViewController: UIViewController,UICollectionViewDelegate, UICollectionViewDataSource {
}
```

　CollectionViewインスタンスを追加

```swift:CellDetailPageViewController
@IBOutlet weak var collectionView: UICollectionView!
```

 1.3エラーで返した通り、メソッドを追加
　Cellの数を決める

```swift:CellDetailPageViewController
    let contentNeedShow = ["アップル","イチゴ","グレープ","パイナプル","キウイ","立山","男体山","谷川岳","金峰山","穂高岳","大菩薩嶺","コーヒー","豆乳","ジュース","炭酸","水"]
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return contentNeedShow.count
    }
```

　Cell中身を決める(基本要素の色を設定)

```swift:CellDetailPageViewController
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) 
    cell.backgroundColor = UIColor.lightGray
    return cell
    }
```

2.カスタマ要素
　2.1Cellに文字を入れる、RoundedCornerを採用
　CollectionViewCellクラスを新しく作る

```swift:Cell
class Cell: UICollectionViewCell{
    @IBOutlet weak var label: UILabel!
}
```

　Cell中身を返す変数を変更

```swift:CellDetailPageViewController
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! Cell
    cell.backgroundColor = UIColor.lightGray
    cell.layer.cornerRadius = 10
    cell.label.text = contentNeedShow[indexPath.row]
    return cell
    }
```

　2.2 CollectionView全体と枠との間隔を調整

　新しくプロトコルUICollectionViewDelegateFlowLayoutを追加

```swift:CellDetailPageViewController
class CellDetailPageViewController: UIViewController,UICollectionViewDelegate, UICollectionViewDataSource,UICollectionViewDelegateFlowLayout {
}
```

　メソッド追加

```swift:CellDetailPageViewController
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let horizontalSpace : CGFloat = 20
    let cellSize : CGFloat = self.view.bounds.width / 3 - horizontalSpace
    return CGSize(width: cellSize, height: cellSize)
    }
```

　viewDidLoadへ追加

```swift:CellDetailPageViewController
    override func viewDidLoad() {
        super.viewDidLoad()

        let layout = UICollectionViewFlowLayout()
        layout.sectionInset = UIEdgeInsets(top: 15, left: 15, bottom: 15, right: 15)
        collectionView.collectionViewLayout = layout
    }
```

CellとCell間のHorizontal間隔を調整

```Swift
layout.minimumInteritemSpacing = 5
```

CellとCell間のVertical間隔を調整

```Swift
layout.minimumLineSpacing = 5
```

基本は画面の上下でScrollできるのですが、
左右にScrollするには以下を追加すればOK

```swift
layout.scrollDirection = UICollectionView.ScrollDirection.horizontal
```

　結果はこんな感じ
![Simulator Screen Shot - iPhone 8 - 2020-11-09 at 14.11.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/644086/1111fb6e-d4ec-8ebf-1c1a-f9f0639c54a0.png)