iOS10快速开发：18天零基础开发一个商业应用.html.pdf

《iOS10快速开发：18天零基础开发一个商业应用.html.pdf》由会员分享，可在线阅读，更多相关《iOS10快速开发：18天零基础开发一个商业应用.html.pdf（297页珍藏版）》请在三一文库上搜索。

1、前言 为什么要写这本书 目前，不管是在京东、淘宝、当当还是亚马逊，所有市面上销售的符合Swift 3.0语法的iOS开发书籍屈指可数。即便有也是基于Swift 3.0语言的几个常用知识点，分章节进行传统式讲授，比如Swift基 本语法、控制流、函数和闭包等。如果再找一本Swift 2.0的相关书籍，从目录可以发现它们之间的区别并不大。这也就意味着，如果你已经掌握了Swift 2.0，就没有必要再去买一本Swift 3.0的语法书去学 习它们之间的不同，因为这些大部分只是形式层面上的不同。 作为一名iOS开发程序员，如果掌握了Swift语法知识以后，接下来便是需要通过积累项目实战经验来提升自己的

2、等级了。而这一过程的重点是在完成项目需求的“一条线、一个面”上，而不是在“某 个点”上面。因此，这个项目必须是一个接近完美的产品，它要可以访问后台数据库，具有社交功能，可以添加关注和“被粉”，可以注册用户，实现登录和退出，通过注册的邮箱修改密码，发送信息到 后台服务器的数据库，可以通过相册发布帖子照片，可以评论、其他用户和提交主题标签，当有新消息的时候还可以通知当前用户。基于这样的考虑，本书以国外较为流行的照片分享应用程序 Instagram为例，实现了从用户注册、登录到照片发布、评论、主题标签和mention等一系列功能，让广大读者可以通过本书将所学到的知识点运用到实战中去，摆脱纸上谈兵，真

3、正地将所有的知识点 融会贯通，从而打通所有“脉络”，在编写程序代码的时候达到“思如泉涌”的效果。 本书的主要内容和特色 在笔者读过的很多技术书籍中，绝大部分都是每个章节介绍一个技能，并且通过一个相对独立的实例来进行讲解。例子虽然短小，容易理解，但是所有章节没有任何关联，使读者缺乏开发一个真正完 整项目的体验。 本书以构建一个仿Instagram项目的实践案例贯穿全书，将所有知识点融入到实践中，使大家真正理解和掌握如何通过Xcode SDK和Swift 3.0语言来开发iOS应用程序。 除了书中所涉及的程序代码以外，本书还配套推出了相应的UI设计视频，并通过二维码的形式供广大读者观看。这样做的目

4、的：一是因为通过视频方式讲解UI界面的制作过程会更加生动形象，易于读 者的学习与实践；二是可以节省很多纸张来进行文字性描述和贴图，更加环保；最后一点就是阅读本书的读者大部分都是程序员，本身对于美工方面的技能并不是很精通，但多了解一些也没有什么坏处， 不至于在团队交流的时候被“忽悠”了。基于这三点考虑，笔者录制了相应UI界面的制作视频，可以让程序员在编写代码的时候，开开心心制作UI界面。 本书是根据应用程序项目所实现的功能安排章节的，具体如下： 第一部分（第110章）实现的是Instagram最基本的功能，包括：在iOS项目中集成LeanCloud SDK，实现用户的注册、登录和密码重置功能，U

5、I界面的搭建与布局。 第二部分（第1118章）实现个人用户和访客页面的相关功能，包括：个人用户和访客的页面UI搭建，从LeanCloud云端获取个人信息，关注和被粉信息等。 第三部分（第1925章）实现的是个人配置页面及发布页面的功能，包括：个人配置页面的数据接收与提交，帖子照片的上传，分页载入，帖子单元格的布局等。 第四部分（第2632章）实现了帖子评论功能，包括：创建评论界面，创建主题标签和mention功能等。 第五部分（第3337章）实现了Instagram的集合页面，搜索及通知功能。 各个部分的功能实现都基于由浅入深、循序渐进的原则，让广大读者在实践操作的过程中不知不觉地学习新方法，

