.-- --

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
スポンサー広告 comment(-) trackback(-)
.08 2012

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

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

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

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

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

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

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


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


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


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


プロジェクト名を右クリックして
NewFileを選択してStoryboardを作成します。
20120208_st_nav_004.jpg
20120208_st_nav_005.jpg
20120208_st_nav_006.jpg


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

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


2) 最初の1画面目に一覧を表示しますのでTableViewContorollerを配置します。
20120208_st_nav_008.jpg


最初からついている rootViewController を消して
20120208_st_nav_009.jpg


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



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


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



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


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


【2.Storyboardの起動設定】
1) Main Storyboardの設定を行います。
20120208_st_nav_016.jpg


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


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

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


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


 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を指定します。
20120208_st_nav_021.jpg


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

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

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

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

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

これで遷移出来ました。

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

関連記事
スポンサーサイト

Comment

Post comment

  • comment
  • secret
  • 管理者にだけ表示を許可する

Trackback

trackbackURL:http://appteam.blog114.fc2.com/tb.php/217-3df894b2

ブログ内検索

関連リンク

製品情報

最新記事

カテゴリ

プロフィール

neoxneo



NEXT-SYSTEM iOS Developers Blog


  • UTO:
    カナダ版iPhone4Sは、マナーモードでシャッター音がならない…


  • Ehara:
    ...


  • Hayate:
    ...


  • Tasaki:
    Developer登録完了...したのはいいけど


  • Ueda:
    ...



リンク

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。