iOS

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

投稿日:2017年7月21日 更新日:

はじめに

どうも、はじめです。

前々回に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を2つ重ねて配置します。
加えて、ContainerViewの切り替えがわかるようにそれぞれのContainerViewに対し、
背景色の設定とLabelの追加をしておきます。

 

③ 固定Viewを表示するView

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

 

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

 

SegmentでContainerViewの切り替えを実装

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

 

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

①各変数、配列の定義

以下の三つを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が表示される時なのでこちらも把握しておく必要があります。

 

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

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

page_footer_300rect




page_footer_300rect




-iOS
-

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

swift

SwiftでPDFを表示する(iOS11以前対応版)

1 はじめに1.1 前提条件2 実装3 さいごに はじめに こんにちは、nukkyです。 SwiftでPDFを表示したい場合iOS11以降ならPDFKitがありますが、自分の様にまだ11以前のOSにも ...

swift

iOSで画像の任意の場所をぼかし処理する方法

1 はじめに1.1 前提条件2 準備3 実装3.1 ぼかし処理のイメージ画像3.2 サンプルコード4 さいごに はじめに iOSで写真の任意の場所にぼかし処理をしたいケースがありましたので、 iOSで ...

swift

[Swift3] ScrollViewを使ってみた!

1 はじめに2 縦スクロール3 横スクロール4 横スライドでページング5 さいごに はじめに どーもはじめです。 ずっと苦手意識というかあまり使いたくないイメージを持っていたのですが、 そろそろ一回ぐ ...

swift

[Swift]動画撮影にて好きなサイズでプレビュー表示する

1 はじめに1.1 前提条件2 実装3 さいごに はじめに こんにちは、nukkyです。 今回はメインのビューの右上とかに小窓の様なプレビューにカメラの映像を出して、動画撮影するという機能を作成したの ...

swift

Swift3 + Alamofire4 + Unbox2.4を使ってJSONをパースする

1 はじめに1.1 前提条件1.2 完成形2 モデルの作成3 APIクラスの作成4 ViewControllerの作成4.1 Delegateの指定4.2 TableViewの設定4.3 Search ...

page_side_300rect

Web版MyCoach

私たちはより広い方にコーチングを知ってもらいたいと考えています。
下記のサイトにて、コーチの方々を紹介しておりますので、よろしければご覧ください。

アプリ情報

私たちは、目標を達成したい方を応援する、TODOアプリもリリースしております。
下記のアイコンから無料でダウンロードできます。

リンク

follow us in feedly
2017年7月
« 6月 8月 »
 1
2345678
9101112131415
16171819202122
23242526272829
3031