iOS开发项目化入门教程
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

1.4 使用Xcode创建第一个iOS程序

在前面的小节中，开发环境已经搭建完毕。本节将会启动Xcode，围绕着Xcode的界面及使用来讲解，创建出第一个iOS应用程序。

1.4.1 在Xcode中创建项目

要想使用Xcode编写程序，首先需要创建一个项目，创建项目可以帮助大家更好地管理代码文件和资源文件。使用Xcode工具创建一个项目，大致要经历以下步骤，具体内容如下。

（1）在Dock中单击“Xcode”快捷图标启动Xcode，弹出欢迎使用Xcode的对话框，如图1-29所示。

036-02

图1-29　Xcode欢迎窗口

图1-29所示是Xcode的欢迎窗口，该窗口分为两个部分，右侧表示最近访问的项目，左侧包含3个选项，具体如下。

  • Get started with a playground：表示创建一个带有playground的工程，用于编写、运行Swift程序。
  • Create a new Xcode project：表示创建一个新的Xcode工程。
  • Check out an existing project：表示打开一个现有的工程。

（2）选择图1-29所示的“Create a new Xcode Project”选项，弹出项目模板窗口，如图1-30所示。

037-01

图1-30　项目模板窗口

图1-30所示是项目模板窗口。该窗口列出了很多项目模板可供选择，不同的项目模板会在新建项目时创建不同的源文件与默认的代码结构。从左侧窗口可以看出，iOS工程模板分为3类，分别为Application、Framework & Library、Other，针对它们的介绍如下。

① Application

  • Master-Detail Application：可以构建树形结构导航模式应用，生成的代码中包含了导航控制器和表视图控制器等。
  • Page-Based Application：可以构建类似于电子书效果的应用，这是一种平铺导航。
  • Single View Application：可以构建简单的单个视图应用。
  • Tabbed Application：可以构建标签导航模式的应用，生成的代码中包含了标签控制器和标签栏等。
  • Game：可以构建游戏的应用。

② Framework & Lidran类型的模板，可以构建基于Cocoa Touch的静态库。

③ Other

利用该类型，我们可以构建应用内购买内容包和空工程。其中，使用应用内购买内容包，可以帮助我们构建具有内置收费功能的应用。

（3）在图1-30中，选择“iOS”→“Application”→“Single View Application”，创建一个单一视图的应用程序，单击“Next”按钮，进入项目配置窗口，如图1-31所示。

038-01

图1-31　项目配置窗口

图1-31所示是项目配置窗口，它允许我们为项目命名、定义项目的包ID前缀、选择设备家族，具体每项的相关介绍如下所示。

  • Product Name：产品名称，图中的产品名称为“01_HelloIOS”。
  • Organization Name：组织名称，图中的组织名称为“itcast”。
  • Organization Identifier：组织标识符，一般输入公司的域名，表示项目的包ID前缀，图中的包ID前缀为“cn.itcast”。
  • Bundle Identifier：捆绑标识符，结合了Product Name和Organization Identifier，在发布程序时会被用到，故此命名不可重复。
  • Language：编程语言，包含Objective-C和Swift两个选项。
  • Devices：选择设备，可构建基于iPhone或者iPad的工程，也可以构建通用工程，在iPhone和iPad上都能够正常运行。

（4）单击图1-31所示的“Next”按钮，进入到选取项目保存位置的窗口，如图1-32所示。

038-02

图1-32　选取项目保存的路径

我们可以选取任意一个位置来保存项目，该窗口下方的“Create Git repository on My Mac”复选框用于源代码的版本控制，如果在正式的项目中，需要勾选该复选框。

（5）单击“Create”按钮，Xcode在指定的目录下面成功创建了一个项目，并且将项目的所有文件存放于此，项目创建好的界面如图1-33所示。

039-01

图1-33　Xcode开发主界面

1.4.2 熟悉Xcode界面

单击图1-33所示左侧的ViewController.m文件，可以看到“Xcode”窗口布局大致分为若干块，如图1-34所示。

039-02

图1-34　Xcode窗口布局

从图1-34中可以看出，它大致包含5个部分，分别为工具栏、项目浏览窗口、编辑窗口、调试窗口及实用工具窗口，针对它们的介绍如下。

1. 工具栏

工具栏位于Xcode窗口的顶部，可以执行多种常见的操作，例如，运行程序。从划分区域上可以看出，其大致分为5个部分，具体如下。

（1）运行及停止运行按钮：位于工具栏的左侧，图标分别为040-03和040-04，用于运行程序或者停止运行程序。

（2）状态：位于工具栏的中央位置，用于展示上一个动作的执行结果或者当前动作的进度，例如，运行应用程序。

（3）设置编辑窗口的视图方式：位于工具栏的右侧位置，其图标为040-05，分别用于显示标准、辅助、版本编辑视图，其中，蓝色表示当前选择的视图方式。

