導航控制器（Navigation Controller）是什么？
?
和表視圖（Table View)一樣，導航控制器是另一個UI控件，在iOS App中經常看到。它為分層內容提供了向下導航的界面。我們看看內置的Photos App、YouTube 和通訊錄（Contacts）。這些App都使用了導航控制器顯示分層的內容。通常表視圖和導航控制器在多個App中同時存在，當然，這并不意味著你必須同時使用它們。
?
1.Storyboards 預覽
?
Storyboard 是 Xcode 4.2 發布時提供的一項新功能。它提供了一個全新的方式，供iOS開發人員創建和設計用戶界面。在引入Storyboard 之前，對于初學者而言非常困難創建導航（和tab）界面。每一個界面存放在一個獨立的nib文件中，然后你必須編寫代碼連接所有的界面，并且描述導航如何工作。
?
通過使用Storyboard,所有屏幕保存在一個單一文件中，這樣你就可以預覽app的可視化展示，以及屏幕是如何鏈接的。Xcode提供了內置的編輯器來設計Storyboards.你可以簡單點擊來定義不同屏幕之間的切換（稱為Segues - 聯線，代表兩個場景Scene之間的過度轉換），但這也不是說你不必為用戶界面編寫代碼，Storyboards 顯著簡化了你需要編寫的代碼量。下圖顯示Xcode中Storyboards 的樣子：
2.場景（Scene) 和聯線（Segues）
?
在使用Storyboards 時，一定會遇到場景（Scene）和聯線（Segues）兩個術語。在一個Storyboard中，場景指一個單一的視圖控制器和它的視圖。每一個場景都有一個場景塢（Dock），主要用來在視圖控制器和視圖之間，建立方法和Outlet的連接。
?
聯線（Segue）位于兩個場景之間，管理兩個場景之間的過度，其中Push和Modal是兩個常見的過度類型。
?
3.在Storyboards 中創建導航控制器
?
現在著手創建我們自己的 Storyboards.我們將創建一個簡單的App，其中同時用到UITableView 和 UINavigationController.
?
我們使用表現圖顯示菜單列表。在用戶選擇任何菜單時，App導航到另外一個畫面，顯示更詳細的信息。
?
首先，啟動Xcode，并使用Single View application 模板創建一個新的項目。
?
輸入如下選項：
?
Product Name : RecipeBook
?
Company identifier : com.appcoda
?
Class Prefix : RecipeBook
?
Device Family: : iPhone
?
確保勾選Use Storyboards 選項。
?
選用 Use Automatic Reference Counting
?
點擊繼續保存項目
?
這里與前面項目不同的一點，.xib 文件（interface builder) 替換為MainStoryboard.stroyboard 文件了。
?
默認情況下，Xcode 創建一個標準的視圖控制器。我們將使用導航控制器（Navigation Controller）控制畫面的導航。首先更改視圖控制器（View Controller）為導航控制器，選擇Editor菜單 / Embed in 子菜單， 接著選擇Navigation Controller,
?
Xcode 自動嵌入RecipeBook 視圖控制器到導航控制器中，項目的畫面如下圖所示:
?
?
現在我們運行App 看看效果，點擊Run按鈕，你將看到一個空白的視圖，并且添加了一個導航條。這表明你已經成功嵌入了RecipeBook 視圖控制器到導航控制器中。
?
4.添加表視圖及其數據
?
接著，我們將添加表視圖顯示菜譜。從對象庫（Object Library)選擇Table View,并拖拉到Recipe Book View Controller 中。
?
需要注意的是：當編輯器是最小化時，你不能拖動控件；如果你不能拖動Table View 到視圖控制器，最大化編輯器，在嘗試一次。
?
接下來，我們需要編寫代碼填充數據（如菜譜）。在項目導航中，選擇Recipe BookViewController.h 文件，在UIViewController之后，添加<UIT ableViewDelegate，UITableViewDataSource>,代碼如下所示：
?
?
#import <UIKit/UIKit.h>
?
@interface RecipeBookViewController : UIViewController < UITableViewDelegate , UITableViewDataSource >
?
@end
@implementation RecipeBookViewController
{
? ? NSArray *recipes;
}
?
- ( void )viewDidLoad
{
? ? [ super viewDidLoad ];
? ? //Initialize table data
? ? recipes = [ NSArray arrayWithObjects : @"Egg Benedict" , @"Mushroom Risotto" , @"Full Breakfast" , @"Hamburger" , @"Ham and Egg sandwith" , @"Creme Brelee" , @"White Chcolate Dount" , @"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 ];
?
}
?
- ( void )viewDidUnload
{
? ? [ super viewDidUnload ];
? ? // Release any retained subviews of the main view.
}
?
- ( BOOL )shouldAutorotateToInterfaceOrientation:( UIInterfaceOrientation )interfaceOrientation
{
? ? return (interfaceOrientation != UIInterfaceOrientationPortraitUpsideDown );
}
?
- ( 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;
}
?
@end
?
?
?
?
本例子目的只是演示如何實現導航控制器。我們盡量讓詳細視圖簡單一點，僅添加一個Label顯示菜單名稱。
?
從對象庫中拖拉Label控件，并放置在視圖的中心位置。你可以更改字體大小或類型，讓Label更好看一些。
?
接著，我們添加一個聯線（Segue），連接原型單元格和新添加的視圖控制器。添加一個聯線對象非常簡單。按住Control鍵，點擊原型單元格，并拖拉到視圖單元格。
?
?
釋放按鈕，彈出窗口中顯示3種類型的聯線，分別是P ush、Modal和Custom。
?
之前解釋過，聯線定義了兩個場景之間的過度類型，對于標準的導航，我們使用Push，一旦選擇，Xcode自動使用Push聯線連接兩個場景。
?
現在再次運行App，在你選擇任一菜單時，App將顯示詳細視圖控制器。盡管詳細視圖控制僅僅顯示一個標簽，但是我們已經讓導航功能工作正常了。
?
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
