【Swift5】簡単なXibの使い方

# はじめに
お初投稿なのでお手柔らかに・・・

今回は、Xibを使ってcellを作成し、簡単な出力をしてみたいと思います。(CollectionViewを使います。)
プロジェクト作成後からの説明となっているので、コードだけ見たい方は最後のほうへ。。。

## 今回のゴール(イメージ)
今回作成するイメージは、こんな感じです。
まぁ、StoryBoardからcell作成するのとXibでcell作成時の出力は一緒ですね。
![スクリーンショット 2019-06-16 23.24.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185888/15b4052f-fcff-e30e-20cc-81f23a0d22cb.png)


それでは実際にやっていきましょう。

# 実際にやってみよう
## Xibファイルの作成

まずは、New FileでCollectionViewCellを作成します。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185888/c012fc06-9bf1-cfd1-e930-e5159068820d.png)

「Cocoa Touch Class」を選択
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185888/88487f65-d502-af3b-3654-8f2da446b956.png)

ここで、「Also create Xib flie」にチェックをつけてXibファイルも一気に作っちゃいます。
(もうCellファイルがあるよって方は、New Flie選択→View選択でXibファイルが作成できます)
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185888/ede8508d-1e57-9253-5e56-b451ffabc765.png)

作成したXibファイルを見ると、こんな感じになってます。
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185888/0e492eb6-046c-dfed-a42e-8f08f393b0f7.png)



## Xibの設定
最初に、XibファイルのCellのidentifierを"cell"と設定します。
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185888/67eaaf8d-9a53-8367-113b-96870b45d5ae.png)


次に、Xibファイル内のCell部分にLabelを1つおいて、AutoLayoutをかけます。
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185888/63fe2c76-d059-f7bf-82d1-c937eb8b2adb.png)


そして、一緒に作成した、CollectioViewCell.swiftにLabelを紐付けます。
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185888/eae5b097-cbd4-8636-02a6-e560427ea6fb.png)


## storyboardの設定
Main.storyboardの方では、ViewControllerの上にCollectionViewを配置し、AutoLayoutをかけます。
この時、ClloectionViewの中にCollectionViewCellが入っていますが、今回はXibを使うため、消しちゃってください。
![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185888/6bb98c1a-5e5f-7540-126a-edb174a5c2ad.png)


そして、CollectionViewをViewController.swiftの方に紐付けます。
![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185888/514b74c9-7213-79ac-8a30-da8df73e08ef.png)


また、今回はUICollectionViewLayoutでレイアウトしないので、直書きでCellのサイズを指定します。
(item Size：width→414, height→70と指定)
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185888/70d918eb-5f6d-4e20-849e-b5655d98f915.png)


これで準備おkです。

## 実際のコード
実際にコードを書いていきます。(最低限)


```ViewController.swift
class ViewController: UIViewController {
    @IBOutlet weak var collectionView: UICollectionView!
    
    let array = ["hoge", "ほげほげ", "Hello!"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        collectionView.dataSource = self
        
        let nib = UINib(nibName: "CollectionViewCell", bundle: nil)
        self.collectionView.register(nib, forCellWithReuseIdentifier: "cell")
        
    }
}

extension ViewController: UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return self.array.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! CollectionViewCell
        
        cell.label.text = array[indexPath.row]
        return cell
    }
}
```
 
ここの2行で、XibをcollectionViewに登録しています。

- nibName：CollectionViewCellファイルの名前
- forCellWithReuseIdentifier：Xibファイル内のCellのidentifierで設定した名前

```ViewController.swift
let nib = UINib(nibName: "CollectionViewCell", bundle: nil)
self.collectionView.register(nib, forCellWithReuseIdentifier: "cell")
```

以上で、簡単なXibの使い方でした。
自分も勉強中なので、ミスがあるかもしれないですが、、

ありがとうございました。