（4）显示或隐藏窗口：位于工具栏的最右侧位置，其图标为040-06，分别用于显示或者隐藏项目浏览窗口、调试窗口及实用工具窗口。其中，蓝色表示显示状态，灰色则表示隐藏状态。

（5）选择运行平台：位于“停止运行”按钮的右侧，图标为040-07，提供了多种平台供项目使用，单击图标会显示出一个运行方案下拉菜单，如图1-35所示。

040-01

图1-35　选择模拟器

从图1-35中可以看出，该下拉列表提供了多种运行方案，其中，iOS Device表示真机测试的设备。

2. 项目浏览窗口

项目浏览窗口位于Xcode窗口的左侧，它列出了项目中所有的源代码文件、资源文件等，在其顶部有一排很小的按钮，它们分别表示不同的导航类型，如图1-36所示。

040-02

图1-36　项目浏览窗口

图1-36所示是项目浏览窗口，该窗口一共包含8个导航器。其中最常用的导航器介绍如下。

  • 项目导航：会以组的形式来管理项目的源代码、图片等各种资源，如图1-36所示当前显示的面板。
  • 符号导航：主要以类、方法、属性的形式来显示项目中所有的类、方法、属性，便于查看项目包含的所有类，以及每个类所包含的属性、方法，允许开发者快速定位指定的类、方法或者属性。
  • 搜索导航：在搜索框内输入要搜寻的目标字符串，按回车键后，该面板会罗列出搜索的结果。
  • 问题导航：若项目中出现任何警告或者错误，都会在此面板中罗列出来。

上述常用导航器对应的界面如图1-37所示。

041-01

图1-37　常用的导航器

3. 编辑窗口

编辑窗口作为最主要的工作区，位于Xcode的中间位置，它主要用于显示与代码的编辑、界面设计、项目的设置等。编辑窗口会随着左侧导航窗口的不同选择而变化，举例如下。

  • 若单击ViewController.m源文件，编辑窗口会显示相应的代码内容，并且允许编辑。
  • 若单击Main.storyboard，编辑窗口会显示故事板，并且允许对界面进行设计。
4. 调试窗口

位于Xcode的底部位置，该窗口只有在对程序进行调试的时候才会显示，包括显示所有程序在运行时的信息，出现错误的提示等。调试窗口如图1-38所示。

041-02

图1-38

图1-38所示是调试窗口，该窗口分为调试面板和控制台输出面板两部分。另外，我们可以看到“断点调试”中包含单步调试、步入调试、步出调试的功能，关于这些调试方式的介绍如下。

  • 单步调试：当程序执行到指定断点之后，单步调试可以控制程序代码每次只会执行一行代码，即单击该按钮一次，程序向下执行一行代码。如果调用了方法，程序不会跟踪方法的执行代码。
  • 步入调试：当进行单步调试时，如果某行代码调用了一个方法，而且开发者希望跟踪该方法的执行细节，则可以使用步入来跟踪该方法的执行。
  • 步出调试：当使用步入调试跟踪某个方法之后，如果开发者希望快速结束该方法，并返回该方法的调用环境，即可单击该步出按钮。
5. 实用工具窗口

位于Xcode的右侧位置，包含检查器面板和库面板两部分，具体介绍如下。

（1）检查器面板

位于Xcode右侧的上半部分，用于查找帮助信息，或是进行属性设置。该面板的内容也会随着当前焦点所在的对象而发生变化，大致分为两种情况，分别如下。

①单击左侧“项目浏览”面板中任意一个源代码文件，检查器面板上方仅显示两个按钮，如图1-39所示。

042-01

图1-39　文件检查器和快速帮助检查器面板

图1-39所示是文件检查器和快速帮助检查器面板，其中，文件检查器主要用于显示该文件存储的相关信息，包括文件名、文件类型、文件存储的路径、文件编码等基本信息；快速帮助检查器简称为“快速帮助面板”，当开发者将光标停留在任意系统类上时，该面板会显示有关该类的快速帮助，快速帮助包括该类的基本说明，有关该类的参考手册、使用指南及示例代码。

②单击左侧“项目浏览”面板中的Main.storyboard或者LaunchScreen.xib，检查器面板上方会显示更多的按钮，如图1-40所示。

042-02

图1-40　新增的检查器面板

图1-40所示是新增的检查器面板，单击Main.storyboard或者LaunchScreen.xib时，添加了4个与界面设计相关的检查器，具体如下。

  • 身份检查器：用于管理界面组件的实现类、恢复ID等标识性属性。
  • 属性检查器：用于管理界面组件的拉伸方式、背景色等外观属性。
  • 大小检查器：用于管理界面组件的宽、高、X坐标、Y坐标等大小和位置相关的属性。
  • 连接检查器：用于管理界面组件与程序代码之间的关联性。

关于以上这4个检查器，后面介绍iOS界面开发时才会使用到，故此处不再详述。

（2）库面板