6、掌握新技能。 本书面向的读者 本书适合具备以下几方面知识和硬件条件的群体阅读。 有面向对象的开发经验，熟悉类、实例、方法、封装、继承、重写等概念。 有Objective-C或Swift的开发经验。 有MVC设计模式开发经验。 有简单图像处理的经验。 有一台Intel架构的Mac电脑（Macbook Pro、Macbook Air、Mac Pro或Mac Mini）。 如果加入了iOS开发者计划，还可以准备一台iOS移动设备。 如何阅读本书 每个人的阅读习惯都不相同，而且本书并不是一本从Swift语法讲起的基础“开荒”书。所以我还是建议你先找一本Swift 2.X的语法书学起，在有了一定的Swi

7、ft语言基础以后，再开始阅读本书，跟着 实践操作一步步完成Instagram项目。 在阅读本书的过程中，我们可能会遇到语法错误、编译错误、网络连接错误等情况，不用着急，根据调试控制台中的错误提示，去分析产生Bug的原因，或者通过与本书所提供的源码进行对比，找出 问题所在。 本书采用循序渐进的方式，这也就意味着在第5章出现的知识点，有可能在第12章还会出现。这样就可以使广大读者有机会多次去学习和巩固该知识点所能够解决的问题，效果会更好。 勘误和支持 由于水平有限，编写时间仓促，书中难免会出现一些错误或者不准确的地方，恳请读者批评指正。书中的全部源文件可以从华章网站（）下载。如果你有更多的宝贵意见

8、，也欢迎发 送邮件至邮箱liuming_，期待能够得到你们的真挚反馈。 致谢 首先要感谢伟大到可以改变这个世界的Steven Jobs，他的精神对我产生了非常大的影响。 感谢机械工业出版社华章公司的编辑杨福川老师，在这段时间中始终支持我的写作，你的鼓励和帮助引导我顺利完成全部书稿。 最后感谢我的爸爸、妈妈、刘颖、刘怀羽、张燕、卢红玲，感谢你们对我的支持与帮助，并时时刻刻给我信心和力量！ 谨以此书献给我最亲爱的家人，以及众多热爱iOS的朋友们！ 刘铭 2016年12月于中国北京 第一部分 第1章 创建项目并集成LeanCloud SDK 第2章 创建用户登录界面 第3章 创建用户注册界面 第4章

9、 注册视图中编写与界面相关的代码 第5章 设置注册页面的用户头像 第6章 提交用户注册信息到LeanCloud 第7章 用户登录 第8章 创建项目并集成LeanCloud SDK 第9章 调整注册和登录界面的布局 第10章 美化Instagram 第1章 创建项目并集成LeanCloud SDK 在真正创建Instagram仿真项目之前，让我们先了解下BaaS（Backend as a Service，后端即服务）的相关知识。试想一下，现在大部分的手机应用（App）都需要和后端服务器进行交互，小到用户 登录、存储关键信息，大到数据分析、实时监控和直播。不借助移动网络并使用后台数据服务的单机应用

10、现在真是屈指可数了。 BaaS可以为我们做什么呢？它主要为移动应用开发者提供各种移动后端服务，帮助移动（网页）应用开发者将他们的应用与后端云储存和后端应用开放的API连接，同时提供了用户管理、推送通知以 及与社交网络服务整合等功能。这些服务的提供是通过使用定制的软件开发工具（SDK）和应用程序接口（API）来实现的，如图1-1所示。 图1-1 用户通过iPhone的App与LeanCloud云端进行数据交互 当用户使用手机打开某个App以后，App会通过特定API与BaaS平台的服务进行数据交换和处理，并将需要的数据或处理结果反馈给当前用户或其他用户。 在国内，也有几个老牌的MBaaS（Mob

