iOS

[Swift3] Segmentを使った画面切り替え (Extra View)

投稿日:

はじめに

こんにちははじめです。
Segmentを使って画面の切り替えを行うにはいくつか方法はあると思いますが、
今回は[Extra Views]というものを使用して画面の切り替えを行いたいと思います。

 

前提条件

Swift 3.1

 

Segmentの用意

StoryboradにSegmentを追加し、

Segmentがタップされた時の処理を用意しておきます。

 

 

表示したいViewを用意

storyboardにUIViewを追加し、「First」をタップされた時に表示したい画面を作成します。

今回はタップされたセグメントがわかるように背景色とTextLabelを追加し「First」と表示しておきます。

 

Extra Viewsに追加

先ほど作成したViewをstoryboardの上部にある「First Responder」と「Exit」の間に

ドラックアンドドロップします。

※controlやoption、command等を押す必要はありません。

 

以上で先ほど作成したViewが「Extra Views」に追加されました。

同じ要領で「Second」をタップされた時に表示したいViewも「Extra Views」に追加します。

 

追加後は下の画像のようになります。

 

Segmentでの切り替え

デフォルトで表示されるViewを設定

「Extra Views」に追加されているものはaddSubViewするまで画面上に表示されないため、

ロード時に「First」のViewを表示するように追記しておきます。

 

※addSubViewをした際画面に表示されたViewがSegmentと重なってしまうので、

Segmentの下に表示されるようにframeを設定する必要があります。

 

Segmentがタップされた時に実行されるメソッドを作成

「First」がタップされた時は

「Second」をSuperViewから削除し、「First」をSuperViewに追加。

「Second」がタップされた時は

「First」をSuperViewから削除し、「Second」をSuperViewに追加するメソッド

を用意しておきます。

 

Segmentがタップされた時にメソッドが実行されるように追記

Segmentがタップされた時に先ほど作成したメソッドを実行するように

追記をします。

 

以上で完成になります。

 

完成後のソースは以下のようになります。

 

さいごに

最近見た目やautolayoutに頭を悩まされることが増えてきた気がします。

まだまだ勉強不足なので、今後とも理解を深めていこうと思います。

 

この記事が少しでも何かの参考になれば幸いです。

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

 

-iOS

執筆者:


comment

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

関連記事

swift

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

1 はじめに1.1 前提条件2 完成イメージ3 StoryBoardの準備3.1 Viewの配置3.1.1 ① Segmentを配置するView3.1.2 ② ContainerViewを表示するVi ...

swift

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

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

swift

[Swift3] ナビゲーションバーとステータスバーの色変更

1 はじめに1.1 前提条件2 ナビゲーションアイテムの色変更3 ナビゲーションバーの色変更4 ナビゲーションタイトルの色変更5 ステータスバーの色変更6 さいごに はじめに どうも、はじめです。 今 ...

swift

[Swift3] SwitchとEnumを使ってSectionやCellを指定する

1 はじめに1.1 環境2 Enumの用意3 Tableの用意4 Cellの返却にEnumを使用する5 さいごに はじめに どうも、はじめです。 今回はSectionやCellの指定にSwitchとE ...

swift

Swift3 コードでの画面遷移

1 はじめに1.1 環境2 performSegue2.1 事前準備2.2 遷移先を示すSegueを作成2.3 遷移させるイベントを作成2.4 画面遷移させる3 prepare3.1 事前準備3.2 ...

メルマガ

メールマガジン

メルマガ始めました!
詳細は以下のリンクから
http://re-engines.com/mailmagazine/

amazon

Web版MyCoach

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

アプリ情報

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

リンク

follow us in feedly
2017年6月
« 5月 7月 »
 123
45678910
11121314151617
18192021222324
252627282930