位于Xcode右侧的下半部分，查看其顶部可以看到4个按钮，表示不同的类型的库，如图1-41所示。

043-01

图1-41　库面板

图1-41所示是4种类型的库面板，每一个库所包含的内容都不同，具体讲解如下。

  • 文件模板库：该库用于管理各种文件模板，开发者可将指定的文件模板拖入到项目，从而快速地创建指定类型的文件。
  • 代码片段库：该库用于负责管理各种代码片段，开发者将这些代码片段直接拖入到源代码中即可。
  • 对象库：该库负责管理各种iOS界面组件，这些界面组件是开发iOS应用的基础。
  • 媒体库：该库负责管理该项目中各种图片、音频等各种多媒体资源。

注意：

默认情况下，媒体库中看不到任何东西，只有为项目添加图片、声音等多媒体文件之后，才能在媒体库中看到列表项。只要从Finder中将图片文件、声音文件拖入项目浏览面板的指定位置，即可将该图片文件、声音文件添加到项目中。

1.4.3 了解项目文件组织结构

要想更好地管理项目文档，首先需要掌握项目文件的组织结构。打开Xcode工具左侧的“项目浏览”面板，该面板罗列出了项目中的所有文件，如图1-42所示。

043-02

图1-42　项目文件一览

图1-42所示列出了项目中所有的文件，其中，01_HelloIOS为根目录，表示整个项目，其内部包含的3个文件夹可以做与项目相关的配置，具体介绍如下。

1. 01_HelloIOS

以项目名来命名，它包含应用程序的大部分代码及用户界面文件，可以在此文件夹内任意新建子文件夹，以便于更好地组织代码。由图1-42可以看出，它包含以下几个文件，分别如下。

  • AppDelegate（.h/.m）：应用程序代理，主要用于监听整个应用程序生命周期中各个阶段的事件。
  • ViewController（.h/.m）：视图控制器，主要负责管理UIView的生命周期，负责UIView之间的切换及对UIView事件进行监听等。
  • Main.storyboard：界面布局文件，承载对应UIView的视图控件。
  • LaunchScreen.xib：程序的启动界面，可根据屏幕的大小来显示合适的尺寸。它只是一个单一界面，无法实现场景的切换，隶属于轻量级的布局界面。
  • Supporting Files：用于保存非Objective-C类的源代码和资源文件，其中，Info.plist对工程做一些运行期的配置，例如，项目的名称、唯一标识符等，main.m为程序的入口。
  • Images.xcassets：应用程序包含的图像资源文件。单击该文件夹，编辑面板显示一个设置项AppIcon，用于设置应用图标，如图1-43所示。
044-01

图1-43　选中Images.xcassets显示的编辑窗口

2. 01_HelloIOSTests

该文件夹下包含单元测试的相关类和资源，本书不会过多涉及测试相关的内容，此文件夹可以忽略。

3. Products

该文件夹仅仅包括该项目所生成的应用程序，其中，01_HelloIOS.app文件是项目所生成的应用程序，也是iOS应用开发的最终目的，使用红色标识文件实际上并不存在。

多学一招：为应用添加图标

在模拟器上使用快捷键“044-02H”，回到应用程序列表，可以看到01_HelloIOS程序图标是白色的圆角正方形，缺乏吸引力。为此，我们要为应用添加图标。接下来，通过一张图来描述，如图1-44所示。

045-01

图1-44　iPhone中的应用图标

图1-44所示是iPhone的各种应用图标，这些图标均是以圆角正方形的形式显示，iPhone可自动把图标的边缘圆角化并让它具有玻璃质感。iPhone 4之后的设备都采用了Retina高清屏幕，为此，支持iOS 7及以上版本的iPhone的程序包需要以下尺寸的图片，具体如下。

  • 120×120像素：用于iPhone 6的应用程序图标显示，这个是必须要有的。
  • 80×80像素：用于iPhone 6的Spotlight搜索。
  • 58×58像素：用于iPhone 6的Settings设置。
  • 180×180像素：用于iPhone 6 Plus的应用程序图标显示，这个也是必须要有的。
  • 120×120像素：用于iPhone 6 Plus的Spotlight搜索。
  • 87×87像素：用于iPhone 6 Plus的Settings设置。

另外，iPad的图标根据不同的功能显示都有一定的尺寸要求，为此，iPad程序包需要以下尺寸的图片，具体如下。

  • 76×76像素：用于iPad桌面应用程序图标的显示，这个是必须要有的。
  • 40×40像素：用于iPad中的Spotlight搜索。
  • 29×29像素：用于iPad中的Settings设置。
  • 152×152像素：用于iPad 3及以后的设备桌面应用程序图标的显示，这个是必须要有的。
  • 80×80像素：用于iPad 3及以后的设备中的Spotlight搜索。
  • 58×58像素：用于iPad 3及以后的设备中的Settings设置。

