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

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

 

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

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

 

blog-page_footer_336




blog-page_footer_336




-iOS
-

執筆者:


comment

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

CAPTCHA


関連記事

[Swift]AlertControllerでメモリリークが起きた!便利なMemory Graph

1 はじめに2 今回の問題2.1 deinitの調査2.2 原因の調査3 解決策4 Memory Graphについて5 さいごに6 おすすめ書籍 はじめに こんにちは、suzukiです。この記事の結論 ...

swift

[Swift 3] テキストの装飾(フォント・文字サイズ・文字間隔・行間・文字色・下線)

1 はじめに2 フォント・文字サイズ変更3 文字間隔4 行間5 文字色6 下線7 さいごに8 おすすめ書籍 はじめに どうもはじめです。 今回は文字の装飾をやってみようと思います。 完成図を載せておき ...

iOS14のWidget機能を使ってみた。

1 はじめに2 Xcode 12 betaの入れ方3 WidgetExtensionの追加方法4 デフォルトのコード説明5 Configurationについて6 プロバイダー6.1 snapshot6 ...

Sign in with Appleの実装

1 はじめに2 Sign in with Appleとは2.1 iOS レビューガイドライン2.2 つまり3 準備4 実装5 デザイン6 さいごに7 おすすめ書籍 はじめに こんにちは、nukkyです ...

swift

Swift ChartsライブラリとCryptowatchAPIでローソク足を描画してみる。

1 はじめに2 CryptoWatchについて2.1 OHLC3 リクエスト方法3.1 CryptoWatchのAPI3.2 Swiftでの実装方法4 さいごに5 おすすめ書籍 はじめに こんにちは鈴 ...

フォロー

blog-page_side_responsive

2017年6月
 123
45678910
11121314151617
18192021222324
252627282930  

アプリ情報

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