《iOS 9 开发指南》——第6章，第6.8节实战演练——将设计界面连接到代码

本节书摘来自异步社区《iOS 9 开发指南》一书中的第6章，第6.8节实战演练——将设计界面连接到代码，作者 管蕾，更多章节内容可以访问云栖社区“异步社区”公众号查看

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

@end

6.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所示。

异步社区 异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区，也是国内领先的IT专业图书社区，致力于优质学习内容的出版和分享，实现了纸书电子书的同步上架，于2015年8月上线运营。公众号【异步图书】，每日赠送异步新书。