一个良好的应用程序应该会考虑到图标的多样性，例如，在iPhone 6上显示的正常图标在iPhone 6 Plus设备上就会显得模糊或者粗糙，因此，尽量为自己的应用程序准备各种尺寸的图标文件，图标文件的命名最好遵守苹果的规范，大致分为以下几种情况，具体如下。

  • Icon@2x.png：120×120像素，iPhone 6的应用图标。
  • Icon@3x.png：180×180像素，iPhone 6 Plus的应用程序图标。
  • Icon-76.png：76×76像素，iPad的应用图标。
  • Icon-76@2x.png：152×152像素，iPad 3及以后的设备的应用图标。
  • Icon-Small@2x.png：58×58像素，iPhone 6的Settings设置图标。
  • Icon-Small@3x.png：87×87像素，iPhone 6 Plus的Settings设置图标。
  • Icon-Small-29.png：29×29像素，iPad中的Settings设置图标。
  • Icon-Small-29@2x.png：58×58像素，iPad 3及以后的设备中的Settings设置图标。
  • Icon-Small-40.png：40×40像素，iPad中的Spotlight搜索图标。
  • Icon-Small-40@2x.png：80×80像素，iPhone 6、iPad 3及iPad 4的Spotlight搜索图标。
  • Icon-Small-40@3x.png：120×120像素，iPhone 6 Plus的Spotlight搜索图标。

依据以上的规则，我们准备一套支持iOS 7及以上版本的一套图标文件。这时，若想将图标文件添加到工程中，大致分为以下几步。

（1）选择左侧“项目浏览窗口”中的Images.xcassets文件，在“编辑窗口”的左侧栏中选择图标集“AppIcon”，如图1-45所示。

046-01

图1-45　选择编辑窗口的图标集

（2）从Finder中选中之前准备好的图标文件，拖动其到每个图像配置相关的图标的窗口，如图1-46所示。

046-02

图1-46　配置相关图标的窗口

图1-46所示是苹果官方文档的配置App Icon，只要将所有的图标拖曳到此窗口，松开鼠标，Xcode会自动将文件复制到应用中，图像自动寻觅到自己的位置并显示。删除之前模拟器运行的程序，重新运行，再次回到应用程序列表，这样就能够看到成功定制的应用程序图标。

注意：

（1）Images.xcassets所在的目录会复制图像并添加它们，如果之前已经将这些图像资源添加到项目中，你可以很安全地删除源图像文件。

（2）如果你不提供一个列出的可选图标，即该位置为空白，那么，系统会自动缩放现有的图标到合适的大小。但是仍然强烈推荐应用程序包含所有的图标。

（3）所谓Retina屏幕，就是高清视网膜屏幕，该屏幕的分辨率的宽高是标准屏幕分辨率的2倍。

多学一招：设置启动画面

除了应用图标之外，我们还可以通过定制启动界面来美化应用。当用户单击设备上的应用程序图标，启动画面会显示到主界面，接下来，通过一张图来描述，如图1-47所示。

047-01

图1-47　微信的启动画面

图1-47所示是手机微信的启动画面，该画面铺满了手机的整个屏幕。依据设备、方向的不同，启动画面要支持以下规格，见表1-3。

表1-3　启动图片的规格

047-02

表1-3列举了针对不同设备的启动图片的规格，其中，iPad包含竖屏和横屏情况。定制iOS应用的启动图片iPhone和iPad程序包需要以下尺寸的图片，具体如下。

  • 768像素×1024像素：用于iPad 2和iPad mini标准屏幕启动画面的显示，仅适用于竖屏。
  • 1024像素×768像素：用于iPad 2和iPad mini标准屏幕启动画面的显示，仅适用于横屏。
  • 1536像素×2048像素：用于iPad和iPad mini Retina屏幕启动画面的显示，仅适用于竖屏。
  • 2048像素×1536像素：用于iPad和iPad mini Retina屏幕启动画面的显示，仅适用于横屏。
  • 640像素×960像素：用于iPhone 4s启动画面的显示。
  • 640像素×1136像素：用于iPhone 5启动画面的显示。
  • 750像素×1334像素：用于iPhone 6启动画面的显示，仅适用于竖屏。
  • 1334像素×750像素：用于iPhone 6启动画面的显示，仅适用于横屏。
  • 1242像素×2208像素：用于iPhone 6 Plus 启动画面的显示，仅适用于竖屏。
  • 2208像素×1242像素：用于iPhone 6 Plus 启动画面的显示，仅适用于横屏。

同样，启动画面的图片文件的命名也要遵守苹果的规范，大致分为以下几种情况，具体如下。

  • Default@2x.png：640像素×960像素，iPhone 4s的启动图片。
  • Default-568h@2x.png：640像素×1136像素，iPhone 5的启动图片。
  • Default-Portrait～ipad.png：768像素×1024像素，iPad 2和iPad mini竖屏标准屏幕的启动图片。
  • Default-Portrait～ipad@2x.png：1536像素×2048像素，iPad和iPad mini 竖屏Retina屏幕的启动图片。
  • Default-Landscape～ipad.png：1024像素×768像素，iPad 2和iPad mini横屏标准屏幕的启动图片。
  • Default-Landscape～ipad@2x.png：2048像素×1536像素，iPad和iPad mini 横屏Retina屏幕的启动图片。

