iOS使用Storyboards建立導航控制器和表視圖

            在本教程中，咱們將演示如何使用Storyboards構建導航界面和與UITableView的集成。爲了讓任務比較簡潔，咱們僅僅關注於解釋概念，所以沒有華麗的界面或漂亮的圖片，將美工設計留給未來的教程。
OK，咱們開始吧！

導航控制器（Navigation Controller）是什麼？

在開始編寫代碼以前，咱們簡單介紹一下導航控制器（Navigation Controller）和Storyboards。
和表視圖（Table View）同樣，導航控制器是另一個UI控件，在iOS App中常常看到。它爲分層內容提供了向下導航的界面。咱們看看內置的Photos App、YouTube和通信錄（Contacts）。這些Apps都使用了導航控制器顯示分層的內容。一般表視圖和導航控制器在多數Apps中同時存在，固然，這並不意味着你必須同時使用它們。

Storyboards預覽

前面提到過，Storyboard 是Xcode 4.2 發佈時提供的一項新功能。它提供了一個全新的方式，供iOS開發人員建立和設計用戶界面。在引入Storyboard 以前，對於初學者而言很是困難建立導航（和tab）界面。每個界面存放在一個獨立的nib文件中，而後你必須編寫代碼鏈接全部的界面，而且描述導航如何工做。
經過使用Storyboard，全部屏幕保存在一個單一文件中，這樣你能夠預覽app的可視化展示，以及屏幕是如何鏈接的。Xcode 提供了內置的編輯器來設計Storyboards。你能夠簡單使用點擊來定義不一樣屏幕之間的切換（稱爲Segues – 聯線，表明兩個場景Scene之間的過渡轉換），但這也不是說你沒必要爲用戶界面編寫代碼，Storyboards 顯著簡化了你須要編寫的代碼量。下圖顯示Xcode中Storyboards的樣子：

場景（Scene）和聯線（Segues）

在使用Storyboards時，必定會遇到場景（Scene）和聯線（Segues）兩個術語。在一個Storyboard中，場景指一個單一的視圖控制器和它的視圖。每個場景都有一個場景塢（Dock），主要用來在視圖控制器和視圖之間，創建方法和Outlet 的鏈接。
聯線（Segue）位於兩個場景之間，管理兩個場景之間的過渡，其中Push和Modal 是兩個常見的過渡類型。

在Storyboards中建立導航控制器

如今着手建立咱們本身的Storyboards。在本教程中，咱們將建立一個簡單的App，其中同時用到UITableView和UINavigationController。咱們使用表視圖顯示菜單列表。在用戶選擇任何一個菜單時，App導航到另一個畫面，顯示更詳細的信息。比較簡單哦！
首先，啓動Xcode（確認你使用Xcode 4.2 或更高版本），並使用Simple View application 模板建立一個新的項目。

點擊Next 按鈕繼續。在下圖中，填入Xcode項目全部必須的內容，並確保選中Use Storyborads選項。

點擊Next 按鈕繼續。Xcode接着問你RecipeBook項目存放在哪裏，選擇任意目錄（如Desktop）保存項目。
你可能注意到在Xcode 項目中有一點不一樣，和前面的教程比較而言，.xib 文件（interface builder）替換爲MainStoryboard.storyboard 文件了。

默認狀況下，Xcode建立一個標準的視圖控制器。咱們將使用導航控制器（Navigation Controller）控制畫面的導航。首先更改視圖控制器（View Controller）爲導航控制器，選擇 Editor 菜單 / Embed in 子菜單，接着選擇 Navigation Controller，以下圖所示 – 在導航控制器中嵌入視圖控制器：

Xcode 自動嵌入RecipeBook 視圖控制器到導航控制器中，項目畫面以下圖所示：

如今咱們運行App看看效果。點擊 Run 按鈕，你將看到一個空白的視圖，而且添加了一個導航條。這表示你已經成功嵌入了RecipeBook 視圖控制器到導航控制器中。

添加表視圖及其數據

接着，咱們將添加表視圖顯示菜譜。從對象庫（Object Library）選擇Table View，並拖拉到 Recipe Book View Controller中。
須要注意的是：當編輯器是最小化時，你不能拖動控件；若是你不能拖動Table View到視圖控制器中，最大化編輯器後，再嘗試一次。

接下來，咱們須要編寫代碼填充表數據（如菜譜）。在項目導航器中，選擇RecipeBookViewController.h文件，在UIViewController 以後，添加<UITableViewDelegate, UITableViewDataSource>，代碼以下所示：

#import <UIKit/UIKit.h>

@interface RecipeBookViewController : UIViewController <UITableViewDelegate, UITableViewDataSource>

@end

若是你以前閱讀過Simple Table教程，你應該對這些代碼很是熟悉。這裏，咱們不具體解釋這些代碼，若是你不理解這些代碼，能夠訪問咱們以前的教程。
接着，選擇 RecipeBookViewController.m文件，定義一個實例變量（如 菜譜數組）用來存放表數據。
@implementation RecipeBookViewController {
NSArray *recipes;
}
在viewDidLoad方法，添加以下代碼初始化recipes 數組：
- (void)viewDidLoad
{
[super viewDidLoad];
// Initialize table data
recipes = [NSArray arrayWithObjects:@"Egg Benedict", @"Mushroom Risotto", @"Full Breakfast", @"Hamburger", @"Ham and Egg Sandwich", @"Creme Brelee", @"White Chocolate Donut", @"Starbucks Coffee", @"Vegetable Curry", @"Instant Noodle with Egg", @"Noodle with BBQ Pork", @"Japanese Noodle with Pork", @"Green Tea", @"Thai Shrimp Cake", @"Angry Birds Cake", @"Ham and Cheese Panini", nil];
}

最後，咱們必須實現2個DataSource 方法填充表視圖： tableView:numberOfRowsInSection 和tableView:cellForRowAtIndexPath。回想一下，這兩個方法是UITableViewDataSource 協議的一部分，在配置UITableView時，這兩個方法必需要求實現。第一個方法是通知表視圖有多少行；第二個方法用來填充單元格數據。添加代碼以下所示：
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return [recipes count];
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *simpleTableIdentifier = @"RecipeCell";

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];

if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:simpleTableIdentifier];
}

cell.textLabel.text = [recipes objectAtIndex:indexPath.row];return cell;}