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

 

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

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

blog-page_footer_336




blog-page_footer_336




-iOS
-

執筆者:

免責事項

このブログは、記事上部に記載のある投稿日時点の一般的な情報を提供するものであり、投資等の勧誘・法的・税務上の助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。


  1. 齋藤 より:

    haimenagasawa様

    お世話になっております。
    iOSアプリを個人で開発している齋藤と申します。
    突然のご連絡申し訳ございません。

    iOSアプリの実装方法について、ご教授いただきたくご連絡いたしました。

    hajimenagasawa様の下記ページを参考に動的にUIViewを切り替える機能を実装することができましたが、このContainerViewのAとBを左右スワイプでも画面を切り替えるようにしたいと考えております。

    上記の機能を追加するためには、UIPageViewControllerを使用することが考えられますが、どのように実装したらよいか知識不足のため、分かっておりません。

    大変恐縮ではございますが、ContainerViewの画面切り替えに加え、左右スワイプでも画面が切り替えられるようにするには、どのように実装したらよいかアドバイスをいただけないでしょうか。

    ■参考ページ
    https://re-engines.com/2017/07/21/swift3%E3%81%A7%E5%8B%95%E7%9A%84%E3%81%ABuiview%E3%82%92%E5%88%87%E3%82%8A%E6%9B%BF%E3%81%88%E3%82%8B-part2/

    • nukky より:

      齋藤様

      RE:ENGINESブログの閲覧ありがとうございます。
      ご質問に対する回答はnukkyが担当させていただきます。

      ContainerView左右スワイプでの切り替えですがUIPageViewControllerを使用しての切り替えも良いとは思いますが、こちらのブログの内容で実装済みなのであれば、UISwipeGestureRecognizerを使って実装するのが手早くできると思います。
      UISwipeGestureRecognizerのコードのサンプルを書いておきますので参考にしていただければと。
      実装としてはブログのchangeContainerViewで行っている内容を以下のコードのleftSwipeView、rightSwipeViewで行っていただければうまくいくと思うので頑張ってください。
      ////以下サンプルコード////

comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

[Swift4]ライブラリをやめてCodableでJSONを取り扱う

1 はじめに2 Codableとは2.1 Codable使いたい理由3 実装3.1 とりあえずJSONを読み込む3.2 ObjectMapperの場合3.3 ネスト配列に対応してみよう3.4 JSON ...

swift

[Swift3] コードで動的にオートレイアウトを変更する

1 はじめに1.1 前提条件2 事前準備3 1.NSLayoutConstraintのActiveを切り替える4 2.NSLayoutConstraintのActiveを切り替える(複数同時)5 3. ...

【Swift】FabricからFirebase CrashLyticsのアップデート

1 はじめに2 FabricとFirebase3 FabricからFirebase CrashLyticsのアップデート方法3.1 Fabricの削除3.2 Firebase CrashLyticsの ...

iOS13で申請するために押さえておきたいポイント

1 はじめに2 presentViewController3 DeviceToken4 Launch Storyboard5 Dark Mode6 Sign In with Apple7 さいごに8 ...

[Swift] プロトコルを弱参照するために

1 はじめに2 プロトコルとは2.1 プロトコルの作成方法2.2 プロトコルを採用したクラス作成2.3 使用例3 ClassOnlyProtocolとは3.1 メリット3.2 使用例4 最後に5 おす ...

フォロー

blog-page_side_responsive

2017年7月
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。