11、ile Backend as a Service，移动后端即服务）平台，LeanCloud就是其中一个，通过它所提供的服务，我们再也不需要租用服务器，也不需要编写后端代码。 LeanCloud平台提供了一站式后端云服务，从数据存储、实时聊天、消息推送到移动统计，涵盖应用开发的多方面后端需求。 在国外，最著名的BaaS平台就是广大程序员所熟知的Parse，它的出名不仅仅是因为它的广泛用户群体，更重要的是在Facebook收购它以后，出于对自身竞争力的考虑，决定在2017年年初关闭 Parse，并将Parse的源代码开源。 1.1 访问LeanCloud 步骤1 浏览器中访问，注册一个账号，如果之

12、前注册过则直接登录，如图1-2所示。 图1-2 在浏览器中访问 步骤2 在应用程序列表中单击创建应用按钮，输入新应用名称，这里设置为Instagram，单击创建按钮，如图1-3所示。 图1-3 在LeanCloud云端创建Insta-gram应用 步骤3 在LeanCloud云端创建好后台应用程序以后，单击该应用标签右上角的齿轮图标便进入到Insta-gram程序的配置页面。在该页面中单击顶端帮助菜单中的快速入门，如图1-4所示。 图1-4 从菜单中找到快速入门 步骤4 在快速入门页面中选择好开发平台（iOS）和应用（Instagram），就可以根据下面的步骤将LeanCloud SDK集成到

13、项目之中了。 1.2 创建Xcode项目Instagram 在LeanCloud云端创建好Instagram应用以后，我们还需要在Xcode中创建一个iOS项目。 步骤1 运行Xcode 8（截止到目前还是beta版），在欢迎菜单中选择Create a new Xcode project。从项目模板面板中选择iOSApplicationSingle View Application，如图1-5所示。 图1-5 Xcode项目模板选择对话框 步骤2 在模板设置对话框中设置Project Name为Instagram；Team为你开发用的AppleID账号；Organization Name为开发

14、团队或个人的名称，可任意填写；Organization Identifier为组织标识， 推荐为一个域名的反向，比如这里的cn.liuming；Bundle Identifier会被自动设置为Organization Identifier与Product Name的整合；Language为Swift；Devices为iPhone；剩下的三个选项全都不用勾 选，如图1-6所示，单击Next按钮。 图1-6 设置Instagram应用的基础选项 步骤3 在确定好项目保存的本地磁盘位置以后，单击Create按钮，便成功创建iOS项目Instagram。图1-7所示是该项目在Xcode 8中的工作界面

15、。 图1-7 Xcode的工作界面 接下来，需要将LeanCloud SDK集成到Instagram项目之中了。 1.3 将LeanCloud SDK集成到iOS项目中 安装LeanCloud SDK到iOS项目有两种不同的方式：一是通过CocoaPods方式，一是通过手动安装方式。如果你对CocoaPods有所了解的话，肯定首选这个，因为它大大简化了安装过程并且易于维 护。好在这一过程并不复杂，让我们开始吧！ 步骤1 根据LeanCloud入门引导，在Xcode导航区域的Instagram项目图标（蓝色的）上单击鼠标右键（Control+Click），在弹出的快捷菜单中选择New File，

16、如图1-8所示。 图1-8 在Instagram项目中添加一个新文件 步骤2 在新文件模板中选择OtherEmpty，单击Next按钮。设置文件名为Podfile后，单击Create按钮，如图1-9所示。 步骤3 在项目导航中选中Podfile文件，并添加下面的代码到文件中。 use_frameworks! # LeanCloud SDK 只能作为动态框架集成到项目中 target Instagram do # Instagram 是项目的名称 pod AVOSCloud # LeanCloud 基础模块 pod AVOSCloudIM # IM 模块 pod AVOSCloudCrashRe

