6.8 实战演练——将设计界面连接到代码
iOS 9 开发指南
经过本章前面内容的学习，已经掌握了创建界面的基本知识。但是如何才能使设计的界面起作用呢？在本节的内容中，将详细讲解将界面连接到代码并让应用程序运行的方法。
6.8.1 打开项目
首先，我们将使用本章Projects文件夹中的项目“lianjie”。打开该文件夹，并双击文件“lianjie.xcworkspace”，这将在Xcode中打开该项目，如图6-26所示。
加载该项目后，展开项目代码编组（Disconnected），并单击文件MainStoryboard.storyboard，此故事板文件包含该应用程序将把它显示为界面的场景和视图，并且会在Interface Builder编辑器中显示场景，如图6-27所示。
由图6-27所示的效果可知，该界面包含了如下4个交互式元素。
一个按钮栏（分段控件）。
一个按钮。
一个输出标签。
一个Web视图（一个集成的Web浏览器组件）。
这些控件将与应用程序代码交互，让用户选择花朵颜色并单击“获取花朵”按钮时，文本标签将显示选择的颜色，并从网站http://www.floraphotographs.com随机取回一朵这种颜色的花朵。假设我们期望的执行结果如图6-28所示。
但是到目前为止，还没有将界面连接到应用程序代码，因此执行后只是显示一张漂亮的图片。为了让应用程序能够正常运行，需要将创建到应用程序代码中定义的输出口和操作的连接。
6.8.2 输出口和操作
输出口（outlet）是一个通过它可引用对象的变量，假如Interface Builder中创建了一个用于收集用户姓名的文本框，可能想在代码中为它创建一个名为userName的输出口。这样便可以使用该输出口和相应的属性获取或修改该文本框的内容。
操作（action）是代码中的一个方法，在相应的事件发生时调用它。有些对象（如按钮和开关）可在用户与之交互（如触摸屏幕）时通过事件触发操作。通过在代码中定义操作，Interface Builder可使其能够被屏幕对象触发。
我们可以将Interface Builder中的界面元素与输出口或操作相连，这样就可以创建一个连接。为了让应用程序Disconnected能够成功运行，需要创建到如下所示的输出口和操作的连接。
ColorChoice：一个对应于按钮栏的输出口，用于访问用户选择的颜色。
GetFlower：这是一个操作，它从网上获取一幅花朵图像并显示它，然后将标签更新为选择的颜色。
ChoosedColor：对应于标签的输出口，将被getFlower更新以显示选定颜色的名称。
FlowerView：对应于Web视图的输出口，将被getFlower更新以显示获取的花朵图像。
6.8.3 创建到输出口的连接
要想建立从界面元素到输出口的连接，可以先按住Control键，并同时从场景的View Controller图标（它出现在文档大纲区域和视图下方的图标栏中）拖曳到视图中对象的可视化表示或文档大纲区域中的相应图标。读者可以尝试对按钮栏（分段控件）进行这样的操作。在按住Control键的同时，再单击文档大纲区域中的View Controller图标，并将其拖曳到屏幕上的按钮栏。拖曳时将出现一条线，这样让我们能够轻松地指向要连接的对象。
当松开鼠标时会出现一个下拉列表，在其中列出了可供选择的输出口，如图6-29所示。再次选择“选择颜色”。
因为Interface Builder知道什么类型的对象可以连接到给定的输出口，所以只显示适合当前要创建的连接的输出口。对文本“你的颜色”的标签和Web视图重复上述过程，将它们分别连接到输出口chosenColor和flowerView。
在我们这个演示工程中，其核心功能是通过文件ViewController.m实现的，其主要代码如下所示：
#import "ViewController.h"
@implementation ViewController
@synthesize colorChoice;
@synthesize chosenColor;
@synthesize flowerView;
-(IBAction)getFlower:(id)sender {
NSString *outputHTML;
NSString *color;
NSString *colorVal;
intcolorNum;
colorNum=colorChoice.selectedSegmentIndex;
switch (colorNum) {
case 0:
color=@"Red";
colorVal=@"red";
break;
case 1:
color=@"Blue";
colorVal=@"blue";
break;
case 2:
color=@"Yellow";
colorVal=@"yellow";
break;
case 3:
color=@"Green";
colorVal=@"green";
break;
}
chosenColor.text=[[NSStringalloc] initWithFormat:@"%@",color];
outputHTML=[[NSStringalloc] initWithFormat:@"<body style='margin: 0px; padding: 0px'><img height='1200'
src='http://www.floraphotographs.com/showrandom.php?color=%@></body>",colorVal];
[flowerViewloadHTMLString:outputHTMLbaseURL:nil];
}
- (void)didReceiveMemoryWarning
{
[superdidReceiveMemoryWarning];
}
#pragma mark - View lifecycle
- (void)viewDidLoad
{
[superviewDidLoad];
}
- (void)viewDidUnload
{
[selfsetFlowerView:nil];
[selfsetChosenColor:nil];
[selfsetColorChoice:nil];
[superviewDidUnload];
}
- (void)viewWillAppear:(BOOL)animated
{
[superviewWillAppear:animated];
}
- (void)viewDidAppear:(BOOL)animated
{
[superviewDidAppear:animated];
}
- (void)viewWillDisappear:(BOOL)animated
{
[superviewWillDisappear:animated];
}
- (void)viewDidDisappear:(BOOL)animated
{
[superviewDidDisappear:animated];
}
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrien-tation
{
return (interfaceOrientation != UIInterfaceOrientationPortraitUpsideDown);
}
@end6.8.4 创建到操作的连接
选择将调用操作的对象，并单击Utility区域顶部的箭头图标以打开Connections Inspector（连接检查器）。另外，也可以选择菜单View→Utilities→Show Connections Inspector（Option+ Command+6）。
Connections Inspector显示了当前对象（这里是按钮）支持的事件列表，如图6-30所示。每个事件旁边都有一个空心圆圈，要将事件连接到代码中的操作，可单击相应的圆圈并将其拖曳到文档大纲区域中的View Controller图标。
假如要将按钮“送给我花”连接到方法getFlower，可选择该按钮并打开Connections Inspector（Option+Command+6）。然后将Touch Up Inside事件旁边的圆圈拖曳到场景的View Controller图标，再松开鼠标。当系统询问时选择操作getFlower，如图6-31所示。
在建立连接后检查器会自动更新，以显示事件及其调用的操作。如果单击了其他对象，Connections Inspector将显示该对象到输出口和操作的连接。到此为止，已经将界面连接到了支持它的代码。单击Xcode工具栏中的Run按钮，在iOS模拟器或iOS设备中便可以生成并运行该应用程序，执行效果如图6-32所示。