[iOS]Storyboardで始めるiPhoneアプリ開発 #2 – modalセグエを使う

Storyboardで始めるiPhoneアプリ開発

#iOS

#Storyboard

#iPhone

平屋真吾

2013.05.17

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

前回のおさらい

前回の記事[iOS]Storyboardで始めるiPhoneアプリ開発 #1 に引き続き
Storyboardについて書いていきたいと思います。

前回の記事では、pushセグエを使って画面から画面への遷移を作りました。

Storyboard用語

前回説明していなかったものも含めて書いてみます。

(1) Storyboard ストーリーボード

storyboardは「絵コンテ」を意味する英語です。
個々の画面内のレイアウトと画面間の遷移を視覚的に作っていくことが可能です。

(2) Scene シーン

View(画面)とViewController(画面の管理を担当するパーツ)をまとめてシーン(Scene)と呼びます。

(3) Segue セグエ

セグエはシーンからシーンへ遷移させるときの視覚効果を担当します。

Storyboard画面上で見てみると…

下の画像のような感じになります。

今回は…

今回はmodalセグエを使った画面遷移を試してみたいと思います。

プロジェクト作成

前回と同じやり方でプロジェクトを作成します。
今回のプロジェクト名はstoryboardsTest2にします。

プロジェクトが作成されました。

シーンを追加する

ナビゲーターエリアのMainStoryboard.storyboardを選択し、ViewControllerを1つ追加します。

シーンが追加されました。
せっかくなので画面にタイトルをつけてみましょう。

まず、元々用意されていたほうのViewControllerを選択します。
画面右側のユーティリティエリア上部の属性インスペクタを選択します。
そして「View Controller」のTitle項目に「Main View Controller」と入力します。

先ほど追加した画面も同様の操作で名前をつけます。
こちらは「Sub View Controller」という名前にしました。

2つの画面のタイトルが設定されました。

ここでstoryboardの表示を3.5インチ画面サイズの表示に変更します。
storyboard下部のボタンを押すと表示の変更ができます。

3.5インチサイズに変更できました。

背景色・ラベル・ボタンの設定

前回と同様に、遷移のアニメーション動作をわかりやすくするために画面に色をつけます。
SubViewControllerのViewに色をつけてみます。
SubViewControllerのView(画面内の空白部分)を選択し、属性インスペクタを表示させます。
「Background」項目をクリックし、「Other...」を選択すると、Colorsウィンドウが出てくるので、色を選択します。今回はBrownを選択しました。

また、２つの画面それぞれにラベルを追加します。
ラベルに表示する文字列は「MainView」と「SubView」にしました。

今回も前回と同様に「ボタンを押したタイミングでMainViewからSubViewへ遷移する」ようにします。
MainViewにボタンを追加し、ボタンのタイトルを「SubView」に設定します。

画面遷移を設定する

追加したボタンをクリックし、controlキーを押しながらボタンをSubView上までドラッグするとSubViewが選択され青くなるので、その位置でドロップします。ドロップするとメニューが出てきます。
今回は「modal」を選択します。

セグエが追加されました

実行する

セグエの設定ができたので、Runボタンをクリックしてアプリを実行させてみます。
うまく動きましたでしょうか？
MainView内の「SubViewボタン」を押すと、下からSubViewが出てきます。
modalセグエを使った画面遷移はこんな動きになります。

しかし、このままではSubViewからMainViewへ戻ることができません。
前回使用したpushセグエの場合は「戻るためのボタン」と「戻る遷移」が自動で追加されましたが、
今回使うmodalセグエでは「戻るためのボタン」の追加と「戻る遷移」の追加を行う必要があります。

Stopボタンを押してアプリの実行を停止させます。
次はSubViewからMainViewへ戻る遷移を追加します。

「戻る」遷移を追加する

Unwind segue

戻る遷移を作成するには「Unwind Segue」を使います。
Unwind Segueは"セグエで繋いでいる画面を戻るための機能"です。

ViewController.mにコードを追加

そのためには、「戻り先の画面に割り当てられたクラス」にコードを追加する必要があります。
SubViewの戻り先はMainViewに設定したいので、MainViewに割り当てられたクラスにコードを追加します。

MainViewにはどのクラスが割り当てられているのでしょうか？
ユーティリティエリアの「アイデンティティインスペクタ」を見ると割り当てられたクラス名が分かります。
storyboard上のMainViewControllerを選択して、アイデンティティインスペクタを表示させると、「class」項目に「ViewController」と書いてあるのが確認できます。

ということで、MainViewに割り当てられた「ViewController」クラスに、UnwindSegue用のコードを追加します。

ViewController.mを選択します。「@end」の上にコードを追加します。

追加するコードは以下のものになります。

- (IBAction)mainViewReturnActionForSegue:(UIStoryboardSegue *)segue
{
    
}

コード追加後のViewController.mの内容は以下のようになります。

これで必要なコードが追加できました。

Unwind segueを設定する

Unwind segueを設定していきます。

ナビゲーションエリアの「MainStoryboard.storyboard」をクリックし、storyboardの編集に戻ります。
また、SubView上にボタンを追加し、タイトルを「back」に変更します。

controlキーを押しながら、backボタンを緑色のExitアイコンまでドラッグ＆ドロップします。

「mainViewReturnActionForSegue」を選択します。

これでSubViewからMainViewへ戻るためのUnwind segueを設定することができました。

実行する

Runボタンをクリックして実行してみましょう。
MainViewとSubView相互に画面遷移できるようになったことが確認できると思います。

まとめ

modalセグエを使った画面遷移がどういうものか確認出来ましたでしょうか？

modal(モーダル)は画面の上に別の画面を重ねる画面遷移であり、
modalタイプの画面遷移によって最前に出てきた画面のみ操作可能になります。

iOSの標準アプリの中では、メールやメッセージアプリの新規メッセージ作成画面などに使われていますので、
iPhoneを使っているかたで見たことのある画面遷移だと思います。

「新規メッセージ作成画面」のように、ユーザーが操作(メッセージアプリの場合はメッセージの送信やキャンセル)を終えない限り他の画面に戻れないようにしたい場合にmodalを使います。