17、porting # 崩溃报告模块 end 图1-9 选择新建文件类型 Podfile文件的第一行代表我们所安装的LeanCloud SDK必须作为动态框架集成到项目中。然后是对Instagram项目添加三个模块：AVOSCloud、AVOSCloudIM和AVOSCloud-CrashReporting。其 中，第一个模块是必须添加的，后面两个是可选的。 注意 在LeanCloud SDK的框架中所有模块名称都是以AVOS开头的，这是为什么呢？据说，当时该平台的名称就叫作AVOSCloud，但是担心国内对使用AV一词有被屏蔽的风险，所以就改成了 LeanCloud。 步骤4 关闭Xcode，打

18、开Mac系统的终端程序，进入当前的Instagram项目文件夹中，也就是含有Podfile文件层级的目录。执行pod install命令。 liumingdeMBP:Instagram liuming$ ls Instagram Instagram.xcodeproj Podfile liumingdeMBP:Instagram liuming$ pod install Analyzing dependencies Downloading dependencies Installing AVOSCloud (3.3.5) Installing AVOSCloudCrashReporting (

19、3.3.5) Installing AVOSCloudIM (3.3.5) Generating Pods project Integrating client project ! Please close any current Xcode sessions and use Instagram.xcworkspace for this project from now on. Pod installation complete! There are 3 dependencies from the Podfile and 3 total pods installed. 通过CocoaPods方

20、式在Instagram项目中安装好LeanCloud SDK框架以后，就可以在项目中使用AVOSCloud模块提供的API了。 如果你的Mac OS系统还没有安装过CocoaPods的话，可以使用手机或平板扫描下方的二维码，如图1-10所示，观看在Mac OS系统上安装CocoaPods的视频教程。 图1-10 在Mac OS系统中安装CocoaPods的视频教程 步骤5 在Mac OS系统的Finder中打开Instagram项目，注意，此时我们需要打开的项目文件不再是Instagram.xcodeproj，而是Instagram.xcworkspace。只有打开这个文件，Instagram

21、项目中才 会包含LeanCloud SDK。 当上面的这些步骤操作完成以后，在项目导航中看起来应该是如图1-11所示的样子。 图1-11 在Xcode中添加AVOSCloud框架后的效果 我们所打开的Instagram.xcworkspace实际上是一个Xcode的工作区，在该工作区中一共有两个项目：Instagram和Pods。Pods就是通过CocoaPods自动生成的项目，该项目维护着Instagram项目所 依赖的第三方库LeanCloud SDK。 注意 iOS从8.0开始支持动态库，所以请确保你的项目只支持iOS 8及以上版本。 1.4 初始化LeanCloud SDK 接下来，我

22、们需要在项目中添加一些文件和代码，对LeanCloud SDK进行初始化。 由于Instagram项目是Swift语言项目，而加载的第三方库LeanCloud SDK是Objective-C语言的项目，因此在Swift项目中调用Objective-C语言的API，需要我们在Instagram中添加一个桥接文件。 步骤1 在项目导航中选择Instagram组（黄色图标的），右击鼠标在菜单中选择New File，在新文件模板面板中选择iOSCocoa Touch Class创建一个新类，在新文件选项面板中将Language设置 为Objective-C，其他按默认值即可，单击Next和Create

23、按钮。此时，Xcode会弹出一个新的对话框，提示是否配置一个Objective-C的桥接头文件，单击Create Bridging Header按钮，如图1-12所示。 此时，在项目中创建了Instagram-Bridging-Header.h文件和另外两个Objective-C的类文件：xxxxx.h和xxxxx.m。 图1-12 为Instagram创建Objective-C的桥接头文件 步骤2 在项目导航中选中删除xxxxx.h和xxxxx.m文件，并将其移动到垃圾桶（Move to Trash）。然后打开Instagram-Bridging-Header.h文件，在该文件中添加下面的代

