使用Storyboard构建Navigation Controller和Table View
文 / Simon Ng：iOS程序员，Beginning iOS 9 Programming with Swift一书的作者，AppCoda.com创始人。
原文链接：http://www.appcoda.com/use-storyboards-to-build-navigation-controller-and-table-view/
到现在为止，如果一直跟着我们的教程学习，你应该有了对UITableView基本的了解。并且知道如何利用它构建简单的应用程序了。本周，我们要说说新东西，Storyboards。这是Xcode 4.2和iOS 5 SDK引入的最令人激动的功能特性之一。作为iOS开发人员，它使你的生活更简单，可以轻而易举地设计iOS应用程序的用户接口。
本文将向你展示如何使用Storyboards构建Navigation接口，并将它与UITableView集成起来。我们会尽力保持简单，集中精力解释概念。因此就没有好玩儿的界面和漂亮的图形。以后的文章会解决艺术性的问题。
好，我们开始吧！
什么是Navigation Controller？
我们开始编码前，像以往一样，我们对Navigation Controller和Storyboards做一个简单的介绍。
就像Table View，Navigation Controller是你在iOS应用程序中另一种最常见的UI元素。它提供了逐层向下的层次内容。看一看内置的Photos，YouTube 和Contacts应用，这些应用程序都使用了Navigation Controller来显示分层的内容。通常，大多数应用程序中的Table View和Navigation Controller是一起工作的。但这并不是说一定要两个一起使用。
Storyboards概览
前面说过，Storyboard是Xcode 4.2以来引入的新功能特性。它为iOS开发者提供了创建和设计用户界面提供了全新的方式。对初学者来说，介绍Storyboard之前，创建导航界面和标签界面着实困难。每个界面都存储在单独的nib文件中。在这之上，还要编写代码讲所有的界面连接到一起，描述导航如何工作。
有了Storyboards，所有的界面都存储在一个文件中。这给了你一种应用程序可见的表现方式，向你展示了这些界面是如何连接在一起的。Xcode提供了内置的编辑器来编辑Storyboards的布局。通过简单的点击，你可以定义不同界面之间的转变（也就是所谓的segues）。这并不意味着不需要为用户界面编写代码。但Storyboards显著减少了编码量。下面的示例图片展示了Storyboards在Xcode中的样子。
Scene和Segues
使用Storyboards时，Scene和Segues是总出现的两条术语。在Storyboard中，scene指一个单独的视图控制器和它的视图。每一个scene都有一个dock，dock主要被用来在视图控制器和它的视图之间做action和outlet关联。
Segue位于两个scene之间，管理两个scene之间的转变（transition）。Push和Modal是转变的两种常见类型。
在Storyboards中创建Navigation Controller
我们现在动手创建Storyboards。在本文中，我们将构建一个使用UITableView和UINavigationController的简单示例应用。使用Table View显示菜谱。当用户选择任何一道菜时，应用程序就跳转到下一个页面显示细节。这不难的。
首先，启动Xcode（确保使用4.2版本以上），使用“Single View application”模版创建一个新的项目。
点击“Next”继续。把下图中Xcode项目中需要填写的内容补齐。确认勾选“Use Storyboards”选项。
点击“Next”继续。Xcode会询问把“SimpleTable”存到哪里。选择任一文件夹（例如，桌面）保存你的项目。
你可能注意到了Xcode项目中细微的差别。与之前文章中的内容比较，.xib文件（interface builder）被MainStoryboard.storyboard文件代替了。
默认情况下，Xcode创建一个标准的视图控制器。因为我们要使用Navigation Controller控制界面导航，首先要将view controller修改为navigation controller。直接选择“Editor”菜单，选择“Embed in”，然后选择“Navigation Controller”。
Xcode会自动给RecipeBook View Controller嵌入Navigation Controller。界面看起来是这个样子的：
继续网下进行前，我们运行一下程序，看看是什么样子的。点击“Run”按钮，你应该能看到一个添加了导航条的空白视图。这表明已经成功地把RecipeBook View Controller嵌入到了Navigation Controller中了。
为数据添加Table View
接下来，我们会添加Table View，显示菜谱。在对象库中选择“Table View”，拖拽到“Recipe Book View Controller”。
请注意，不能把这些对象拖拽到缩小了的编辑器中，如果无法把table view拖拽到view controller，放大后再试。
下一件要做的事情是编写代码表格数据（也就是菜谱）。在项目导航栏，选择“RecipeBookViewController.h”，在“UIViewController”后面添加协议参数。
#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];
}
最后，我们必须实现两个数据源方法，来生成表格数据：
“tableView:numberOfRowsInSection”和“tableView:cellForRowAtIndexPath”方法。调用这两个方法是UITableViewDataSource协议的一部分。配置UITableVIew时，这两个方法是必须要实现的。第一个方法用来通知Table View区域内的行数，而第二个方法被用来填充表数据，因此我们添加如下代码。
作为参考，下面是整个“RecipeBookViewController.m”的源码。
//
// RecipeBookViewController.m
// RecipeBook
//
// Created by Simon Ng on 14/6/12.
// Copyright (c) 2012 Appcoda. All rights reserved.
//
#import “RecipeBookViewController.h”
@interface RecipeBookViewController ()
@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 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];
}
– (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
最后，我们建立Table View和刚刚创建的这两个方法之间的连接。返回Storyboard。按住Control键，选择“Table View”，拖拽到View Controller的图标。看起来是这个样子的：
松开按钮，弹出了“dataSource”和“delegate”，选择“dataSource”，在Table View和它的数据源之间建立连接。重复上述步骤，在Table View和代理之间建立连接。
测试应用程序之前，最后一件事是给导航栏添加标题。直接选择“Recipe Book View Controller”的导航栏，填写“Attributes Inspector”下的“Title”。记住，填写完成后点击ENTER，修改生效。
可以运行代码了。点击Run按钮，测试应用程序。如果代码正确，你应该得到一个显示菜谱列表的应用程序。这个应用和之前我们构建的SimpleTable应用非常相似。这里最主要的区别就是嵌入了Navigation Controller。
Prototype Cell简介
还记得如何自定义表格吗？几周前，我们向你展示了如何使用Interface Builder设计自定义的表格。简要地说，你需要为表格单独创建一个nib文件，并用编程的方法将它加载到表呢。介绍了Storyboard中的Prototype Cell以后，创建自定义表格就更简单了。ProtoType Cell可以让你在Storyboard编辑器中轻松设计好表格的布局。
我们不会在本文深入谈论自定义的细节，而仅仅是在表格中添加“Disclosure Indicator”。
选择Table View，添加Prototype Cell。在“Attributes Inspector”下，把“Prototype Cells”的值从“0”改到“1”。修改完成后，Xcode立刻自动显示prototype cell。我们也把“Style”选项从“Plain”改成“Group”，显示另一个表格风格。
接下来，选择“Prototype Cell”，你应该能够为表格定制风格了。为了让每个表格显示一个提示箭头，把“Accessory”改成“Disclosure Indicator”。定义重用标识符（Reuse Identifier）比较重要。你可以认为它是表格的ID。我们可以针对某个具体的prototype cell使用它。然而，这里定义为“RecipeCell”是为了与代码中的一致。
现在再次运行应用程序。它看起来又发生了些变化。我们把表的风格改为“Grouped”，并添加了提示箭头。
添加详细视图控制器
终于到了文章最后的部分。显示菜谱详细内容的详细视图控制器（Detail View Controller）还差点儿什么呢？当用户点击菜谱中的任何一项时，详细视图控制器都应该显现。
好了，我们添加一个新的View Controller作为详细视图控制器。
本文的主要目的是向你展示如果实现Navigation Controller。我们会让详细视图尽量简单，就用一个标签来显示菜名。从对象库里拖拽一个标签，放到视图的中央。你可以修改标签的字体和字号，使标签更好看一些。
接下来，我们添加一个segue来连接prototype cell和新的View Controller。添加segue对象非常简单。按住control键不放，点击prototype cell，将其拖拽到View Controller。
放开按钮，会天出三种类型的Segue（push，modal和custom）。
就像前面说的，segue定义了scene之间点连接。标准的导航控制器选择“Push”类型的连接。一旦完成，Xcode会自动使用segue链接两个scene。看起来这个样子：
现在再运行一下应用程序。选择任何一项后，应用程序会显示详细视图控制器。虽然详细视图控制器只显示一个标签，但是导航控制器已经起作用了。
接下来讲些什么内容？
这是一篇较长的文章，终于完成了！我希望你对Storyboard有了更好的理解，知道如何设计自己的导航控制器。然而，还有一件事情没有讲：如何将菜单的名称从“Recipe Book View Controller”传递到“Detail View Controller”呢？我会在本周末发布一篇文章对此进行介绍。
这些Storyboard，UITableView和Navigation Controller是UI元素的基础，构建iOS应用程序的时候常被用到。所以要花费一些时间来通读本文，确保对此了如指掌。
［转载此篇译文，请注明译文出处］