1.6 创建第1个HeIIo WorId iPhone应用

我们首先通过一个简单的Hello World应用来了解如何开发一个iPhone应用,在这个过程中能够掌握如何通过 Xcode 创建 iPhone 项目,如何添加控件和代码,以及如何编译和运行iPhone项目。

1.6.1 通过Xcode创建并运行iPhone项目

在Launch Pad桌面点击打开Xcode开发工具后将看到如图1-8所示的启动窗口,启动窗口中显示的内容根据使用的 Xcode 版本不同会略有出入。本书中的所有例子在 Xcode 4.3.2版本下编写,使用不同的版本不影响对本书的学习和理解。

图1-8 Xcode启动窗口

Xcode启动画面的左边第1个选项“Create a new Xcode project”用来创建新的Xcode项目,右边的窗口显示最近创建的项目,第1次使用Xcode时显示为空。启动画面的左下角有一个选项“Show this window when Xcode launches”,如果不希望Xcode每次启动时都打开此画面,可以取消选择此选项,下次进入Xcode时就不会再打开该窗口了。

更多信息:另外的三个选项,“Connect to a repository”可以使用Xcode的代码版本管理,“Learn about using Xcode”可以打开Xcode的帮助文档,最后一个“Go to Apple's developer portal”可以打开苹果开发者门户网站。

单击“Create a new Xcode project”将创建一个新项目,如果直接从XCode创建新项目,可以从屏幕顶部的Xcode菜单栏中找到File菜单,选择New Project…或者按Shift++N组合键打开新建项目向导窗口。该窗口主要分成两个区域,左边选择具体类别,右侧选择相应的项目模板。左侧的类别主要分成iOS和Max OS X两个部分,我们选择iOS下面的Application。在右侧选择“Single View Application”项目模板。项目模板的主要目的在于为开发者搭建默认的开发体系,如需要导入的包、主要的类文件、资源文件及类文件里面具体的代码框架等,以方便开发人员,其中“Single View Application”是主要使用的项目模板,如图1-9所示。我们在接下来的章节里也会看到其他模板的使用。

图1-9 选择项目模板

选择好以后单击“Next”按钮将会出现如图1-10所示的窗口,可以在其中填写项目的详细信息。这些信息主要有如下几种。

图1-10 输入项目详细信息

Product Name(产品名称):该名称是最终的安装文件的文件名。

Organization Name(组织名称):表明应用所属的组织。

Company Identifier(公司标识):用来帮助识别你的应用,通常建议输入倒过来的公司网址,如com.apple.developer,该标识将有助于保证应用的唯一标识。

Bundle Identifier(束标识):束指的是所有与应用相关的文件的集合,该标识是由产品名称和公司标识共同组成的。如果你所在的团队开发了多个应用,那么束标识将帮助你唯一地标识你的产品,后面我们还将了解到,束标识前面再加上你的开发者账号对应的唯一编码,两者结合起来,就可以在 iCloud 中唯一地标识属于你的应用的存储区域。

Class Prefix(类前缀):Xcode将使用类前缀来自动生成应用中一些重要类的名字。

Devices(设备):选择应用的目标运行平台,可以选择iPhone或者iPad,在Xcode中我们可以建立能够同时在iPhone和iPad上运行的应用。这里的目标运行平台指的是模拟器的种类,在调试运行时还可以修改。

Use Storyboards(使用故事板):故事板是从iOS 5.0开始引入的一个新的概念,方便我们开发和管理多个画面的应用。

Use Automatic Reference Counting(自动引用计数):自动进行内存管理,在稍后的章节中介绍Objective-C时会有详细的介绍。

Include Unit Tests(是否包含单元测试):是否同时建立测试代码,请不要选择该选项。

在我们的例子中请输入以下项目详细信息。

产品名称(Product Name):HelloWorld

组织名称(Organization Name):demo公司标识(Company Identifier):iphone.book

类前缀(Class Prefix):HelloWorld

设备类型(Devices):iPhone

Use Storyboards:是

Use Automatic Reference Counting:是

Include Unit Tests:否