24、码： #import 经过上面的两步操作，现在我们就可以在Instagram（Swift语言）项目中随意调用AVOSCloud（Objective-C语言）的API函数了，而且调用语法还是保持着swift风格。 步骤3 添加下面的代码到application(_:didFinishLaunchingWithOptions:)方法中，当应用程序启动后会首先调用该方法，我们可以在这里进行最基础的设置，比如这里通过AVOSCloud API让应用 程序连接到LeanCloud云端平台。 func application(_ application: UIApplication, didFinishL

25、aunchingWithOptions launchOptions: NSObject: AnyObject?) - Bool AVOSCloud.setApplicationId(“2NL5pkgYfnrMXkbf17w5rU62-gzGzoHsz“, clientKey: “6Sl5rQaIyXh90CE0i26b2gaJ“) / 如果想跟踪统计应用的打开情况，可以添加下面一行代码 AVAnalytics.trackAppOpened(launchOptions: launchOptions) return true 通过AVOSCloud类的setApplicationId(_:clie

26、ntKey:)方法，可以让应用程序连接到LeanCloud云端，它带有两个参数：第一个参数applicationId是在LeanCloud中创建的应用程序Id，第二个参数 clientKey是LeanCloud应用中的client key。我们可以在LeanCloud云端中的Instagram控制台里面找到相关的Key值，然后直接复制即可，如图1-13所示。 图1-13 在LeanCloud平台查看Key信息 步骤4 在AVAnalytics.trackAppOpened(launchOptions:launchOptions)代码的下面，添加下面的代码： AVAnalytics.trackA

27、ppOpened(launchOptions: launchOptions) let testObject = AVObject(className: “TestObject“) testObject?.setObject(“bar“, forKey: “foo“) testObject?.save() return true 通过上面的代码，我们首先创建了一个AVObject类型的对象，该对象相当于云端TestObject数据表中的一条数据记录。因为是新建，所以该记录应该是全新的，并且等待着存储到云端的TestObject数 据表里面。 如果在云端的Instagram应用中没有TestObj

28、ect数据表的话，AVObject对象会自动创建它。该对象将foo字段的值设置为bar，如果TestObject中没有foo字段的话，AVObject也会自动创建该字段。 最后，保存这条记录到云端的TestObject数据表里面。 技巧 除了使用setObject(_:forKey key:)方式添加数据到TestObject对象以外，还可以利用AVObject类的脚标方式添加数据， let testObject = AVObject(className: “TestObject“) / testObject?.setObject(“bar“, forKey: “foo“) testObjec

29、t?“foo“ = “bar“ testObject?.save() 步骤5 构建并运行项目，一个类名为TestObject的新对象会被发送到LeanCloud云端并保存下来。当程序启动以后，在LeanCloud上访问控制台数据管理就可以看到上面创建的TestObject的相关 数据，如图1-14所示。 图1-14 在LeanCloud云端的Instagram应用中查看添加的数据 在LeanCloud云端的TestObject数据表中，除了foo字段以外，每条记录都会默认有一个objectId字段，作为记录的唯一标识；ACL字段与认证相关；createdAt代表该条记录的创建时间；update

30、dAt 代表该条记录的修改时间。 当LeanCloud SDK测试成功以后，就可以删除之前的测试代码了，删除下面的代码： let testObject = AVObject(className: “TestObject“) / testObject?.setObject(“bar“, forKey: “foo“) testObject?“foo“ = “bar2“ testObject?.save() 本章小结 本章我们学习了如何在LeanCloud云端创建Instagram应用，在Xcode中创建一个Single View Application类型的iOS应用程序项目，以及通过CocoaP