由于Xcode 6添加了一个LaunchScreen.xib，用于指定支持iOS 8系统的设备启动界面，即iPhone 6和iPhone 6 Plus，可支持不同大小的屏幕。默认情况下，其内部包含一个标签，该标签的文本内容为应用程序的名称。实质上，xib文件最终会转换为图片保存在沙盒路径下。

除此之外，我们还可以采用添加应用图标的方式设置启动画面。依据以上的规格，准备一套支持iOS 7及以上版本的一套图像文件，要想添加启动画面，大致经历以下几个流程。

（1）单击根目录，编辑窗口内默认选中“General”选项，在其对应的面板中，找到“App Icons and Launch Images”选项，删除“Launch Screen File”对应的文本框的内容，单击“Launch Images Source”选项对应的“Use Asset Catalog”按钮，弹出一个对话框，如图1-48所示。

048-01

图1-48　转移启动图片Images目录

（2）单击图1-48所示的“Migrate”按钮，会看到“Use Asset Catalog”按钮消失，变为一个列表框，同时后面添加了一个048-02图标。单击该图标，跳转到Images.xcassets对应的编辑面板，如图1-49所示。

049-01

图1-49　Images.xcassets对应的编辑面板

从图1-49可以看出，左侧添加了一个设置项Launch Image，用于设置启动画面。随着右侧“属性检查器”面板中复选框的勾选的增加，编辑窗口的虚线框增加，以适应更多的屏幕尺寸。将之前准备好的启动图片拖曳到此窗口，松开鼠标，Xcode会自动将文件复制到应用中，图像自动寻觅到合适的位置并显示，这些图片就被设置为应用程序的启动画面。重新运行应用，这样就能够看到成功定制的启动画面。

1.4.4 编译并在模拟器上运行程序

项目创建完成之后，可直接编译运行。单击Xcode工具栏中的“运行”按钮，或者使用快捷键“049-03R”即可，稍等片刻后，Finder中会出现一个类似于iPhone的窗口，如图1-50所示。

049-02

图1-50　iOS模拟器

图1-50所示是程序运行后弹出的窗口，一个iPhone出现在屏幕上，它就是iOS模拟器，若程序没有出现任何错误时，Xcode会在模拟器或者真实设备中运行项目程序，以便于进行初步调试和测试。

1.4.5 使用Interface Builder丰富程序界面

Interface Builder，IB，它是一个用户界面设计工具，采用所见所得的方式让开发者编辑用户界面，隶属于Xcode开发环境自带的用户图形界面设计工具。

Storyboard是从iOS 5.0开始新加入的功能，它又被称为“故事板”，用于在一个窗口中显示整个应用用到的所有或者部分页面，且可以定义各页面之间的跳转关系，大大地增加了IB便利性。单击图1-34所示的Main.storyboard文件，其对应的编辑窗口如图1-51所示。

050-01

图1-51　故事板窗口

图1-51所示是故事板窗口，由图可知，其大致可以分为两个部分，它们分别为文档大纲区域和IB编辑器区域，针对这两部分的介绍如下。

（1）文档大纲区域

该区域以层次的方式显示其中的场景，与右侧窗口的结构一一对应。从图1-51中可以看出，根节点是一个View Controller Scene，表示一个窗口界面，其内部包含了View Controller、View、First Responder，组合在一起就被称为场景，即Scene。

（2）IB编辑器区域

该区域以可视化的方式显示左侧窗口场景的内容。从图1-51中可以看出，该区域中间放置了一个特定大小的矩形框，表示View Controller，该矩形框顶部包含3个图标按钮，针对它们的介绍如下。

050-02：View Controller，即视图控制器，表示加载应用程序中的故事板场景并与之交互的对象，负责实例化其他所有对象。

050-03：First Responder，即第一响应者，表示用户当前正在与之交互的对象。当用户在使用iOS应用程序时，可能会存在多个对象影响用户的手势或者键击，当前与用户交互的对象是第一响应者。

050-04：Exit，表示退出。

其中，View Controller内部包含一个View，是一个可视化矩形区域，它负责视图控制器显示在设备屏幕上时的布局和界面。除此之外，该区域左侧有一个大大的灰色箭头，用于指定初始加载的视图控制器，程序启动之后，默认会直接显示这个视图控制器的View。

若要丰富界面，可以直接从对象库中拖曳一些组件来实现。接下来，完成一个加法计算器应用的布局，如图1-52所示。

051-01

图1-52　加法计算器

图1-52所示是一个加法计算器页面，要想搭建这个界面，大致要经历以下过程，具体如下。