单击“Next”按钮,在接下来的窗口里选择项目的保存路径,确保选择保存路径窗口的“Create local git repository for this project”没有选中,该选项主要负责为项目创建版本控制;然后单击Create创建按钮,Xcode会完成剩下的步骤,按照前面输入的信息生成项目的文件并打开如图1-11所示的项目窗口。

图1-11 Xcode项目窗口

花点时间来了解一下Xcode的项目窗口,Xcode的顶部提供了很多菜单供选择,如File文件菜单,Edit编辑菜单等,每个菜单下面都有些级联的子菜单,菜单里面的很多功能在接下来的章节中都会逐步接触到。再往下是工具栏部分,工具栏最左侧是运行按钮,开发好代码后可以单击此按钮启动模拟器运行代码。运行按钮旁边的是模拟器选择按钮,图1-12显示的是iOS 6.0下的iPhone模拟器,这与我们在创建项目时选择的设备有关,可以随时修改该选项。紧接着旁边的是一个设置断点的快捷按钮,用来在代码里面设置断点调试代码,工具栏部分最右侧是编辑及视图按钮,可以快速调出编辑窗口或者调整Xcode项目窗口的视图。

图1-12 Xcode项目窗口详解

接下来最左侧是项目导航区域,导航区域的默认视图显示项目的文件列表,中间部分是编辑区域,默认是项目的属性编辑器。最右边是工具区域,我们暂时不需要使用该区域,可以单击工具栏最右端的按钮来关闭工具区域视图,再次单击该按钮即可以重新打开工具区域。

虽然还没有写任何代码,但我们的iPhone程序现在已经可以运行了,可以单击工具栏的运行按钮来编译代码并启动模拟器来运行这个iPhone应用。模拟器的运行效果如图1-13所示,此外还可以通过快捷键组合+R来启动模拟器运行程序。但是请注意我们这里使用的并不是iPhone 5的模拟器,稍后将介绍如何使用iPhone 5屏幕尺寸的模拟器来运行应用。

图1-13 iPhone模拟器

如果单击iPhone模拟器的Home键(如图1-14所示),可以看到如图1-13右侧所示的iPhone桌面上面显示了Hello World应用的图标文件。如果再次单击这个图标,就又可以返回到左侧所看到的画面了。

图1-14 iPhone模拟器Home键

1.6.2 了解iPhone应用的基本运行机理

本节简单介绍一些 iPhone 应用的运行机理。由于我们基于 Xcode 的 Single View Application项目模板来创建iPhone项目,Xcode会自动帮我们创建HelloWorld应用的基本框架。Xcode会帮助创建一个应用程序对象,这个对象最重要的工作之一就是建立起一个运行时的循环,这个循环将实时地接收来自外部的各种事件比如屏幕触摸、按钮点击等,并将这些事件交给应用来进行处理。这个对象就是 UIApplicationMain,它定义在 main.m代码文件里。.m文件是Objective-C的代码文件后缀,在第2章将会有详细的介绍。main.m文件是应用的入口启动程序,其中包含一个main函数,就像我们学习过的其他语言如C、Java、.NET一样,应用程序从main函数开始执行。

要查看 main.m 代码文件,可以通过左侧的项目导航区域来查看。导航区域有若干种导航视图,默认视图是代码导航视图,可以单击项目导航栏视图左上侧的按钮来切换到代码导航视图,展开HelloWorld文件夹,再展开SupportFiles文件夹,可以看到如图1-15所示的结构,main.m类文件正位于其下。留意这里的Supporting Files文件夹是Xcode用来管理文件而创建的虚拟文件夹,在真实的文件系统里并不存在。

图1-15 项目导航栏视图

单击main.m代码文件,Xcode会在编辑区域打开并显示main.m代码文件的代码,如图1-16所示。

图1-16 main.m文件

main.m文件里的main函数调用UIApplicationMain函数来启动应用:

        1: int main (int argc, const char *argv[])
        2: {
        3:    @autoreleasepool{
        4:        return UIApplicationMain(argc, argv, nil, NSStringFromClass([HelloWorld
    AppDelegate class]));
        5:   }
        6:}