31、ods方式安装LeanCloud SDK到Xcode项目中的 方法。 当我们开发iOS应用时，会经常使用到各式各样的第三方开源类库，比如JSONKit、AFNetWorking等。可能某个类库又用到其他类库，所以要使用它，必须下载所有需要用到的类库，而手动一个个下 载所需类库十分麻烦。此外，项目中用到的类库如果有更新，就必须下载新版本，重新加入到项目中。面对这样的情况，CocoaPods成为一个非常好的选择。CocoaPods是iOS最常用且最有名的类库管理 工具，上述两个烦人的问题，通过CocoaPods，只需要一行命令就可以完全解决，当然前提是你必须正确设置它。重要的是，绝大部分有名的开源

32、类库，都支持CocoaPods。因此，作为iOS程序员，掌握 CocoaPods的使用是必不可少的基本技能。 第2章 创建用户登录界面 让我们从上一章的LeanCloud云端回到Xcode 8，因为在利用模板生成项目的时候，Device设置成了iPhone，所以当打开Main.storyboard故事板文件的时候，只能看到一个iPhone屏幕大小的视图， 我们会一直沿用这个大小的屏幕视图。 2.1 从故事板中创建视图 对于iOS应用程序开发来说，我们总是要从用户界面开始构建项目，这是因为移动端的应用程序都是基于用户交互的，大部分的代码都是在用户单击按钮或者是划动屏幕之后才被执行的。 步骤1 从

33、通用工具区域的对象库（快捷键“control+option+command+3”）中找到View Controller，将该对象拖曳到故事板中View Controller视图的右侧，再拖曳另一个View Controller到之 前View Controller的右侧，如图2-1所示。 步骤2 在项目导航中删除Single View Application模板为我们自动创建的ViewCon-troller.swift文件，在弹出的对话框中单击Remove Reference按钮。然后在Instagram组（黄色图标）上右击鼠 标，在弹出的快捷菜单中选择New File，在新文件模板选择面板中

34、选择iOSSourceCocoa Touch Class，单击Next按钮，如图2-2所示。 提示 删除对话框中的Remove Reference选项代表只删除该文件在项目中的链接，而不真正删除项目中的文件。Move to Trash则真正删除项目中的文件。 图2-1 在故事板中新添加2个View Controller 步骤3 在文件选项面板中，将Class设置为SignInVC，Subclass of设置为UIView-Controller，Language设置为Swift，单击Next按钮。使用默认的存储位置，单击Create按钮。 图2-2 选择新添加文件的类型 步骤4 因为在故事板中一

35、共创建了三个控制器对象，所以在代码中也要相应地创建三个视图控制器类。重复上一步的操作，再创建SignUpVC和ResetPasswordVC两个控制器类。注意，Subclass of 都确保设置为UIViewController，如图2-3所示。 步骤5 回到Main.storyboard，在编辑区域中选择左边第一个视图控制器，然后打开通用工具区域的Identity Inspector（快捷键“option+command+3”），将Custom Class部分中的Class设置为 SignInVC。使用同样的方法，将第二个视图控制器的Class设置为SignUpVC，将第三个视图控制器的Cl

36、ass设置为ResetPasswordVC，如图2-4所示。 图2-3 创建SignUpVC控制器类 图2-4 在故事板中关联三个控制器类 通过步骤5的操作，我们可以分别在新创建的三个类中控制故事板中的三个控制器视图了。 2.2 搭建用户的登录界面 故事板中最左侧的视图现在与SignInVC类关联，接下来需要在这个视图上创建用户的登录界面，该界面包括两个Text Field和三个Button。 步骤1 在对象库中找到Text Field（利用对象库底部的过滤框，可以进行快速筛选），将其拖曳到最左侧的视图之中，大小和位置如图2-5所示。复制第二个Text Field，并将它放置在第一个的下方。

