セグエで画面を遷移する
2011年3月12日:iOS
アプリケーションには画面遷移をよく使用します。WindowsやOS Xの場合は、画面遷移でウインドウを使用します。しかし、スマホやタブレットの場合は画面が小さいので、ウインドウではなくシーン(画面)を移動させる仕組みが備わっています。この移動にたずさわるのがセグエです。ここでは、セグエを使って画面遷移をする方法について解説します。
プロジェクトの作成
ボタンを押すと別の画面へいき、画面上のボタンを押すと元に戻るプログラムを作ります。そのためにプロジェクトの作成を行います。Xcodeを立ちあげて「」を選択します。
iOSのSingle View Applicationを選択します。
適当なプロジェクト名をつけ、保存します。使用する言語はSwiftとします。
ボタンや画面の設置
Main.storyboardへ移動して、ボタン(button)2つと画面(ViewController)を以下のように設置します。
ここでボタンの表示は「Button1」と「Button2」としています。ボタンはそれぞれ画面の中央におき、中央揃えになるように制限をいれます。
制限をいれたら、Update Constraintsを選択して整えます。
画面の遷移
ボタン1を押したら設置したViewControllerへ移行して欲しいので、ボタン1から設置したViewControllerへcontrolを押しながらドラッグ&ドロップでつなげます。すると以下の様な画面がでるので、「present modally」を選択します。
以下のように画面がセグエでつながります。この遷移がセグエで選択することでプロパティを変更できます(後のトランジションの設定で使用)。
これで実行するとボタンをおして画面が変更されます。
トランジションの選択
いまのままだと、ボタンを押すと下からシフトするトランジションになります。トランジションには
- Cover Vertical(Defaultはこれ)
- Flip Horizontal
- Cross Dissolve
- Partial Curl
がありセグエを選択して、Attributesインスペクタで設定できます。好きなものを選択しましょう。
シーンを閉じて戻る
今のままではシーンを開いたら閉じて戻ることができません。そこで、ボタン2を押したら元に戻れるように設定します。ボタンを押した際の動作を記述したいので、ViewControllerクラスを作成します。メニューから
File->New->File…
を選択して、Cocoa Touch Classを選択します。そして、クラスの名前を適当につけ(ここではSecondViewController)、SubclassとしてUIViewControllerを選びます。
作成したクラスViewController2とシーン2をつなげるために、Main.storyboardへ移動して追加したViewControllerを選択します。そして、Indentityインスペクタを開きSecondViewControllerを選択します。
あとは以下の2つの丸を選択して2画面にします。
そして、ボタンからSecondViewControllerへのActionを追加します(controlを押しながらドラッグ&ドロップ、名前はaction_buttton)。
後は以下のようにコーディングすればおしまいです。
@IBAction func action_button(sender: UIButton) { self.dismissViewControllerAnimated(true,completion:nil) }
実行すれば、Button1を押すと画面が表示され、Button2で画面が消えます。
Unwindセグエを利用する
もう少し簡単に画面を閉じる方法があります。それが、Unwindセグエで接続する方法です。まず、ViewControllerに以下のコードを追加します。
@IBAction func comeHome (segue: UIStoryboardSegue){ }
そして、ストーリーボードでボタンからcontrolを押しながらドラッグ&ドロップでExitへつなぎます。あとは、comeHomeを選択するだけです。
これでボタンをおせば画面が閉じてくれます。
著者:安井 真人(やすい まさと)
@yasui_masatoさんをフォロー