UIApplicationMain函数会帮助创建一个名为HelloWorldAppDelegate应用程序代理,这里不需要特别地理解应用程序代理的概念,可以认为它就是一个完成特殊任务的类。这个类的名字就是 HelloWorldAppDelegate,名字来源于我们在项目创建时输入的类前缀信息。Xcode自动在后面加上了AppDelegate来告诉开发者这是一个应用程序代理类。应用程序代理将负责加载我们看见的画面。

同时UIApplicationMain函数还会扫描Info.plist文件,Info.plist文件是一个属性列表,属性列表是一个结构化的存储着键/值对信息的文件,里面包含应用的配置信息,比如应用的名称及应用的图标等。HelloWorld 项目的信息列表文件叫做 HelloWorld-Info.plist,如图1-17所示。

图1-17 HelloWorld-Info.plist属性列表文件

由于创建项目时保留了默认的选择“Use Storyboards”(如图1-18所示),因此项目导航栏窗口中我们可以看到MainStoryboard.storyboard文件。

图1-18 选择使用故事板

Storyboard即故事板,是Xcode 4.2以来的新特性,在以往版本的Xcode开发中,如果我们的应用有很多个画面,对于这些画面之间的关系并没有一种很好的管理方式,而是需要通过代码来进行管理。如果画面多了,画面之间的关系就容易变得复杂而难以管理。故事板特性正是用来管理画面的,在这里,可以看到所有画面之间的联系,看到“整个故事”,这也正是Storyboard名称的由来。微软公司在最近发布的Visual Studio 2012中向苹果公司学习,也加入了故事板的功能。

在 HelloWorld 这个应用里面,故事板文件名是 MainStoryboard.storyboard,当加载应用时 MainStoryboard.storyboard 将会被首先加载,在代码导航视图中单击该文件,Xcode会通过Interface Builder(IB)工具打开设计视图,IB工具和Xcode开发环境有很好的集成,大多数时候我们都不会意识到IB工具的存在。

下面多了解一下故事板文件的布局。如图1-19所示,故事板文件的最左侧靠近项目导航栏的区域是大纲视图,也称为“布局栏”,这里会显示所有的画面列表。接着右侧是画布,可以在这里描绘应用画面。画布的左侧有一个向右的箭头称为“初始场景指示器”,指示当应用启动后首先显示与这个箭头相连接的画面。

图1-19 故事板文件布局

迄今为止我们一直称呼 iPhone 屏幕上展现内容的部分为画面,更加专业的说法是视图,与“初始场景指示器”相连的白色区域就是视图,也可以说是视图控制器。关于视图和视图控制器的概念,在稍后的章节中会有详细的介绍。

一个故事板包含Scenes和Segues。Scenes就是场景,指的是不同的视图;Segues就是连接不同的视图的线,代表了两个视图之间的连接关系。Segue是iOS开发中一个很重要的概念,它是用来管理不同视图之间关系的关键,在稍后的章节中会有详细的介绍。在目前的例子里只有一个视图,所以暂时还看不到Segue。

大纲视图也就是布局栏下方展示了如下两个对象。

➢ First Responder(第一响应者):第一响应者是一个动态的对象,它用来指代用户当前与之交互的对象。例如,如果用户当前正在文本字段中输入数据,则该字段就是当前的第一响应者,第一响应者将随着用户与界面的交互而变化。如果有任何疑问,请不用担心,后续章节里面会有详细的介绍。

➢ Hello World View Controller:View Controller就是视图控制器,当storyboard加载视图时会创建一个视图控制器类的实例来管理视图。

如果展开 Hello World 视图控制器,还会发现下面存在一个 View 视图,可以将各种iPhone控件如按钮、文本框拖曳到视图上进行画面布局,在模拟器里看到的白色的应用背景正是来自于这个View。

Exit是从iOS 6开始引入的,Exit是为了双向Segue即为了通过配置的方式来实现视图之间双向切换而引入的,在后续章节中会有详细的介绍。

更多信息:视图控制器和视图是经典设计模式MVC架构中的两个角色V(View)和C(Controller),M指代的是Model,模型。这三者的区别在于Model模型用来处理数据,View视图用来展现内容,而Controller控制器用来处理其中的业务逻辑。在后面的章节中,还会对iPhone应用开发的MVC模型进行深入的介绍。