37、技巧 除了使用Command+C和Command+V进行复制粘贴以外，我们还可以按住option键，然后从第一个Text Field拖曳鼠标到下面的位置。在拖曳的时候，鼠标会变成绿色带加号的圆圈，当复制完 成时一定要先松开鼠标再抬起option键，否则只是进行简单的移动操作。 图2-5 在SignInVC视图中创建2个Text Field 步骤2 选中上边的Text Field控件，在Attributes Inspector（快捷键“Command+option+4”）中将Placeholder设置为用户名，Clear Button设置为Is always visible。使用同样的方法，将下

38、面 Text Field的Placeholder设置为密码，同样将Clear Button设置为Is always visible。同时，一定要勾选Secure Text Entry，如图2-6所示。 图2-6 设置密码Text Field的属性 Clear Button代表清除按钮，它会出现在Text Field的最右边。当Text Field中包含文字内容的时候，可以借助Clear Button清除文本信息。Clear Button在什么时候出现，这取决于所设置的属性值， 属性值有以下几种情况： never：清除按钮永不出现，是Clear Button的默认属性值。 whileEditin

39、g：只有在Text Field处于编辑状态的时候才会出现。 unlessEditing：只有在Text Field处于非编辑状态的时候才会出现。 always：Clear Button不管什么时候都会出现在Text Field的右边。 步骤3 从对象库中拖曳一个Button到Text Field的下面，调整好按钮的位置和宽度，确保处于选中状态，在Attributes Inspector中将Title设置为登录。为了美观，可以在登录两个字中间添加空格。 再复制一个登录按钮，将其放在之前按钮右边对应的位置，并将Title改为注册。再添加第三个按钮，将它放置在Text Field和刚才两个Butto

40、n之间的位置。在Attributes Inspector中修改字号为13，在Size Inspector中将width和height分别设置为100和14，在Alignment中将Horizontal设置为左对齐，将Title设置为忘记密码？如图2-7所示。 图2-7 设置“忘记密码？”按钮的属性 步骤4 选中登录按钮，在Attributes Inspector中设置Text Color为White Color，Back-ground为亮蓝色。选中注册按钮，同样设置Text Color为White Color，但Background为亮橘色，如图2-8所 示。 步骤5 按住control键，然

41、后在注册按钮上拖曳鼠标到右侧的第二个视图控制器上，在弹出的快捷菜单中选择Present Modally，如图2-9所示。 构建并运行项目，当我们单击注册按钮的时候，马上会跳转到注册视图，只不过现在的注册视图上，我们还没有搭建任何的用户界面控件。而神奇的是，在这一过程中我们并没有编写任何的代码。 图2-8 设置按钮的背景颜色 图2-9 为注册按钮与第二个视图创建Segue过渡 2.3 为SignInVC类和视图创建Outlet和Action关联 2.3.1 什么是Outlet和Action Outlet和Action是将视图控制器类（存储在swift文件中的类）和界面视图（故事板中的控制器视图）

42、关联起来，并进行交互的两种方式。这两种方式比较相似，但它们最终实现的目的不同。 Outlet 代码类与故事板中视图之间的对话要利用Outlet关联。任何的UI元素（UILabel、UIButton、UIImage、UIView等）都可以通过Outlet方式关联到视图控制器。当我们在代码类中使用 IBOutlet关键字实现Outlet关联以后，那么： 可以通过编写代码的方式更新UILabel等控件的文本或设置UIView的背景颜色。 可以获取到用户界面控件的状态和消息，比如UIStepper当前的值，NSAttributed-String的字号等。 Action 视图传递消息到控制器代码类则需要

43、使用Action。Action在视图控制器中是一个方法，这与IBOutlet关键字不同，它使用的是IBAction关键字。只要有指定的事件发生，Action就会从视 图传递一条消息到视图控制器代码类。Action（或者说Action method）就会在接到消息以后执行相关的代码。 注意 Action只能被设置在UIControl的子类上，这就意味着不能在UILabel或UIView上设置Action。 2.3.2 为SignInVC创建Outlet 步骤1 在项目导航中打开Main.storyboard故事板文件，并选中故事板中最左侧（负责用户登录）的视图。在Xcode的右上角单击助手编辑器

