Storyboad を使用すればコーディングなしで簡単に画面遷移を行う事が可能です。
Xcode5 になってから Storyboard の利便性も少しづつ良くなっていますが、実用性のあるアプリを作成する場合には、View のレイアウトや画面遷移が Storyboard 上だけで完結するわけではありません。
誰しもサンプルアプリを作るのが最終目標ではないはずですので、実戦向けの内容としてまとめました。
INDEX
Unwind Segueを使用して前の画面に戻る(準備)
準備手順
- 「Single View Application」テンプレートを作成し、Xcode の一番左下の「+」から「New File…」で ViewControllerクラスの SecondViewController を追加します。
- Main.storyboard を選択し、ViewContoroller を配置します。
- storyboard 上の ViewController を選択し、identity inspector タブ > Custom Class から SecondViewController を選択します。これで storyboard で追加した ViewController と SecondViewController が関連付けられました。
- storyboard から ViewController と SecondViewController に 画面遷移のための UIButton をそれぞれ配置します。
- 画面遷移を確認しやすくするため、SecondViewController.m の viewDidLoad に 以下の1行を追加し、SecondViewController の背景色を赤に変更します。(背景色は Storyboard 上のインスペクタで設定してもかまいません。)
[code]
// SecondViewController.m
– (void)viewDidLoad
{
[super viewDidLoad];
self.view.backgroundColor = [UIColor redColor];
}
[/code] - 準備完了
ここまでで、プロジェクト内には以下のファイルがある状態となります。(※AppDelegate.h/mを除く)
- Main.storyboard
- ViewController.h/m
- SecondViewController.h/m
Unwind Segueを使用して前の画面に戻る
次に Storyboard の Unwind Segue を使用して画面遷移の設定を行います。
Storyboard の Unwind Segue を使用し設定する
- Storyboard の ViewController に配置した UIButton を右ドラッグし、SecondViewController 上で離します。今回は segue を modal としました。これで アプリをビルドして ViewController 内のボタンをクリックすれば SecondViewController へ遷移します。(この状態では SecondViewController から ViewController へは戻ってこれません。)
- 続いて、SecondViewController の UIButton をクリックすれば ViewController へ戻るためのメソッドを ViewController.m に記述します。(SecondViewController.m ではないので注意。)メソッド内に NSLog を記述していますが、空でもかまいません。
[code]
// ViewController.m
– (IBAction)firstViewReturnActionForSegue:(UIStoryboardSegue *)segue
{
NSLog(@”Return to ViewController”);
}
[/code] - Storyboard の SecondViewController の 緑色アイコンの Exit をクリックし、Connections inspector タブを選択すると、上記 firstViewReturnActionForSegue が表示されるので、右の「◯」から今度は左ドラッグで SecondViewController の UIButton へ接続します。
- 以上で双方向からの画面遷移の設定が完了しました。
まとめ
ViewController 間での値の受け渡し等も後日まとめてみたいと思います。お疲れ様でした。
この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。