在接下来的步骤中,我们将向视图中添加一个标签来显示欢迎信息,同时也会进一步接触到Interface Builder工具。

1.6.3 丰富你的iPhone应用

上一节中通过 Xcode 建立了 iPhone 应用的基本框架并真正运行了我们的应用,本节将进一步丰富这个Hello World应用。

首先在项目导航栏单击 MainStoryBoard.storyboard 打开故事板文件,单击将调出右侧的工具窗口,工具窗口的下方是iOS对象库列表窗口,列出了可以直接拖曳到视图中的iOS控件,滚动列表找到Label控件(图1-20显示的只是iOS6支持的控件的一部分,可以滚动对象库查看每个控件的具体说明)。

图1-20 iOS控件

在布局栏视图中单击Hello World View Controller旁边的小三角形图标,展开后选中View,此时右边的视图会呈现被选中状态,如图1-21所示。

图1-21 布局栏选择“视图”

从对象库中拖曳一个Label(标签)到View窗口中,Interface Builder会智能地出现蓝色的引导线,帮助提示标签在视图中的位置,拖曳至合适位置放好后,双击选中标签并输入文本“Hello World”,如图1-22所示。

图1-22 编辑视图

至此,添加新的标签控件的操作就完成了,通过+S组合键保存文件,通过+R组合键运行模拟器就可以运行并查看到如图1-23所示的效果了。

图1-23 Hello World应用运行效果——iPhone

但这并不是我们期待的iPhone 5的运行效果,Xcode默认设置的模拟器还是以往的3.5英寸(对角线)的屏幕。要浏览到iPhone 5的效果,需要重新选择一下模拟器的运行设备。为此,选中模拟器应用后,在屏幕的顶端会出现iOS Simulator的菜单条,在菜单条中选中硬件→设备→iPhone(Retina 4-inch),这将让模拟器使用最新的iPhone 5的屏幕来显示应用,如图1-24所示。

图1-24 重新选择模拟器设备

选择完后屏幕会重新进行调整,视情况需要重新运行应用。如果你的屏幕分辨率过小, iPhone 5模拟器的显示屏幕会特别宽大,需要滚动屏幕才能查看到全部内容的情况,为此可以通过iOS Simulator菜单条中的Window→Scale→50%(+1组合键)来将应用调整到最合适屏幕显示的尺寸。调整后的效果显示如图1-25所示。

图1-25 Hello World应用运行效果——iPhone 5

留意到模拟器的顶部提示里面会显示“iPhone (Retina 4-inch) / iOS6”,表明应用当前运行在搭载有iOS 6的iPhone 5的模拟器屏幕上。此外,由于iPhone 5的顶部较高,为了节省更多的空间显示应用本身,图1-23显示的下方切回到主屏幕的Home键也被隐藏起来,如有需要,可以通过iOS Simulator菜单条中的Hardware→Home子菜单选项来完成同样的效果。

构建一个iPhone应用就是这么简单,后续的章节中将会就iOS应用视图开发的各个方面做深入的介绍。此外我们在故事板文件中选中视图中的标签控件后还可以方便地通过配置来设置标签的字号大小、颜色等各种属性。如图1-26所示,在工具区域的上方是一块控件的配置选择区域,在这里我们可以通过各种检查器来对标签控件进行配置。检查器是Xcode中一个专有的概念,相当于配置面板,为不同的控件提供不同的配置组合。

图1-26 通过属性检查器设置标签属性

工具区域的顶部一共显示了6个检查器可供选择,标签控件的大多数配置可以通过第4个属性检查器来进行配置,例如标签里显示的文本等。

还可以点击查看其他的检查器的用处。设置完属性后保存修改,再次运行应用即可在模拟器里查看到相应的运行结果。

1.6.4 为应用添加桌面图标

在本章结束前,我们将进一步完善应用,让它看起来像一个正宗的应用。将为应用添加一个显示图标,这样它在模拟器的桌面上看起来就不再是光光的白板了。

苹果使用的应用icon的标准大小为57×57像素的图形文件,通常使用.png 文件格式。当查看 iPhone 应用图标时会发现图标的四角做了圆滑处理,并且整个图标也有玻璃质感,如图1-27所示。

