Storyboard 联线教程-在视图控制器间传递数据

首先，咱们快速回顾一下咱们已经完成的工做。以前，咱们学习了使用Storyboards完成的一些工做：

• 将一个正常的视图控制器嵌入到导航控制器中；

• 建立了一个表视图，并填充了菜单列表；

• 使用联线（Segue）从一个视图控制器切换到另外一个视图控制器；

本文完成最后的一部分工做。在App启动的时候，显示菜单列表。轻拍其中任何一个菜单项，就切换到另一个视图，并显示该菜单的详细信息。

咱们尚未实现详细视图，该视图如今显示一个静态的标签。咱们将继续完成这个项目，完善这个应用程序。

赋值视图控制器类

在第一部分教程中，咱们简单建立了一个视图控制器，在Storyboard编辑器中做为一个菜单的详细视图。视图控制器默认赋值为 UIViewController 类。

回到咱们的问题。视图中的标签应该随着选择的菜单发生变化。显然，在UIViewController 中须要一个变量存放菜单的名称。
事实是UIViewConroller类仅仅提供了基本的视图管理模型，至关于一个空白的视图，没有变量用于存储菜单名称。所以，不能直接使用UIViewController类，咱们扩展这一类，并建立本身的类（也就是UIViewController的子类）。
在项目导航栏中，右击 RecipeBook 文件夹，选择 New File …..

选择 Cocoa Touch 栏目下的Objective-C Class做为类模板。

将类命名为RecipeDetailViewController，选择子类为 UIViewController。注意不要选择 With XIB for user interface选项，由于咱们将使用Storyboards 设计用户界面，咱们没必要建立独立的interface builder文件。点击 Next 按钮，保存文件在项目文件夹中。

接着，咱们赋值RecipeDetailViewController 类给视图控制器。返回Storyboards编辑器，选择详细视图控制器。在Identity Inspector 窗口，更改类为 RecipeDetailViewController。

添加变量到定制的类中

前面刚刚经过继承UIViewController类，建立了定制的视图控制器类。然而，这个类和父类没有任何不一样，除非咱们添加本身的变量和方法。还有一些工做咱们须要实现的：

• 赋值一个变量（recipeName）用于数据传递 – 当用户选择Recipe视图中的一个菜单时，必须传递菜单名称到详细视图；

• 赋值变量（recipeLabel）给文本标签 – 当前标签是静态的，但应该在菜单名称变化时，更新文本标签；

OK，如今添加2个变量（recipeLabel 和 recipeName）。选择RecipeDetailViewController.h 文件，为接口添加2个属性：
@interface RecipeDetailViewController : UIViewController
@property (nonatomic, strong) IBOutlet UILabel *recipeLabel;
@property (nonatomic, strong) NSString *recipeName;
@end

选择RecipeDetailViewController.m文件，为上述变量添加 synthesis。确保代码在@implementation RecipeDetailViewController 下面：
@implementation RecipeDetailViewController
@synthesize recipeLabel;
@synthesize recipeName;

若是你忘记了接口和实现的内容，可返回访问本教程，并回顾相应的概念。

创建变量和UI 元素之间的链接

接下来，咱们须要链接recipeLabel 变量到可视化的Label 标签。在Storyboards编辑器，按住Control键，并点击Recipe Detail View Controller 图标，拖拉到Label 对象上。释放按钮，弹出变量列表供你选择，选择 recipeLabel 变量。

如今，已经链接了变量和Label UI元素，变量的任何变化将可视化地显示出来。可是，仍然有一项工做没有处理。咱们还须要标签显示菜单的名称。所以，在viewDidLoad 方法中，咱们添加以下代码，并设置标签文本和菜单名称一致。
- (void)viewDidLoad
{
[super viewDidLoad];
// Set the Label text with the selected recipe
recipeLabel.text = recipeName;
}

尝试编译并运行你的App。哦，在选择任一菜单项后，详细视图彻底显示空白。这是指望的效果，由于咱们尚未编写任何代码传递菜单名称，recipeName 变量是空白的，致使文本标签也是空白的。

使用联线（Segue）传递数据