44、模式（有两个圆圈的Icon），如图2-10所示。 图2-10 将Xcode切换到助手编辑器模式 技巧 在默认情况下，打开助手编辑器模式后，出现在编辑区域的两个窗口是左右排列的，如果你使用Macbook进行开发的话，屏幕会显得很拥挤，而且显示效果并不理想。此时，我们可以长按助 手编辑器按钮，在弹出的快捷菜单中选择Assistant Editor on Bottom，这样就成为了上下排列的两个窗口了，如图2-11所示。 图2-11 将助手编辑器设置为上下排列 如果在编辑区域的主窗口中选择了SignInVC的视图，那么在下面的第二窗口中则会自动打开SignInVC.swift文件。如果打开的不是该文

45、件的话，则需要通过第二窗口顶部的路径指示器手动将其打开。 单击AutomaticInstagramInstagramSignInVC.swift即可，如图2-12所示。 图2-12 让位于下面的第二窗口打开指定文件 步骤2 按住Control键，在上边的Text Field控件上拖曳鼠标到下面窗口的SignInVC类中。在弹出的设置面板中，确定Connection设置为Outlet，再将Name设置为usernameTxt，单击connect按 钮，如图2-13所示。 步骤3 对下面的Text Field进行同样的操作，将Name设置为passwordTxt，如图2-14所示。 步骤4 接下来

46、再为三个按钮创建Outlet关联，Name分别设置为：signInBtn、signUp-Btn、forgotBtn，代码如下： class SignInVC: UIViewController / text fields IBOutlet weak var usernameTxt: UITextField! IBOutlet weak var passwordTxt: UITextField! / buttons IBOutlet weak var signInBtn: UIButton! IBOutlet weak var signUpBtn: UIButton! IBOutlet weak

47、 var forgotBtn: UIButton! 图2-13 在故事板和SignInVC类之间创建Outlet关联 图2-14 设置passwordTxt的Outlet关联 这里我们一共创建了五个Outlet关联，两个Text Field和三个Button。当程序运行时，就可以在SignInVC类中通过代码修改这五个用户界面控件的属性。实际上，我们可以把Outlet属性理解为C语言 中的指针，在程序运行时它会指向由故事板创建的特定UI对象，可以访问并控制该对象。 2.3.3 为SignInVC创建Action 只有Outlet还不行，当用户在屏幕上与UI对象交互的时候，还需要让这些UI对象给

48、相应的代码类发送消息，这就需要我们创建Action关联。 步骤1 按住control键，在登录按钮上拖曳鼠标到下面窗口的SignInVC类中，因为创建的是方法，所以要将位置放在下面的方法部分中。在弹出的设置面板中，将Connection设置为Action（非常非 常的重要！），再将Name设置为signInBtn_clicked，Type设置为UIButton，确定Event为Touch Up Inside，Arguments为Sender后，单击connect按钮，如图2-15所示。 图2-15 为SignInVC添加Action方法 当我们将Connection设置为Action后，面板中

49、的选项会立即发生变化。Name是UI对象发送的消息名称，同时也是类中的方法名称。Type是用户与哪个UI对象发生的交互，这里是UIButton，Event 代表按钮的哪个事件被触发后会发送这个消息，Touch Up Inside是用户手指在按钮的上面抬起的时候。这里有两个关键点：一是手指在按钮的范围内，一是抬起时，它是非常标准和普通的按钮动作。 说到Event事件，与Button相关的事件还有很多，可以通过Connection Inspector（快捷键“option+command+6”）查看UI对象的事件都有哪些，如图2-16所示。 选中登录按钮，在Connection Inspector中可以查看登录按钮的Touch Up Inside事件被触发后，会向SignInVC类发送signInBtn_clicked消息，也就是执行SignInVC类的signInBtn_clicked(_:)方法。 步骤2 修改sign