超簡単!画面遷移の方法をマスターする(モーダル編)④

この記事は2016年1月5日に書かれたものです。内容が古い可能性がありますのでご注意ください。


前回の続きです。前回は緑画面からもとのピンク画面に戻る際に、
dismissViewControllerAnimated(flag: Bool, completion: (() -> Void)?)メソッド
を使用して実装しました。
今回はもう一つの実装方法を説明したいと思います。

【方法その②】Unwind segueを使用する

Unwind segueは画面遷移の「戻る」という動作をstoryboard上で実装できる仕組みです。
storyboard上で実装できると言いましても、こちらの方法でもコードを少し記述する必要があります。
手順は大きく分けて2手順で行います。
では、見ていきましょう。

【手順1】戻り先の画面のビューコントローラにコードを記述する

今回の場合は戻り先の画面はピンク画面になりますので、PinkViewControllerクラス内にActionメソッド
を記述します。これは引数がきまっていますので、以下のように書いてください。

    @IBAction func backToPink(segue: UIStoryboardSegue) {
    }

今までAction接続をした際に自動的に生成されていたメソッドを書くかたちになります。
メソッド名を「backToPink」としていますが、ここは何を指定しても問題ありません。
また引数名も「segue」としていますがここも同様です。何を指定しても結構です。
しかし、そのsegueの引数の型は必ず「UIStoryboardSegue」としてください。
{}内には何も記述しなくて結構です。このコードを記述することによってstoryboard上で
「backToPink」のメソッドを扱うことができるようになります。
s19_1

import UIKit

class PinkViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    @IBAction func backToPink(segue: UIStoryboardSegue) {        //
    }                                                            //この2行を追加します。
}

コードの記述はこの1行だけで大丈夫です。

【手順2】storyboard上のExit欄に入っている作成したメソッドとボタンを紐づける

さあ、あとは先ほど作成したコードと緑画面にあるボタンとを紐付けるだけです。
ただ今までのAction接続とは少し異なります。
storyborad上の画面の上部に3つのアイコンがあり、その一番右にオレンジ色のドアのアイコンが
あると思います。(Xcodeのバージョンによって多少異なります)
このアイコンにカーソルを乗せると「Exit」と表記されているかと思います。今回はこれを利用します。
s19_2
緑画面のボタンから、いつもと同じようにcontrolキーを押しながらこの「Exit」アイコンに向かって
ドラッグ&ドロップしてください。
s19_3
すると、先ほど作成した「backToPink」メソッドが表示されているかと思いますので、それをクリック。
s19_4

これで完成です。これで緑画面から「Exit」して、「backToPink」メソッドが記述されている
ビューコントローラに戻る
ことができます。

ピンク画面から緑画面に遷移する際にはstoryboard上に矢印が表示されるので、視覚的にも
とてもわかりやすいのですが、こちらのUnwind segueはstoryboard上で実装しているのですが
矢印などは表示されませんので視覚的には見づらくなっていますので気をつけて下さい。

確認するにはドキュメントアウトラインを表示して確認します。
s19_5

前回のdismissViewControllerAnimated(flag: Bool, completion: (() -> Void)?)メソッド
は文字通り現在の画面を取り除くことしかできないので、1画面前にしか戻ることができません。
しかしこちらのUnwind segueを利用すると、今回のような2画面ではなくもっと複数の画面でアプリが作成されて
いる場合でも、任意の画面に戻ることができます。

4回に分けて説明しましたが、この一連の手順が最も基本的な画面遷移の方法になりますので、
しっかりとマスターしておきましょう。


  • このエントリーをはてなブックマークに追加

PAGE TOP