如今到了本教程的核心内容了 – 如何使用联线（Segue）在视图控制器之间传递数据。联线管理视图控制器之间的切换。在此基础之上，联线（Segue）对象用来准备视图控制器之间的切换。当联线触发时，在可视化的视图切换发生以前，storyboard运行时调用当前视图控制器的 prepareForSegue:sender: 方法（在本示例中，是RecipeBookViewController）。经过实现该方法，咱们可传递任何须要的数据给即将显示的视图控制器。
然而，最好的办法是给Storyboards中每个联线一个惟一的标识符（identifier），标识符是一个字符串，应用程序使用该字符串来区别不一样的联线。随着App愈来愈复杂，在视图控制器中，将有更多的联线（Segue）。
选择联线，在Identity Inspector窗口，设置identifier属性值。这里，咱们将该联线命名为 showRecipeDetail。

接着，咱们将在Recipe Book View Controller视图控制器中实现 prepareForSegue:sender: 方法，是联线的源视图控制器。选择 RecipeBookViewController.m文件，添加以下代码：
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
if ([segue.identifier isEqualToString:@"showRecipeDetail"]) {
NSIndexPath *indexPath = [self.tableView indexPathForSelectedRow];
RecipeDetailViewController *destViewController = segue.destinationViewController;
destViewController.recipeName = [recipes objectAtIndex:indexPath.row];
}
}

在视图切换开始的时候，调用 prepareForSegue 方法。第一行用来验证segue的标识符。在本示例中，识别符为 showRecipeDetail。第二行调用 tableView:indexPathForSelectedRow 获取选择的表行。一旦获取到选择的行，咱们将传递给 RecipeDetailViewController 视图控制器。一个Segue 对象包含了须要在转换结束后在视图控制器中显示的内容。你可使用 segue.destinationViewController 获取目的视图控制器。在本范例中，目的视图控制器为 RecipeDetailViewController。剩下了的代码就是传递菜单名称给目的控制器。

你如今没法运行App。在你复制和粘贴上述方法代码到 RecipeBookViewController.m 文件中后，你应该看到一些错误信息：

上图显示了3个错误，可总结为2类：

• tableView 属性在RecipeBookViewController 中没有找到；

• RecipeDetailViewController 是什么？Xcode 不知道它是什么？

咱们先讨论第二个错误。在RecipeBookViewController 中，它不知道RecipeDetailViewController。在Objective-C中，可以使用 #import 指令引入其余类的头文件。经过引入 RecipeDetailViewController 的头文件，RecipeBookViewController 能够访问详细视图控制器的属性和方法。将以下代码放置在 RecipeBookViewController文件的头部纠正错误：
#import “RecipeDetailViewController.h”

关于第一个错误，你应该知道如何解决，和咱们以前讨论的Label UI 元素类似。应该有相应的tableView 变量链接 UI 元素。
所以，在RecipeBookViewController.h文件中，在@end 以前添加以下代码：
@property (nonatomic, strong) IBOutlet UITableView *tableView;

在RecipeBookViewController.m文件，添加synthesis指令，告诉编译器为该tableView变量生成访问方法。
@implementation RecipeBookViewController {
NSArray *recipes;
}

@synthesize tableView; // Add this line of code

最后，返回Storyboards，链接变量到 UI 元素。在Recipe Book View Controller中，按住Control 键，点击视图控制器图片，拖拉到表视图中，释放按钮，选择 tableView 变量。

如今，全部的错误应该都解决了。如今尝试编译和运行App。此次，App应该如所指望的效果运行了。选择任一菜单项，详细视图应该显示所选择的菜单项信息。

接下来是什么？

使用导航界面建立App简单么？经过引入 Storyboard，能够显著减小须要编写的代码量。更重要的是，Storyboard界面提供了高层次地预览App的操做流程。咱们但愿这两篇文章让你理解Storyboard是如何工做的，已经如何使用Storyboard构建你本身的App。尽管咱们建立的App比较简单，且都是一些基本的UI元素，可是它详细阐述了基本的概念，你能够基于这些知识建立更复杂的App。

在随后的教程中，咱们将研究静态表单元格，并继续使用tab控制器完善App。