StoryBordで画面遷移を行う
目的
- 複数回に分けて、最近Objective-cによる開発でハマったポイントと対策を整理して記載します
- 主に画面遷移・テーブル周りが中心となります
- レベルは、基礎的な内容になります
- ちょっとずつ加筆します
環境
- Objective-c
- 対象OS iOS
1 StoryBordでUIを準備する
1.1 画面の配置
-
初期表示されている画面パーツを除去し、NavigationControllerを設置します
-
グレーの色をしたNavigationViewControllerにひもづく任意のViewController(画面)を設置
-
今回、二つの画面を遷移するため、ViewControllerを二つ設置します
1.2 セグエの設定
-
まずはRootViewControllerを設定します
-
NavigationControllerを選択しcontrollerを押しながらドラッグし最初に表示する画面のViewControllerを接続します
-
この時、上記のようなセグエの設定が現れます。最初の画面はrootViewControllerを設定します
-
これから扱う全ての画面をNavigationControllerで管理するために、InitialViewControllerをNavigationContrllerに設定します
-
上記の状態ではダメです。ViewControllerに設置されてしまっています。
-
右ペインの Is Initial View Controller のチェックを付け替えるか、
-
またはこの右向きだけの矢印はInitialViewControllerを意味していますので、これをドラッグして付け替えます
-
これです
-
次に遷移先の画面を準備します
-
Initialに指定したViewControllerにButtonUIを設置します。このボタンを押したら遷移するようにするつもりです
-
遷移先のViewControllerへドラッグすると設定画面が出ます。Pushを選択します
1.3 最終的な状態
- セグエはこのような形で繋がっています
2 ソース
-
ViewControllerにひもづくソースを準備します
-
以下の構成にします
-
-
ViewControllerにひもづくソースの内容は以下になります。SecondViewController側も、同じようにViewControllerをSecondViewControllerに変えていただければオーケーです。
-
Androidで言うところのActivityに近い位置付けで、画面上の操作を受け取ります。
-
UIViewControllerを継承し、記載されているコールバックの実装を必須とします。
# import <UIKit/UIKit.h>
@interface ViewController : UIViewController
@end
# import "ViewController.h"
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
- ViewDidLoadはライフサイクルメソッドで、画面が表示される直後に表示されます
- 今後少しずつこの手のメソッドを出的次第紹介します。
補足
- 日本語でディレクトリが作られている？というように一見見えますが、これはgroupというもので、実際にこのような物理的なディレクトリ構造にはなっていません
- XCodeはフラットなファイルの持ち方をしていて、ファイルがXCode上どういう配置になるかの情報を持っています。
- ですので、裏から(finder)で物理的にファイルの出し入れを行った場合、うまくXCodeに反映されないことがあります
- ですので、XCode上でファイルの出し入れなどを行うのが良いと思います。
- StoryBordとソースのひもづけ
- 何気にこれを忘れてはまるというのをよくやらかしました。
- まずひもづけるViewControllerを選択します
- ちゃんとその要素を取れているか、海藻の違うやつを取ってしまっていないか、左側のツリーで選択すると間違いがないです
-
次は右側のペインで、真ん中の四角いタブを選択して、CustomClassにひもづけるUIViewControllerクラスのサブクラス（さっき作ったクラス）を設定します
-
自動で候補がでない場合があります。その場合はXCodeを再起動するか、直接入力してください。
-
この状態で実行すると、ボタンを押下すると次の画面に遷移します
3 unwindで設定するべきこと一覧
3.1 Uuwindとは
- NavigationViewにおいて、Pushにて画面遷移を行うと、NavigationBar上で画面を戻る処理を入れることができる。（popする）
3.2 実装
- 戻り先の画面に、メソッドを追加
- IBActionを戻り値にもつ任意の名前のメソッドを、UIStoryBordSegueクラスを引数にします
- 戻りの処理が行われると、このメソッドが呼び出されます。戻ってきたとき固有の画面の初期化処理を実装します
- (IBAction)unwindToBefor:(UIStoryboardSegue *)segue{
}
3.3 StoryBordの設定
- StoryBordでの設定を行います
-
ViewControllerのヘッダにこのようなマークが付いています
-
これを選択するとツリー上ではExitと言うオブジェクトを選択したことになります
-
この状態で右のペインを確認すると
先ほど指定した戻り先のメソッドが出てきます。 -
この右の丸をViewControllerに紐付けます
-
manualを選択します
-
unwindSegueと言う要素が追加されます。これが遷移の戻りの処理としてViewControllerに紐付けられました
-
unwindSegueの設定
-
unwin segueを選択し、右ペインでIDentiterを設定します
-
ここで、このunwind segueの名前「identifer」を指定し、これをキーにしてセグエを選択します
-
Actionは戻り先をあらわしています。
*** 補足 ***
- つまり、このメソッドは戻り先を指定するときに使えます
- もし二つの画面からこの画面へ遷移していたときに、どちらかPushを行ってきた画面を選んで戻りたいときは、このメソッドを選択して戻り先を決めることができます
- 戻りのアクションを設定します
- UI
- bar buttonアイテムをNavigationBarに設置します
- これを最初にpushイベントをボタンから行った時と同じように、SecondViewControllerへContorlを押しながらドラッグし、イベントを受け取ります
- アクション
- すると、自動的にメソッドが補完されるため、以下のunwindを実行するメソッドを、unwindセグエで設定したidentifer「RETURN」として定義します
- (IBAction)unwindToBefor:(id)sender {
[self performSegueWithIdentifier:@"RETURN" sender:self];
}
4 画面遷移は完了
- Buttonを押下すると画面遷移しSecondViewControllerの画面へ行きます
- NavigationBarの左マークを押下すると、最初の画面に戻ってきます
4.5 パラメータの受け渡し
- これで画面移動はオーケーです。
- 次は、遷移時のイベントの受け取り方、セグエの行き先の制御
- パラメータの受け渡しかたや受け取ったもので初期化するところをやります
→ 続きは次回