Swift3で動的にUIViewを切り替える Part2

はじめに

どうも、はじめです。

前々回にExtraViewを使って画面の切り替えを行う方法を書きましたが
ContainerViewというものを使ってみてかなり便利なことがわかったので
備忘録的な意味も含めて今回記事を書いてみようと思います。

 

前提条件

Swift3.1

 

完成イメージ

完成イメージとしては以下のような画面になります。

動きとしては、
SegmentのFirst、Secondを選択すると、[ContainerView A]と書かれている部分が切り替わり、
それとは別に固定のViewが一つ存在している状態となります。

 

StoryBoardの準備

Viewの配置

まずはじめにわかりやすいように以下の3つのViewを用意します。
① Segmentを配置するView
② ContainerViewを配置するView
③ 固定Viewを配置するView

 

① Segmentを配置するView

このViewにはSegmentを一つ配置するだけです

 

② ContainerViewを表示するView

このViewには枠いっぱいのContainerViewを２つ重ねて配置します。
加えて、ContainerViewの切り替えがわかるようにそれぞれのContainerViewに対し、
背景色の設定とLabelの追加をしておきます。

 

③ 固定Viewを表示するView

固定で表示させるViewということが分かるように、
こちらにも背景色の設定とLabelの追加をしておきます。

 

以上でStoryBoardの設定は完了です。
設定後のStoryBoardは以下のようになります。

 

SegmentでContainerViewの切り替えを実装

今回それぞれのContainerViewの中で処理は実装しないので
MainのViewに紐づくVIewControllerのみの実装となります。
実装完了後のソースは以下になります。

import UIKit

class ViewController: UIViewController {

    // ①
    @IBOutlet weak var containerView: UIView!
    @IBOutlet weak var containerA: UIView!
    @IBOutlet weak var containerB: UIView!
    var containers: Array<UIView> = []

    // ②
    override func viewDidLoad() {
        super.viewDidLoad()
        containers = [containerA,containerB]
        containerView.bringSubview(toFront: containerA)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    // ③
    @IBAction func changeContainerView(_ sender: UISegmentedControl) {
        let currentContainerView = containers[sender.selectedSegmentIndex]
        containerView.bringSubview(toFront: currentContainerView)
    }
}

 

それでは上記ソースに関して各項目ごとに解説を書いていきます。

①各変数、配列の定義

以下の三つをIBOutlet接続します
・containerAとBの親ViewであるUIView(以後「containerView」と記述させて頂きます)
・containerViewA
・containerViewB
さらに、後で使用するcontainersというUIViewを格納する配列を作成しておきます。

 

②Load時の処理

①で作成したcontainersという配列にcontainerAとcontainerBを格納し、
明示的にcontainerAをcontainerView内の最前面に配置します。

 

③ContainerViewの切り替え

Segmentからcontrol+ドラッグ&ドロップしてIBActionを作成します。
※typeを「UISegmentedControl」に設定してください

選択されたSegmentのIndexをKeyとして配列containersから該当するContainerViewを取得し、
containerView内で最前面に配置します。

 

以上で全ての実装が完了となります。

 

さいごに

ContainerViewを使用すると切り替えたい画面中での複雑な処理の実装が簡単に行えます。
注意しておきたいのはContainerViewはwillRemoveSubview()してもStoryBoard上から削除されるわけではないこと。
（addSubView()やwillRemoveSubview()をしても親View内での配置順序が変わるだけでした。）
ContainerViewに紐づくViewControllerファイルがLoadされるタイミングがMainとなるViewが表示される時なのでこちらも把握しておく必要があります。

 

最後まで見て頂きありがとうございました。

何か間違い等あった場合はぜひコメントを頂ければと思います。