①选中图1-51所示的051-03图标，在右侧的属性检查器面板中看到“Simulated Metrics”选项，从该选项的“Size”对应的下拉菜单中选择“iPhone 3.5-inch”，如图1-53所示。

051-02

图1-53　设置模拟器的尺寸

②打开对象库面板，分别拖曳2个Text Field、3个Label、1个Button到程序界面。若要调整界面的布局，指定组件所处的位置，可通过Apple提供的调整布局的工具来实现，大致如下。

●参考线

当在视图中拖曳对象时，将会自动出现蓝色的参考线，用于辅助布局。通过这些蓝色的虚线能够将对象与视图边缘、视图中其他对象的中心，以及标签和对象名中使用的字体的基线对齐，并且当间距接近Apple界面指南要求的值时，参考线将自动出现以指出这一点。

另外，我们也能手工添加参考线，依次选择菜单“Editor”→“Add Horizontal Guide”或者“Add Vertical Guide”实现。

●选取手柄

大多数对象都有选取手柄，可以使用它们沿水平、垂直或者这两个方向缩放对象。当对象被选定后在其周围会出现小框，单击并拖动它们可以调整对象的大小。需要注意的是，在iOS中有一些对象会限制如何调整其大小，以确保iOS应用程序界面的一致性。

●对齐

要快速对齐视图中的多个对象，可单击并拖曳出一个覆盖它们的选框，或者按住Shift键并单击以选中它们，然后从菜单“Editor”→“Align”中选择合适的对齐方式，如图1-54所示。

052-01

图1-54　校准窗口

●大小检查器面板

选中组件，打开右侧窗口的“大小检查器”面板，其提供了大小、位置及对齐方式相关的信息。通过修改View选项中文本框的数值，精确地控制组件的位置和大小。

根据需求，使用以上任意的方式，将全部的组件放置到合适的位置，并指定合适的大小，完成好的界面如图1-55所示。

052-02

图1-55　添加完成的界面

从图1-55中可以看出，Label用于显示文字；Text Field用于输入文本，与用户形成交互；Button表示按钮。针对这些组件，后面会有详细地介绍。借助位置辅助线的提示，布局了所有的组件，并显示在文档大纲区域的View子节点内。

③图1-55所示的效果与最终效果图有差异，可以通过设置组件的外观来实现。依次选中每个组件，修改它们的外观，可分为以下情况。

  • 选中Button，双击后输入“计算”，改变Button的标题，在右侧的属性检查器面板中，设置其Background为浅灰色，如图1-56所示。
053-01

图1-56　修改Button的Background

  • 依次选中3个Label，双击使其处于可编辑状态，分别输入“+”“=”“0”。
  • 依次选中两个Text Field，在右侧的属性检查器面板中，设置其Keyboard Type为Number Pad，即数字键盘，如图1-57所示。
053-02

图1-57　设置文本框的Keyboard Type为Number Pad

④按下053-04S，保存当前的故事板文件。重新单击运行按钮，再次编译并运行程序，运行后的界面如图1-58所示。

053-03

图1-58　程序的运行结果图

从图1-58中可以看出，使用Interface Builder更加直观地丰富了程序的界面，完全无需依赖一行代码。

多学一招：IBOutlet和IBAction的使用

固定的界面设计具有一定的局限性，如图1-58所示只显示了应用的静态效果。为此，我们可以使程序界面与代码关联起来，实现动态地改变。

若要实现计算的功能，显而易见，要获取两个Text Field的内容，当用户单击“计算”按钮时计算相加的结果，最终显示到最右侧的Label上。我们需要利用一个变量与控件关联起来，一个方法与按钮绑定起来。为此，iOS提供了两个关键字IBOutlet和IBAction，针对它们的介绍如下。

（1）输出口（IBOutlet）

控制器使用IBOutlet来引用Storyboard中的对象，该关键字声明了一个输出口，并将其指向了某个控件，仅仅是告诉Interface Builder，被IBOutlet修饰的实例变量将被连接到Storyboard中的对象。

（2）操作（IBAction）

控制器使用IBAction来修饰方法，该关键字告诉Interface Builder，该方法是一个操作，并且可以被某个控件所触发。

要想实现计算的功能，关联控件并绑定方法，大致需要经历以下4个步骤，具体内容如下。

1. 通过IBOutlet连接来获取控件

（1）在项目浏览窗口中选中Main.storyboard文件，单击Xcode右上角的辅助视图，Xcode会在编辑窗口打开辅助编辑器，如图1-59所示。

054-01

图1-59　打开辅助编辑面板

图1-59所示打开了辅助编辑面板，由图可知，编辑窗口分为两个部分，左侧为故事板，右侧为ViewController.m文件。由于故事板中控制器的关联类为ViewController，当选中故事板的同时，打开辅助编辑器，通常会在Xcode左侧显示故事板，右侧会自动切换到控制器类的实现文件。

