セグエで画面を遷移する

2011年3月12日：iOS

　アプリケーションには画面遷移をよく使用します。WindowsやOS Xの場合は、画面遷移でウインドウを使用します。しかし、スマホやタブレットの場合は画面が小さいので、ウインドウではなくシーン（画面）を移動させる仕組みが備わっています。この移動にたずさわるのがセグエです。ここでは、セグエを使って画面遷移をする方法について解説します。

プロジェクトの作成

　ボタンを押すと別の画面へいき、画面上のボタンを押すと元に戻るプログラムを作ります。そのためにプロジェクトの作成を行います。Xcodeを立ちあげて「」を選択します。

iOSのSingle View Applicationを選択します。

適当なプロジェクト名をつけ、保存します。使用する言語はSwiftとします。

ボタンや画面の設置

Main.storyboardへ移動して、ボタン(button)２つと画面(ViewController)を以下のように設置します。

ここでボタンの表示は「Button1」と「Button2」としています。ボタンはそれぞれ画面の中央におき、中央揃えになるように制限をいれます。

制限をいれたら、Update Constraintsを選択して整えます。

画面の遷移

ボタン１を押したら設置したViewControllerへ移行して欲しいので、ボタン１から設置したViewControllerへcontrolを押しながらドラッグ＆ドロップでつなげます。すると以下の様な画面がでるので、「present modally」を選択します。

以下のように画面がセグエでつながります。この遷移がセグエで選択することでプロパティを変更できます（後のトランジションの設定で使用）。

これで実行するとボタンをおして画面が変更されます。

トランジションの選択

　いまのままだと、ボタンを押すと下からシフトするトランジションになります。トランジションには

Cover Vertical(Defaultはこれ)
Flip Horizontal
Cross Dissolve
Partial Curl

がありセグエを選択して、Attributesインスペクタで設定できます。好きなものを選択しましょう。

シーンを閉じて戻る

　今のままではシーンを開いたら閉じて戻ることができません。そこで、ボタン２を押したら元に戻れるように設定します。ボタンを押した際の動作を記述したいので、ViewControllerクラスを作成します。メニューから

File->New->File…

を選択して、Cocoa Touch Classを選択します。そして、クラスの名前を適当につけ（ここではSecondViewController)、SubclassとしてUIViewControllerを選びます。

　作成したクラスViewController2とシーン２をつなげるために、Main.storyboardへ移動して追加したViewControllerを選択します。そして、Indentityインスペクタを開きSecondViewControllerを選択します。

あとは以下の２つの丸を選択して２画面にします。

そして、ボタンからSecondViewControllerへのActionを追加します(controlを押しながらドラッグ＆ドロップ、名前はaction_buttton)。

後は以下のようにコーディングすればおしまいです。

    @IBAction func action_button(sender: UIButton) {
        self.dismissViewControllerAnimated(true,completion:nil)
    }

実行すれば、Button１を押すと画面が表示され、Button2で画面が消えます。

Unwindセグエを利用する

もう少し簡単に画面を閉じる方法があります。それが、Unwindセグエで接続する方法です。まず、ViewControllerに以下のコードを追加します。

    @IBAction func comeHome (segue: UIStoryboardSegue){
        
    }

そして、ストーリーボードでボタンからcontrolを押しながらドラッグ&ドロップでExitへつなぎます。あとは、comeHomeを選択するだけです。

これでボタンをおせば画面が閉じてくれます。

著者：安井真人(やすい　まさと)
@yasui_masatoさんをフォロー