[Swift]CustomViewをstorybordのviewに反映させる

よくやりかたを忘れるのでここにメモ。

この記事の内容は、カスタムビューのクラスを作り、それに紐づいたUIViewをstorybordに反映させるまでの手順についてです。
表示のスタイルの指定方法等は本記事には、載せていません。

# step1:必要なファイル群を追加する

`NewFile` > `Cocoa Touch Class` でUIViewを継承したclassを作成



<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/468821/5cbb858b-a1a6-8895-6902-d49b3dbeb595.png" width="100">


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/468821/fb43e34a-3827-297f-c6fb-09490fee685b.png" width="600">
↑ここで`Subclass of:`が`UIView`になっていることをきちんと確認。

正しく行えば、UIViweを継承したclassが既に定義してあるSwiftファイルが生成されます。

---

再び、`NewFile` > `Cocoa Touch Class` で次は前に用意したclassに紐づくViewを追加。


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/468821/f7d0be17-9d3d-750c-cc18-95bea53a8e62.png" width="100">

---

↓この2つが追加されました

![スクリーンショット 2021-02-01 20.41.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/468821/4936c5e3-26e3-68ab-0aaf-5b6036a80c9f.png)


# step2:.xibファイルの設定

先程追加したxibファイルを開くと↓のようになっているはずです。これだとViewControllerチックなみためとなっているので変更しましょう。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/468821/c459516b-2dbf-371d-448b-a686e44d6515.png" width="500">

Viewを選択し、右側のメニューから、`Simulated Metrics`の`Size`をデフォルトから`Freeform`に変更します。

![スクリーンショット 2021-02-01 20.45.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/468821/8925046e-8b2e-695d-f9b6-1db650e0aaa0.png)

するとViewの見た目が変わります。



<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/468821/02eb3b22-2422-2612-f26c-eddb10dcf32f.png" width="500">

---

次に先程追加したUIViewを継承したclassとxib上のUIViewを紐づける設定を行います。

`File's Owner`を選択し、右側のメニューにある`Class`に、先程追加したClassを指定します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/468821/09b452a9-f90e-4e86-5242-637fc10ec65e.png" width="300"> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/468821/6f3ce199-b30c-bc5c-97ee-83994de26016.png" width="300">

これで、classとxibの紐付けが完了しました。

---

※本サンプルでは、この状態だとデカすぎるので、大きさを少し小さくしておきます。また、storybord上に反映されていることが確認しやすいように色を変えておきます。


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/468821/c9893800-0c37-50fc-70ab-3e4dfbf25614.png" width="600">

#  step3:カスタムビューclassに初期化処理を記述

次に先程紐付けたclassに初期化処理を記述していきます。下記を参考にしてください

```swift
import UIKit

class CustomView: UIView {
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        nibInit()
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        nibInit()
    }
    
    private func nibInit() {
        let nib = UINib(nibName: "CustomView", bundle: nil)
        guard let view = nib.instantiate(withOwner: self, options: nil).first as? UIView else { return }
        self.addSubview(view)
    }
}
```

初期化処理に関してはさまざまなやり方が存在すると思うので、これが正しいとは言い切れません。

これで、カスタムビューを表示させる下準備は終了しました。

# storybordに表示してみる

最後に自分で定義したカスタムビューを実際に表示させてみましょう。

storybordにあるViewControllerに右上のプラスボタンから`View`を追加します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/468821/93e13cab-f9b4-78d8-cacb-d028ed649db0.png" width="200">

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/468821/a92d24fe-915a-5a99-b6b1-ad990aef42f5.png" width="500">

追加したViewに対して、初期化処理を記述したclassを指定します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/468821/1ae03433-3387-02e1-bd2d-658efdff326d.png" width="500">

これによって、storyboardのViewとカスタムビューが紐づきました。

ビルドして確認しましょう。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/468821/9085929e-6315-e17a-238d-aee87994e8c2.png" width="200">

スタイルが暴走していることはさておき、storyboard上に、カスタムビューを表示させることができました.

# 参考

[【Swift】カスタムUIViewの作成方法](https://love-and-geek.caraquri.com/ios-how-to-make-custom-uiview/)