【Xcodeのお勉強】セグエでシーンを移動する

セグエで画面遷移をするお勉強です

View Controllerを配置して猫の写真を置く

Utility areaからドラッグアンドドロップで配置

Image viewを配置して、猫の写真をxcodeに取り入れる。猫の写真を画面いっぱいに表示するために「Aspect Fill」を利用した。

遷移用のボタンを配置する

初期配置されているView Controllerから新しく配置したView Controllerへ遷移させる。初期配置されている方に「Cat」というボタンをつくる

セグエで接続する

「Cat」ボタンをタップしてControlで新しいView Controllerにドラッグ・アンド・ドロップし、表示されるメニューから「Present Modally」を選択する

セグエをクリックするとどのように接続されているかがよくわかる。

ビルドしてみる

可愛すぎる

トランジションを設定する

Utility areaの中に「Transition」という項目があり、ここでセグエのアニメーションを変更することができた。

・Cover Vertical(デフォルトの動きでモーダルと呼ぶっぽい)
・Flip Holizontal(くるっと回転する)
・Cross Dissolve(そのまんまクロスディゾルブ。フェードインみたいな)
・Partial Curl(ページを捲ったような遷移)

Unwind Segueを利用する

アンウィンドセグエとは前の画面に戻る遷移をStoryboard上で表現するためのセグエ。デリゲートを行わなくてもStoryboard上で簡単に画面を戻せる。

まずは「ViewController.swift」に以下のコードを記述する

@IBAction func comeHome (segue: UIStoryboardSegue){
 }

戻るボタンを作る

catボタンを作った時の要領で戻るボタンを作る

戻るボタンからActionを接続する

戻るボタンをクリックしてControlを押しながらView Controller上部のExitに接続する。先ほど定義した「comeHome」を選択する

Unwindセグエが追加されたことがわかる。実際にタップしてみると画面に戻ってくれる。

出来上がり

この記事が気に入ったら
いいね ! しよう