セグエで画面を遷移する

窓

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

プロジェクトの作成

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

createnewproject

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

singleview

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

3

ボタンや画面の設置

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

gamen

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

const

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

update

画面の遷移

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

modally

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

セグエ

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

トランジションの選択

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

  1. Cover Vertical(Defaultはこれ)
  2. Flip Horizontal
  3. Cross Dissolve
  4. Partial Curl

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

transition

シーンを閉じて戻る

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

File->New->File…

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

スクリーンショット_2015_03_08_18_24

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

setting

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

メニューXcode

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

action

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

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

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

Unwindセグエを利用する

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

    @IBAction func comeHome (segue: UIStoryboardSegue){
        
    }

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

スクリーンショット 2015-03-08 18.34.52

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

著者:安井 真人(やすい まさと)