Storyboardを使ってのNavigationを作成する手順について

はじめまして。
昨年１２月に入社しました。江原と申します。

未熟者ですが早く戦力になれるよう日々精進していきます。

今日は、Storyboardを使ってのNavigationを
作成する手順について調べてみました。

今回の作成条件とゴールは以下としました。
【条件】
　・画面デザインとか遷移とかはなるべく"Storyboard"を使用
　・ARCは未使用（使った事が。。。）
　・iPhone向け

【ゴール】
　・一覧から詳細画面が表示されるサンプルの作成

とりあえず、プロジェクトを作ります。
せっかくですので空っぽから作ってみたいと思います。
Empty Applicationを選択しました。



プロダクト名はテスト用の適当な名称を入れます。
※　Core Data等使用しないので全てチェックを外しました。



createを押すとプロジェクトが作成されます。


では、StroyBoardを使ってみましょう！


プロジェクト名を右クリックして
NewFileを選択してStoryboardを作成します。





これに画面を作っていきます。

【１．Storyboardでデザイン】
1) 画面右下からドラックしてNavigationControllerを配置します。



2) 最初の１画面目に一覧を表示しますのでTableViewContorollerを配置します。



最初からついている rootViewController　を消して



新たなrootViewControllerとして接続します。
NavigationControllerからTableViewControllerへ
ctrを押しながらドラッグしRelationshipを指定します。




3) 一覧から選択された詳細画面を作成します。
　 ViewControllerを配置します。



詳細のデモとしてTextViewを配置しています。




4) 一覧から詳細への画面遷移を設定します。
　 一覧のセルから詳細画面へ push で接続します。



それらしくなったので実行してみたら
。。。動きません。。。真っ白です。。
Storyboardが初期画面に設定されていない為でした。。


【２．Storyboardの起動設定】
1) Main Storyboardの設定を行います。



2) AppDelegateの -(BOOL)application:didFinishLaunchingWithOptions:を
　修正しましす。（元から作成している画面をコメントアウト）


これで画面がでました！
しかしながら遷移いたしません。。。

テーブルの各セル（一つ一つの箱の事）が押された時に
Storyboardだけでは遷移するようにならないようです。


【３．TableViewの設定及び動作】
1)最初の一覧画面のデータ表示や動作を決めるUITableViewControllerを継承したクラスを作成します。





　ItemsListViewControllerとして作成しました。

2)一覧の表示内容を実装します。
”- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView” を修正
return 0; を return 1; に変更します


”- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section”　を修正
return 0; を return 5; に変更します。


”- (UITableViewCell *)tableView:(UITableView *)tableView　cellForRowAtIndexPath:(NSIndexPath *)indexPath ”を修正（セルの中身を記述する以下を追加）
cell.textLabel.text = [NSString stringWithFormat:@"item No.%d" , indexPath.row ];



3)Storyboardに作ったclassを設定します。
　最初に起動する画面にCustomClassに　ItemsListViewControllerを指定します。



これで一覧が表示されるようになりました。
まだまだ・・・遷移出来ません。

4)Storyboardの一覧画面から詳細画面に
　のびている矢印（Storyboard Segue）を選択し
　名称を付けます。itemsListToDetailとつけました。

※　segueを辞書で引くと 途切れなく移行する. といった意味みたいです。

5)ItemsListViewControllerに戻ってセルを選択した際の動作を設定します。
　”- (void)tableView:(UITableView *)tableView
didSelectRowAtIndexPath:(NSIndexPath *)indexPath ”　に以下を追加

[self performSegueWithIdentifier:@"itemsListToDetail" sender:self];

これで遷移出来ました。

普段はなるべく全てコードで書くようにしているのですけど
Storyboardはみたいに複数の画面イメージと何処と何処がつながっているのかを
ぱっと確認しながら作成できるのは良いなぁと感じました。