iOS

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

投稿日:2017年6月28日 更新日:

はじめに

こんにちははじめです。
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に頭を悩まされることが増えてきた気がします。

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

 

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

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

 

page_footer_300rect




page_footer_300rect




-iOS
-

執筆者:


comment

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

CAPTCHA


関連記事

swift

[Swift4]UITextViewにプレースホルダをつける

1 はじめに1.1 前提条件2 実装3 さいごに はじめに こんにちは、nukkyです。 UITextFieldにはプレースホルダが標準で用意されていますが、UITextViewには用意されていません ...

UnityのiOSネイティブをSwiftで書く

1 はじめに2 UnityのiOSネイティブとは?3 今回作るもの4 必要な構成5 unity-swiftの導入6 必要な機能の実装6.1 Swiftクラスの作成6.2 Objective-C++でU ...

swift

Swift3 コードでの画面遷移

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

swift

[Swift]タブの切り替え時にアニメーションが簡単に実装できる「TransitionableTab」

1 はじめに2 準備3 実装4 さいごに はじめに こんにちは、nukkyです。 今回は、UITabBarControllerの切り替え時にアニメーションを実装できるライブラリ「Transitiona ...

[Swift]AlamofireでファイルのUploadをしてみる

1 はじめに2 CarthageでAlamofireを導入する2.1 CartFileの作成とライブラリのダウンロード2.2 Xcodeの設定3 Alamofireとは3.1 AlamofireのHT ...

フォロー

follow us in feedly

page_side_300rect

2017年6月
« 5月 7月 »
 123
45678910
11121314151617
18192021222324
252627282930 

アプリ情報

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