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;}