複数のXIBファイルを表示させる

Swift入門では、１つのStoryBordにTableViewを入れてさらにTableViewCellを入れてプログラムを記述していくことが一般的である。<br />
しかし、実際の案件になってくると、Cellの使い回しや修正コストを考えてカスタムセル（XIBファイル）を別途作成し、表示させるということがあります。<br />
そんな時に、１つのカスタムセルを繰り返し表示させるというのは調べれば出てくるが、複数のカスタムセルを表示させるというのが意外にも情報が少ないので備忘録と共有の為に投稿したいと思います。<br />

<hr />

#### ※完成イメージ<br />
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525819/41457481-f3d6-8a24-82df-0c3b16bd18b7.png" width="320px"">
3つのカスタムセルを作成し表示させる

## はじめに

任意の名前でプロジェクトファイルを作りましょう
今回は、「CustomCellView」を例として作成
## ①StoryBordにTableViewを挿入する

<img width="903" alt="スクリーンショット 2019-11-05 16.08.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525819/7e189090-a3fe-c2b7-a922-cb657afa1e96.png">

次にTableViewをIBOutletで繋ぐ
<img width="903" alt="スクリーンショット 2019-11-05 16.32.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525819/dc2b622a-9c2b-e576-62c5-a6e049ff1462.png">

最後にTableViewと黄色いViewControllerボタンを連結させ、delegateとdataSourceを繋ぐ
<img width="901" alt="スクリーンショット 2019-11-05 16.22.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525819/a25d5da9-44f6-bbbd-3f0d-4a68f355f12b.png">

## ②カスタムセル（XIBファイル）を作成
<img width="1175" alt="スクリーンショット 2019-11-05 11.10.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525819/caabad8b-97ec-316c-830e-b258a71cbc5b.png">
「Cocoa Touch Class」を選択し「Next」を押す

そうすると以下のの画面が出るので、
・任意のClass名を入力　（例）FirstCustomViewCell
・Subclass ofは、「UITableViewCell」を選択
・Also create XIB fileにチェックを入れる<font color="Red">←ここ重要！</font>
・「Next」を押し、そのまま「Create」を押してXIBファイルの作成を行う
<img width="726" alt="スクリーンショット 2019-11-05 11.10.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525819/636ce0fd-7f08-1e27-8df9-c65f616cf5ac.png">

同様に残り２つのXIBファイルを作成する
そうすると以下のように３つのファイルが作成される
<img width="991" alt="スクリーンショット 2019-11-05 17.16.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525819/7e0f331a-1e01-5c1a-39ff-a75bb7c07d75.png">

<hr />

お好みのレイアウトデザインを行う<br />

・FirstCustomViewCell.xib
<img width="552" alt="スクリーンショット 2019-11-05 17.22.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525819/0cd2b4c7-4141-1e55-eee9-daf7f9fa84b1.png">

・SecondCustomViewCell.xib
<img width="479" alt="スクリーンショット 2019-11-05 17.23.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525819/e250b57f-c753-046a-9c98-b47ca5725cf8.png">

・SardCustomViewCell.xib
<img width="454" alt="スクリーンショット 2019-11-05 17.23.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525819/4b63b8f7-1f7b-d564-1bfd-19d9492dd01c.png">

※たまにセルが重なって表示されたりします
この場合は、高さの制約がおかしい可能性があります
XIBファイルでレイアウト高さの制約を見直すと良いかもしれません
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525819/843f96b5-962e-0b98-c03d-6534ec1753aa.png" width="320px"">

## ③プログラム

enumやswitch文を使ってなるべくシンプルに記述

```swift
import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var customCellTableView: UITableView!

    enum Cell: Int, CaseIterable {
        case firstCustomViewCell
        case secondCustomViewCell
        case sardCustomViewCell

        var cellIdentifier: String {
            switch self {
            case .firstCustomViewCell: return "FirstCustomViewCell"
            case .secondCustomViewCell: return "SecondCustomViewCell"
            case .sardCustomViewCell: return "SardCustomViewCell"
            }
        }
    }

    override func viewDidLoad() {
        super.viewDidLoad()

        customCellTableView.register(UINib(nibName: "FirstCustomViewCell", bundle: nil), forCellReuseIdentifier: "FirstCustomViewCell")
        customCellTableView.register(UINib(nibName: "SecondCustomViewCell", bundle: nil), forCellReuseIdentifier: "SecondCustomViewCell")
        customCellTableView.register(UINib(nibName: "SardCustomViewCell", bundle: nil), forCellReuseIdentifier: "SardCustomViewCell")
    }
}

extension ViewController: UITableViewDelegate, UITableViewDataSource {

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return Cell.allCases.count
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cellType = Cell(rawValue: indexPath.row)!
        switch cellType {
        case .firstCustomViewCell:
            let cell = tableView.dequeueReusableCell(withIdentifier: cellType.cellIdentifier) as! FirstCustomViewCell
            return cell
        case .secondCustomViewCell:
            let cell = tableView.dequeueReusableCell(withIdentifier: cellType.cellIdentifier) as! SecondCustomViewCell
            return cell
        case .sardCustomViewCell:
            let cell = tableView.dequeueReusableCell(withIdentifier: cellType.cellIdentifier) as! SardCustomViewCell
            return cell
        }
    }
}

```

enumを使用することでセルの拡張がしやすくなり項目を追加するだけで、自動でsectionカウントを取ってくれます。
記述の仕方は、他にもあるので参考程度にどうぞ。

## 参考
https://qiita.com/euJcIKfcqwnzDui/items/848285fb6cb9c0195aab