（2）选中左侧故事板中第一个Text Field，按下键盘上的control键，按住鼠标不放，将Text Field拖向ViewController.m的类扩展部分，此时会看到一条蓝色的线条，该线条从故事板的Text Field开始，一直连接到光标结束，如图1-60所示。

055-01

图1-60　为Text Field建立IBOutlet

（3）松开鼠标左键，弹出一个灰色框，如图1-61所示。

055-02

图1-61　填写IBOutlet属性信息

从图1-61中可以看出，该对话框总共包含5个字段，开发者可以选择或者填写如下字段。

  • Connection列表：可以选择是为该UI控件创建IBOutlet属性还是IBOutlet集合，系统默认会为该控件创建IBOutlet属性。
  • Name文本框：通过该文本框为该IBOutlet属性输入任意一个属性名，最好保证较好的可读性。
  • Type文本框：用于设置该属性的类型，Xcode默认会设置该属性的类型为UITextField，因为Xcode可以智能地检测到正在建立IBOutlet管理的控件类型。
  • Storage列表：开发者可以通过该文本框设置该属性的存储机制，即Strong或者Weak，默认为Weak。

在图1-61所示的Name文本框内输入“textNumber1”，这时，“Connect”按钮呈可单击状态。

（4）单击“Connect”按钮，系统会在ViewController.m的类扩展部分创建一个IBOutlet属性，如图1-62所示。

056-01

图1-62　IBOutlet属性

从图1-62中可以看出，IBOutlet属性就是OC语法中的@property属性，只不过额外增加了一个IBOutlet修饰词。另外，该IBOutlet属性左边有一个带有黑点的圆圈，这标志着该IBOutlet属性已经与故事板中的UI控件建立了关联。

（5）采用相同的方式，添加两个IBOutlet属性，用于关联第二个Text Field和最右侧的Label，完成后的界面如图1-63所示。

056-02

图1-63　关联完成的界面

2. 通过IBAction绑定实现事件处理

当用户单击Button时，能够触发控制器中的某个方法。因此，在ViewController.m中定义一个IBAction方法，并将该方法绑定到Button对应的事件，实现触碰Button时会激发该IBAction方法。

（1）选中左侧故事板中“计算”按钮，按下键盘上的control键，按住鼠标不放，将Button拖向ViewController.m的类扩展部分，此时会看到一条蓝色的线条，该线条从故事板的Button开始，一直连接到光标结束，如图1-64所示。

057-01

图1-64　为Button建立IBAction

（2）松开鼠标左键，弹出一个灰色框，在Connection列表中选择Action，如图1-65所示。

057-02

图1-65　填写IBAction方法信息

从图1-65中可以看出，该对话框总共包含6个字段，开发者可以选择或者填写如下字段。

  • Connection列表：选择为该UI控件创建IBOutlet属性、IBAction方法，还是IBOutlet集合。此处应选择创建IBAction方法。
  • Name文本框：通过该文本框为该IBAction方法输入任意一个方法名。
  • Type文本框：开发者可通过该文本框设置触发该事件的UI控件的类型，Xcode默认会设置该属性的类型为id，为了更准确地处理事件源控件，应直接将事件源控件的类型设为UIButton。
  • Event列表：该列表框用于选择为哪种事件绑定IBAction方法。Xcode默认会选择的事件类型为“Touch Up Inside”，表示当用户在按钮区内部触碰并松开时触发该IBAction方法。
  • Arguments列表：选择IBAction的形参列表，此处选择Sender，表示创建的IBAction方法包含一个形参，该形参代表触发该IBAction方法的事件源。该列表框支持3种选项：None，该IBAction方法不包含任何形参；Sender，该IBAction方法仅包含一个形参；Sender And Event，该IBAction方法包含两个形参，分别代表触发该IBAction方法的事件源控件和事件本身。

在图1-65所示的Name文本框内输入“calculate”，Type指定为UIButton，Arguments设置为None，这时，“Connect”按钮呈可单击状态。

（3）单击【Connect】按钮，系统会在ViewController.m的类扩展部分创建一个IBAction方法，同时，在ViewController.m的实现部分也会添加一个IBAction方法，如图1-66所示。

058-01

图1-66　IBAction方法

从图1-66中可以看出，IBAction方法就是OC语法中方法，只不过返回值类型为IBAction，作用相当于void。另外，该IBAction方法左边有一个带有黑点的圆圈，这标志着该IBAction方法已经被绑定到故事板的Button的特定事件。

3. 实现计算的功能

在ViewController.m中的calculate方法中，编写处理代码即可。单击“计算”按钮，获取两个Text Field的内容，并将计算结果显示到最右侧的Label上，代码如例1-1所示。

【例1-1】 ViewController.m

