iOS Storyboardによる画面遷移の実装(Modal View)

iOS5になってから登場したStoryboard、今までInterface Builderを使わない派だったこともあって、手を出していなかったのですが、実はず～っと前から気になってたし使ってみたかったんですよ。 私は以下の点でStoryboardを使う理由があると思う。

GUI上の1画面で複数のView Controller定義を記述できる

各View Controller間の遷移をSegue(セグエ)で表現可能でGUI上から編集が可能

アプリケーション全体の画面遷移が一望出来る

今回の目標：モーダルビューを表示して、閉じてまた元の画面に戻る

とても簡単なものから。モーダルビューを表示して閉じるだけ。ほとんど画面操作のみで出来る。

プロジェクトの作成

プロジェクトを新規作成。「Single View Application」から作成する。

目印のラベルとモーダルViewに遷移するボタンも作成しておく。

新しいView Controllerを追加

モーダルビュー用に新しい「View Controller」をstoryboard上へドラッグして作成する。 目印のために「モーダルView」というラベルを追加。

Segue(セグエ)の作成

「Control」ボタンを押しながら「button 1」をドラッグし、そのまま右側のモーダルView上でリリース。 すると、図のような小さなウィンドウが表示されるので「Modal」を選択。 あと、モーダルViewに遷移したことを見た目上分かりやすくするために、モーダルViewの背景色を変更しておく。これは別に何色でも良い。

===== [2014/10/05 追記] =====

Xcode6ではSegue名が変更になっています。詳しくはXcode6ではStoryboadで指定するSegue名が変更されている(http://selection9.blogspot.jp/2014/10/xcode6storyboadsegue.html)を参照下さい。

===== 追記終わり =====

ここまでで、一旦実行してみる。「botton 1」を押すと、下側からモーダルViewがスライドされて来てモーダルViewが表示される。まだ戻るボタンを作成していないので、表示して終わり。

閉じるボタンの実装

「モーダルView」に閉じるボタンを作成。

「閉じる」ボタンが押されたらモーダルViewを閉じる処理を記述する。 モーダルViewのViewはStoryboardで作成したので、このままだとこの画面に対応する独自のクラスが存在しない。まずはViewControllerを継承した独自クラスを作成する。

作成したクラスをStoryboard上のモーダルViewのカスタムクラスとして設定。

作成したModalViewController.mを開く。この際、Storyboardとソースを同時に2画面で表示する。 「閉じる」ボタンをCntrolボタンを押しながらModalViewController.mのソース上にドラッグする。 すると、Action作成用の画面がポップアップされるので、Name欄に任意のメソッド名を設定する。 このメソッドが「閉じる」ボタンが押された時のメソッドになる。

次に作成したメソッドにモーダルViewを閉じる処理を記述。

- (IBAction)closeModalDialog:(id)sender {
//    [self dismissModalViewControllerAnimated:YES];　//これは間違い
    //モーダルViewを表示したViewControllerに対してdismissメッセージを送信する。
    //[self presentingViewController]で遷移前のViewControllerを取得しています。
    [[self presentingViewController] dismissModalViewControllerAnimated:YES];
}

↑2012/7/4 修正：モーダルViewを閉じる処理間違ってました。dismissModalViewControllerAnimatedはモーダルViewを表示したViewControllerに対して送信する必要がありました。コードのコメントにも書いていますが、遷移前のViewControllerを取得してdismissメッセージを送信させることでモーダルViewを閉じる。 以上で完了。今回のモーダルViewは一番簡単な例だけど、殆どソースコードを書かなくてもこの程度なら出来てしまうのは素晴らしいのではないでしょうか。
storyboardを使ったNavigation Controllerの実装の記事もどうぞ。
iOS Storyboardによる画面遷移の実装(Navigation Controller)

---