《iOS 9 开发指南》——第6章,第6.8节实战演练——将设计界面连接到代码-阿里云开发者社区

开发者社区> 异步社区> 正文

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

简介:
+关注继续查看

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

6.8 实战演练——将设计界面连接到代码
iOS 9 开发指南
经过本章前面内容的学习,已经掌握了创建界面的基本知识。但是如何才能使设计的界面起作用呢?在本节的内容中,将详细讲解将界面连接到代码并让应用程序运行的方法。

6.8.1 打开项目
首先,我们将使用本章Projects文件夹中的项目“lianjie”。打开该文件夹,并双击文件“lianjie.xcworkspace”,这将在Xcode中打开该项目,如图6-26所示。


811ec21b120946048ae58ee6d6dfaaaf8ed25670

加载该项目后,展开项目代码编组(Disconnected),并单击文件MainStoryboard.storyboard,此故事板文件包含该应用程序将把它显示为界面的场景和视图,并且会在Interface Builder编辑器中显示场景,如图6-27所示。


20e6761a08b66e7def6b07dbf2b8f0a76d897ddf

由图6-27所示的效果可知,该界面包含了如下4个交互式元素。

一个按钮栏(分段控件)。
一个按钮。
一个输出标签。
一个Web视图(一个集成的Web浏览器组件)。
这些控件将与应用程序代码交互,让用户选择花朵颜色并单击“获取花朵”按钮时,文本标签将显示选择的颜色,并从网站http://www.floraphotographs.com随机取回一朵这种颜色的花朵。假设我们期望的执行结果如图6-28所示。

但是到目前为止,还没有将界面连接到应用程序代码,因此执行后只是显示一张漂亮的图片。为了让应用程序能够正常运行,需要将创建到应用程序代码中定义的输出口和操作的连接。


f29e636aa686b39194bfb8e48ee9e0e5084394ae

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。


c1e485f7160a0a1606513bc46e713a5793cd590e

在我们这个演示工程中,其核心功能是通过文件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);
}

@end

6.8.4 创建到操作的连接
选择将调用操作的对象,并单击Utility区域顶部的箭头图标以打开Connections Inspector(连接检查器)。另外,也可以选择菜单View→Utilities→Show Connections Inspector(Option+ Command+6)。

Connections Inspector显示了当前对象(这里是按钮)支持的事件列表,如图6-30所示。每个事件旁边都有一个空心圆圈,要将事件连接到代码中的操作,可单击相应的圆圈并将其拖曳到文档大纲区域中的View Controller图标。


5491bbdc89d2385cc376bf067952bac55e2189e0

假如要将按钮“送给我花”连接到方法getFlower,可选择该按钮并打开Connections Inspector(Option+Command+6)。然后将Touch Up Inside事件旁边的圆圈拖曳到场景的View Controller图标,再松开鼠标。当系统询问时选择操作getFlower,如图6-31所示。


73f73259c35ab45e1c76da4686052fb6ee0a6eb1

在建立连接后检查器会自动更新,以显示事件及其调用的操作。如果单击了其他对象,Connections Inspector将显示该对象到输出口和操作的连接。到此为止,已经将界面连接到了支持它的代码。单击Xcode工具栏中的Run按钮,在iOS模拟器或iOS设备中便可以生成并运行该应用程序,执行效果如图6-32所示。


ebfb9a5cf83bf8168808ecd5a44944ef498a568b

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
推荐一大波让你直呼哇塞的Canvas库【值得收藏】
推荐一大波让你直呼哇塞的Canvas库【值得收藏】
19 0
Spotify的牛是如何炼成的?
编著者按:笔者近期在思考工程文化相关的内容,除了自我总结以及对Google、Facebook的一些探索外,目光再次投向了Spotify这家公司。这是一个高速增长的故事,这是以一个工程文化知名的故事,同时这也是敏捷圈在讲的故事。
5 0
无影云桌面,企业与个人的应用神器
阿里云无影云桌面( Elastic Desktop Service)的原产品名为弹性云桌面,融合了无影产品技术后更名升级。它可以为您提供易用、安全、高效的云上桌面服务,帮助您快速构建、高效管理桌面办公环境,提供安全、灵活的办公体系。
12 0
Flutter基础笔记
目录 List里面常用的属性和方法: Set Map forEach,map, where,any,every extends抽象类 和 implements Flutter环境搭建 入口文件、入口方法 第一个 Demo Center 组件的 使用 把内容单独抽离成一个组件 给 Text 组件增加一些装饰 用MaterialApp 和 Scaffold两个组件装饰 App Text 组件 Container 组件 图片组件 引入本地图片 裁剪布局之 ClipRect、ClipRRect、ClipOval、ClipPath、CustomClipper 实现圆角以及实现圆形图片 圆形头像
6 0
Dart微基准测试第一部分
在过去的几个月里,我开始收到越来越多关于某些特定 Dart 操作性能的问题。以下是Romain Rastel在他关于提高 Flutter中 ChangeNotifier 性能的工作的背景下提出的此类问题的示例。 鉴于我的经验,我第一眼就知道这个特定的基准测试出了什么问题……但是为了讲故事,让我假装我没有。那我将如何处理这个问题? 我通常会首先尝试重复报告的数字。在这种特殊情况下,我将首先创建一个空的 Flutter 应用程序
5 0
2022年的Flag从搭建博客开始,设计模式,数据结构,算法汇总【手摸手系列】
2022年的Flag从搭建博客开始,设计模式,数据结构,算法汇总【手摸手系列】
4 0
使用APICloud AVM框架开发预约应用
前段时间跟朋友一起搞了一个预约的项目,前端用的APICloud的AVM框架做的,后端用的php开发的,用的tp5框架,没几天就搞出来了。简单跟大家分享一下开发中的一些功能点的实现吧。也欢迎大家一起探讨。
7 0
+关注
异步社区
异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区,也是国内领先的IT专业图书社区,致力于优质学习内容的出版和分享,实现了纸书电子书的同步上架,于2015年8月上线运营。公众号【异步图书】,每日赠送异步新书。
12049
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载