【Swift】別のViewControllerのViewを使いたい！

#はじめに
あるViewControllerのViewを別のViewControllerでも使いたい！って時ありますよね。
そんな時はどうすれば良いのかを解説します。

#GitHub
クローンなどしてもらっても、構いません。

https://github.com/0429oonishi/addChild

#手順
AというViewControllerのViewにBというViewControllerのViewを表示させたいとします。手順は以下の４つです。
#####1: Bのインスタンスを生成する
#####2: BをAの子要素にする
#####3: BのViewをAのViewに追加する
#####4: Bに対して処理が終了したことを伝える
言葉だけだとわかりずらいので、実際にコードを見ていきましょう。

#作成するもの
以下のようなViewController(FirstViewController)を作成します
![スクリーンショット 2021-03-27 9.44.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954451/775b87b3-37b3-2568-8af5-7224bd708288.png)
SecondVCボタンをタップすると
![スクリーンショット 2021-03-27 9.45.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954451/da205e8d-12ce-5c8d-dd05-5c8450f90652.png)
ThirdVCボタンをタップすると
![スクリーンショット 2021-03-27 9.46.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954451/e170718d-b655-a61f-97f0-b656c77d1446.png)
このように、背景色が変わるような処理を、別のViewControllerを子要素にしたりすることで実装してみます。

#実践
Main.storyboardは以下のようにしてください。
![スクリーンショット 2021-03-27 9.51.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954451/601f4948-804a-4b79-3cdb-73d70207a16c.png)
左から、FirstViewController、SecondViewController、ThirdViewControllerです。
そして、FirstViewConrtrollerの接続は以下のようにします。
![スクリーンショット 2021-03-27 9.53.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954451/5ecc849d-44a7-9e8f-b6d3-c79123fe6deb.png)
元々あるViewに対してaddSubViewをしてしまうと、ボタンなどにかぶってしまうため、FirstViewをこのような階層でおいています。このViewに対してaddSubViewをしていきます。
![スクリーンショット 2021-03-27 9.55.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954451/82db0e33-9d3a-988d-fa34-dda08f9863d6.png)

それでは、SecondViewControllerのViewをFirstViewControllerのFirstViewに表示させる処理を右下のボタンがタップされた時に実装してみましょう。
手順１
SecondViewControllerを生成する

```Swift:FirstViewController
let secondVC = storyboard?.instantiateViewController(identifier: "SecondViewController") as! SecondViewController
```

手順2
FirstViewControllerの子要素にSecondViewControllerを追加する

```Swift:FirstViewController
self.addChild(secondVC)
```

手順3
firstViewにSecondViewControllerのViewをaddSubViewする

```Swift:FirstViewController
firstView.addSubview(secondVC.view)
```

手順4
SecondViewControllerに処理が終了したことをつたえる

```Swift:FirstViewController
secondVC.didMove(toParent: self)
```

このような順番で記述してあげることで、ボタンをタップした時にSecondViewControllerのViewがFirstViewControllerのfirstViewに表示されると思います。
同じようにThirdViewControllerでもやってあげたコードが以下のようになります。
![スクリーンショット 2021-03-27 10.05.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954451/06b73be7-d86f-583a-ea95-7eb762ef8ad2.png)
これで二つのボタンを押したときに交互に背景色が赤と青のViewが表示されてくれると思います。

ところで、ViewHieHierarchyはどのようになっているのでしょうか？
何回かボタンをランダムでタップした後に、以下の左から7番目のボタンをXcodeで押してみてください。
![スクリーンショット 2021-03-27 10.10.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954451/f11d2cbf-e283-6355-c6e7-d2a35b7a33cc.png)
このように、赤と青のViewがたくさん並んでしまってますよね。。。
![スクリーンショット 2021-03-27 10.12.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954451/683ee400-4488-e0ac-189f-89fbcb2f58d0.png)
これは、ボタンを押すたびに生成だけして消去していないので、ボタンを押した分だけViewが上に重ねられていくためです。
これを解決するために生成する前に、以前生成したViewを消去してから生成してあげましょう。
各ボタンに以下を記述してください

```swift:FirstViewController
firstView.subviews.forEach { $0.removeFromSuperview() }
```
これで、ボタンを何度押してもViewが重ならずになったことをViewHieHierarchyで確認してみてください。
![スクリーンショット 2021-03-27 10.16.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954451/3ca5d8f3-7da1-db38-e404-b4eaa6d57576.png)

#おわりに
おわりです。