6
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-03-27

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

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

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

#作成するもの
以下のようなViewController(FirstViewController)を作成します
スクリーンショット 2021-03-27 9.44.29.png
SecondVCボタンをタップすると
スクリーンショット 2021-03-27 9.45.56.png
ThirdVCボタンをタップすると
スクリーンショット 2021-03-27 9.46.10.png
このように、背景色が変わるような処理を、別のViewControllerを子要素にしたりすることで実装してみます。

#実践
Main.storyboardは以下のようにしてください。
スクリーンショット 2021-03-27 9.51.28.png
左から、FirstViewController、SecondViewController、ThirdViewControllerです。
そして、FirstViewConrtrollerの接続は以下のようにします。
スクリーンショット 2021-03-27 9.53.08.png
元々あるViewに対してaddSubViewをしてしまうと、ボタンなどにかぶってしまうため、FirstViewをこのような階層でおいています。このViewに対してaddSubViewをしていきます。
スクリーンショット 2021-03-27 9.55.11.png

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

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

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

FirstViewController
self.addChild(secondVC)

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

FirstViewController
firstView.addSubview(secondVC.view)

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

FirstViewController
secondVC.didMove(toParent: self)

このような順番で記述してあげることで、ボタンをタップした時にSecondViewControllerのViewがFirstViewControllerのfirstViewに表示されると思います。
同じようにThirdViewControllerでもやってあげたコードが以下のようになります。
スクリーンショット 2021-03-27 10.05.46.png
これで二つのボタンを押したときに交互に背景色が赤と青のViewが表示されてくれると思います。

ところで、ViewHieHierarchyはどのようになっているのでしょうか?
何回かボタンをランダムでタップした後に、以下の左から7番目のボタンをXcodeで押してみてください。
スクリーンショット 2021-03-27 10.10.55.png
このように、赤と青のViewがたくさん並んでしまってますよね。。。
スクリーンショット 2021-03-27 10.12.11.png
これは、ボタンを押すたびに生成だけして消去していないので、ボタンを押した分だけViewが上に重ねられていくためです。
これを解決するために生成する前に、以前生成したViewを消去してから生成してあげましょう。
各ボタンに以下を記述してください

FirstViewController
firstView.subviews.forEach { $0.removeFromSuperview() }

これで、ボタンを何度押してもViewが重ならずになったことをViewHieHierarchyで確認してみてください。
スクリーンショット 2021-03-27 10.16.59.png

#おわりに
おわりです。

6
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?