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