1    #import "ViewController.h"
2    @interface ViewController ()
3    // 定义 3 个属性，分别表示两个数值、结果
4    @property (weak, nonatomic) IBOutlet UITextField *textNumber1;
5    @property (weak, nonatomic) IBOutlet UITextField *textNumber2;
6    @property (weak, nonatomic) IBOutlet UILabel *resultLabel;
7    - (IBAction)calculate;
8    @end
9    @implementation ViewController
10    // 单击“计算”按钮激发的方法
11    - (IBAction)calculate {
12        // 1. 获取两个文本框的内容
13        int number1 = self.textNumber1.text.intValue;
14        int number2 = self.textNumber2.text.intValue;
15        // 2. 相加
16        int sum = number1 + number2;
17        // 3. 将结果显示到resultLabel
18        self.resultLabel.text = [NSString stringWithFormat:@"%d",sum];
19        // 4. 隐藏键盘
20        [self.view endEditing:YES];
21    }
22    @end

在例1-1中，第11～21行代码是calculate方法，表示单击“计算”按钮后激发的方法。其中，第13～14行代码分别获取了两个文本框的内容，并将其转换为int类型的数值；第16行代码将两个数值相加；第18行代码将sum转换为NSString类型，并显示到resultLabel上；第20行代码将弹出的虚拟键盘隐藏。针对这些控件，后面章节会有详细介绍。

4. 运行程序

单击Xcode左上角的运行按钮，程序运行成功后，单击第一个文本框，屏幕顶部动画地弹出一个虚拟数字键盘，通过该键盘输入任意一个数值，同样在第二个文本框中输入任意一个数值，单击“计算”按钮，最终结果显示在右侧的标签上，部分运行结果如图1-67所示。

059-01

图1-67　程序的运行结果图

1.4.6 使用iOS模拟器

iOS SDK提供了iOS模拟器，用于对程序进行初步测试与调试。一般情况下，Xcode在成功编译项目后会自动启动iOS模拟器，之后在模拟器上运行编译之后的程序。接下来，通过一张图来描述，如图1-68所示。

060-01

图1-68　iOS模拟器

图1-68所示是iPhone 6的模拟器，由图可知，程序运行的界面与真实的设备几乎一致，模拟程度很高，在模拟器中可以进行如下操作。

（1）进行各种触屏操作，例如，单个手指的单击、双击、按住不动、拖曳，两个手指的按下、同时移动等。

对于单个手指触屏操作，可以使用鼠标在模拟器界面中直接单击与拖曳，如果要模拟两个手指的触屏，可以在模拟器中按下option键不放，这时模拟器界面出现两个灰色的圆点，表示两个手指。若移动鼠标，两个触屏点会以中心对称的方式向相反方向运动；若要两个触屏点向相同方向运动，需要按住option 060-04不放，移动鼠标即可。

（2）进行方位旋转，例如，90°、180°、270°旋转。

对于设备旋转，单击iOS模拟器的“Hardware”菜单项，会弹出一个下拉列表，如图1-69所示。

060-02

图1-69　单击Hardware菜单显示的下拉列表

从图1-69中可以看出，大致划分为5个区域。其中，第二个区域内包含“Rotate Left”和“Rotate Right”两个选项，分别表示向左旋转和向右旋转，快捷方式为060-05或者060-06。

（3）特殊情况模拟，例如，内存不足的情形。

如果想要检测程序在内存不足时的情形，如图1-69所示，第四个区域内包含一个“Simulate Memory Warning”选项，表示模拟内存警告，选中该选项，模拟器会向当前程序发送内存不足的警告消息。

（4）切换模拟的设备类型，可选的设备类型为iPhone与iPad。

iOS模拟器可以模拟iPhone与iPad，如图1-69所示，第一个区域内包含一个“Device”选项，表示硬件设备，选中该选项，右侧会弹出一个子列表，如图1-70所示。

060-03

图1-70　Device对应的窗口

除此之外，模拟器也可以模拟回到主页和锁屏，如图1-69所示，第三个区域内包含“Home”和“Lock”两个选项，分别表示回到主页和锁屏，快捷方式为061-02和061-03。

iOS模拟器功能强大，使用极其方便，但其只属于一个模拟的设备，必然会存在一定的局限性。究其原因，大致原因如下。

（1）iOS设备本身的硬件条件有限，对程序的内存使用、响应时间都有严格的限制，而模拟器运行在计算机中，允许使用全部的计算机硬件资源，因此，模拟器无法准确地检测程序的性能，不可准确地反映内存使用情况。

（2）模拟器无法使用所有的iOS特性，例如，加速计、陀螺仪、照相机、麦克风与iCloud等，因此程序无法处理这些动作。

（3）模拟器通过鼠标来模拟用户的触屏动作，而计算机只有一个鼠标，无法模拟多点触摸事件。

（4）模拟器使用的软件库与真实设备使用的软件库不一致，可能不能准确表现程序运行时行为。

因此，要想真正对程序进行完整测试，在真实设备上运行程序是必不可少的。

上一章目录下一章