图1-27 HelloWorld应用桌面默认图标

我们为应用制作图标时无须制作这种圆滑玻璃质感的效果, iPhone将自动对边缘进行圆角化并让它具有玻璃质感。

接下来从本项目的源代码文件中找到 HelloWorld 项目下方的icon.png文件,将其拖曳到HelloWorld项目的Supporting Files文件夹中(也可以通过File菜单下的“Add Files to "HelloWorld"”功能来添加文件),此时Xcode会弹出如图1-28所示的窗口,提示是否需要复制文件,选中“Copy items into destination group's folder(if needed)”以复制文件,接着单击“Finish”按钮确认复制。

图1-28 复制文件提示窗口

接下来需要告诉iPhone使用这个文件作为应用的桌面图标,这个配置是在之前介绍过的Info.plist中完成的。单击打开HelloWorld-Info.plist文件编辑器,在Key列里寻找Key值为“Icon file”的项,如果没有,可以用鼠标单击plist编辑器窗口空白处,调出如图1-29所示的弹出菜单,选择“Add Row”。

图1-29 属性列表编辑器弹出菜单

或者可以在鼠标指针浮到任意既有项上时,单击如图1-30所示的浮出的加号按钮。在新添加的条目上按上下键选择“Icon file”,然后在右侧的Value列中输入icon.png,完成后的效果如图1-31所示。

图1-30 快捷添加按钮

图1-31 添加Icon file属性后的效果图

保存并运行程序,通过iOS Simulator模拟器的Hardware→Home菜单可以返回到主屏幕,如图1-32所示,指定的icon出现在iPhone模拟器的桌面上了。这并不是一个很好看的图标,但是我们展示了如何通过简单的配置来设置应用的图标显示。

图1-32 桌面应用图标效果图

上面运行这个应用查看桌面图标效果时如果发现图标显示的还是以前的图标,这是缓存的原因,可以在模拟器里将应用先删除再重新运行。删除的方法和在 iPhone 手机里操作的方式完全相同,在模拟器里鼠标长按住桌面图标,直到图标的左上角出现一个圆角小删除按钮,桌面上的应用图标都开始晃动,如图1-33所示,单击删除按钮小图标即可删除应用。

图1-33 删除桌面应用图标

就这样我们的Hello World iPhone应用就完成了,如果你拥有一个收费的标准或者企业账号,还可以将你的Hello World应用发布到App Store中去供大家下载。不过相信这么简单的应用一定会收到苹果公司的审核拒绝邮件。

1.6.5 关于iPhone 5应用的补充说明

另外,细心的读者可能留意到了,如 图1-34所示,在项目导航栏窗口Supporting Files虚拟目录下有Default.png, Default@2x.png,Default-568h@2x.png,这三个文件都被作为应用的加载图片来使用。

图1-34 应用加载图片

这些图片的目的都是为了让应用能够处理不同的屏幕尺寸而由Xcode自动添加的,其中每个图片的用处说明如下。

➢ Default.png:用在普通的不支持Retina显示技术的屏幕上。

➢ Default@2x.png:用在3.5英寸支持Retina显示技术的屏幕上。

➢ Default-568h@2x.png:用在4英寸支持Retina显示技术的屏幕上。这里的586其实是有其特殊含义的,iPhone 5的显示屏尺寸是640×1136像素,但在iOS应用中使用点而不是像素的单位来计算长度,其中一个点对应两个像素,568意味着568点,正好是1136个像素。

1.6.6 老版本应用的兼容性问题

为老版本的iPhone设备开发的应用在iPhone 5上运行会在屏幕的上下方出现黑边以补齐高度上不够的地方。如果希望消除黑边,需要将老版本的应用迁移到iOS 6并进行相应的调整后重新发布应用。

在最简单的调整中,Xcode会自动提示添加Default-568h@2x.png图片,可以参照博文http://www.cnblogs.com/liubiqu/archive/2012/09/21/2696333.html进行调整,应用就能直接在iPhone 5上无黑边运行了。但在应用代码中如果对尺寸进行直接指定,则需要人工进行更多的调整。