[iPhone]Segue による画面遷移

iPhone

Xcode:10.1
swift:4.2

Segue による画面遷移の例です。
ボタンを用意して、画面遷移して戻るだけのシンプルなものです。
storyboardを使って行います。

プロジェクト「Single View App」を予め作っておいてください。

手順は、以下のとおりです。

(1)遷移元に Navigation Contorller を追加
(2)遷移先の画面ViewControllerを用意
(3)遷移元にボタンを用意してSegueを追加

(1)遷移元に Navigation Contorller を追加

遷移先のナビゲーションバーに戻るボタンを追加するための処理をここで行います。
storyboard を表示すると、View Controller がありますので選択します。

Xcode のメニュー「Editor」を選択します。
プルダウンから「Embed In」→「Navigation Controller」を選択します。

処理が完了すると、以下のように Navigatio Controller が生成されます。

生成された Navigatio Controller を選択して「Attributes Inspector」を表示します。
「View Controller」の Title の項目の下にある「Is Inital View Controller」にチェックを入れてください。

(2)遷移先の画面ViewControllerを用意

「Libraly」から「View Cotroller」を選択して、stroyboard上にドラッグ&ドロップします。

ドロップしたところに新たに View Controllerが表示されます。

画面が切り替わったことがわかるように、新たに追加した View Controller にタイトルを設定します。

新たに追加した View Cotroller を選択し、「Attributes Inspector」を表示します。
「Title」に適当なタイトルを設定します。

(3)遷移元にボタンを用意してSegueを追加

遷移元のView Controller に画面遷移するきっかけとなるボタンを追加します。

「Libraly」から「Button」を選択して、遷移元のView Controller上にドラッグ&ドロップします。

Button が表示されたら、選択して「Attributes Inspector」にある「Title」を適当なタイトルに変更します。
背景色、文字の大きさ、色等は適当に変更します。

追加した Button を右クリックします。
「Triggered Segues」の「action」の「+」をつかんで遷移先のView Controllerに持っていき離します。
離した時点で選択項目が表示されるので、今回は、「Show」を選びます。

処理が完了すると、それぞれのView Controllerをつなぐ矢印のような表示がされます。
また、遷移先のView Controllerには、遷移元に戻るための「< Back」ボタンが表示されます。

(1)で追加している Navigatio Controllerにより、ここで自動的に追加されます。

シミュレーターで確認します。

ボタンをクリックすると、遷移先の画面に切り替わります。
ナビゲーションバーにある「<戻る」をクリックすると、元の画面に切り替わります。

コメント