[译] 三、使用Xcode 5和界面生成器创建Hello World 应用

标签：

声明：本文翻译自AppCoda网站的文章：Creating Hello World App Using Xcode 5 and Interface Builder，作者是创建者Simon Ng。如有异议，请联系博主。

更新：基于苹果发布最新版的Xcode 6和Swift语言，我们更新最新版的Hello World教程。

　　这个Hello World教程在之前写过老版本的免费教程。我们想有必要使用Xcode 5来重新更新一遍教程（由于老的教程已经过时，译者就不再翻译老版本教程，希望各位读者谅解）。关于老版本的Hello World教程，我们收到了相当多的疑问（或者投诉）。以下：

• 我尝试跟着教程做，但是已经无法在Xcode 5下面正常运行。
• Interface Builder 界面生成器在哪里？
• 我如何创建XIB文件？

　　列举的问题层出不穷，在Xcode 5中，出现新的Storyboard 故事板来替代Interface Builder 界面生成器。当你使用单独的试图模板来创建一个新的Xcode项目，它默认使用的就是Storyboard，已经不再存在XIB文件了。 

　　我们已经完成更新了Xcode 5版本的Hello World教程。然而，我们还是打算使用Interface Builder界面生成器来创建项目。这并不是意味着Interface Builder 比Storyboard好，我们只是想要你两种方式都学习。

　　在Xcode 5中开启我们的Hello World教程。

　　如果你在这之前有读过其他编程的书籍，那么，你可能已经听过 “Hello World” 程序。这几乎已经成为了初学者首个程序的惯例。它是一个非常简单的程序，只是输出“Hello World”在设备的屏幕上。在这个教程中，我们会延续这个传统，用Xcode来创建一个“Hello World”程序。尽管它非常简单，但是开发“Hello World”程序还是能完成以下这些目的：

• 它能够使你更好的了解Objective C的语法，认识iOS变成语言。
• 它同样也给你简单介绍了Xcode 的编程环境。你将会学到如何创建一个Xcode项目，以及用Interface Builder创建用户界面。
• 你将会学到如何编译一个程序，生成app程序，以及在Simulator模拟器中调试。
• 最后，它会给你打一剂镇定剂，不会被编程太难而吓唬住。

  

开始编程！

    首先，打开Xcode。如果你已经通过App Store安装好了Xcode。你应该可以在面板上找到Xcode的图标。点击Xcode的图标，就可以打开软件。

 

  

    一旦被点击，Xcode显示一个欢迎的对话框。在这儿，选择“Create a new Xcode project”，新建一个项目：

 

 

    Xcode会给你显示很多类型的项目模板供选择。你的首个app，可以直接选“Empty Application”空模板，然后点击“Next”进入下一步操作。

 

    然后会跳转到另外一个界面，需要填入项目的一些必要信息。

 

　　你可以如下面的例子，简单填写以下：

• Product Name（项目名称）：Hello World - 这里是你的app名称。
• Company Identifier（公司识别码）：com.appcoda - 这里实际上是写域名的另一种方式，如果你有域名，你可以直接写自己的域名。不然的话，你可以用我的或者直接这样写“edu.self”。
• Class Prefix（类名的前缀）: HelloWorld - Xcode会自动使用这个类名前缀来命名类。在以后，你可以选择自己的前缀或者让它空着。但是在这个教程中，让我们简单的写成“Hello World”。
• Device Family（使用的设备）: iPhone - 在这个项目里，我们直接选用iPhone。
• Use Core Data（是否使用Core Data）: [不选] – 不用选这个复选框，因为在这个简单的项目中，我们没有必要使用Core Data。

 　　如果你之前使用过Xcode 4.6或者更低版本，你可能会发现“Use Automatic Reference Counting”（使用自动计数器）和“Include Unit Tests”（包含单元测试）这两个选项已经在Xcode 5中彻底移除了。他们在Xcode 5 中将不再是选择的，而是默认就有的。

　　点击“Next”继续，Xcode将会提示你要将“Hello World”项目保存到哪里。在你的Mac机器上选择一个文件夹（例如：桌面）。你可能会注意到，会有一个版本控制的选项。只要取消选择。关于这个选项的问题，我们会在留到之后的教程中来讨论。点击“Create”，然后继续。

　　你可以进行确认，Xcode自动创建的“Hello World”项目基于所有你所选择的条件。界面就像这样：

熟悉Xcode工作区

    在我们开始转向编写程序之前，让我们花费几分钟快速预览一下Xcode开发环境。在左边的面板，是项目导航栏（Project Navigator）。在这个区域，你能找到所以的项目文件。在中间部分，是编写代码的编辑区域（Editor Area）。你会在这里做所以的代码编写工作（例如：编写项目设置，类文件，用户界面设计等），取决于你选的是什么类型的文件。在编码区下面，你可以找到调试区域（Debug Area）。这块区域会在你运行程序的时候显示。最右边的区域是具体使用的区域（Utility Area）。它会显示文件属性，允许你使用快捷帮助。如果Xcode中没有显示这个部分，你可以点击工具栏最右边的风格按钮，来选择显示它。

 

    最后，介绍下工具栏（Toolbar）。它会为你提供很多的函数，试着切换下编辑按钮（Editor buttons）和视图选项（View Selections）。

 

第一次运行你的程序

    即使你没有写任何代码，你还是可以在模拟器中运行你的程序。它会让你知道你是如何在Xcode中编译和调试。简单的点击工具栏的“Run”按钮。

 

    Xcode会自动编译程序，并且在模拟器中运行它。这就是模拟器中运行时的样子：

 

    一个里面啥都没有的白色屏幕？！那是自然。因为你的程序什么都没有加，模拟器就会显示一个空白界面。如果要想终止程序，点击工具栏上的“Stop”按钮。

    Xcode默认会选择iPhone Retina（3.5英寸）屏幕作为模拟器。你可以自如的切换其它版本大小的模拟器来测试你的程序。试着选别的模拟器，然后运行你的程序。

 

回过头来编程

    好了，言归正传。让我们开始添加“Hello World”按钮到我们的程序中。在我们可以添加按钮之前，我们需要创建一个视图以及对应的Controller控制器。你可以把视图想象成一个用来盛放类似按钮这种UI控件的容器。返回项目导航区（Project Navigator）。右击HelloWorld 文件夹，选择“New File”，添加文件。

 

    在Cocoa Touch类别下，选中Objective-C 类模板，然后点击下一步。

 

    新建一个类文件并为其命名为“HelloWorldViewController”，然后选择继承的类“UIViewController”。确认下，是不是已经选中了“With XIB for user interface” 复选框。确认无误后，点击创建视图控制器文件。

 

    会出现一个文件框提示。点击创建按钮，创建类文件和XIB文件。一旦完成后，Xcode会有三个新文件产生。包括：HelloWorldViewController.h, HelloWorldViewController.m 以及 HelloWorldViewController.xib。如果你点击HelloWorldViewController.xib 文件，你会看到一个空的视图界面，像下图一样：

 

    现在让我们在视图上先添加一个Hello World 的按钮。在下面部分的Utility区域，会有一个Object library。从这里，你可以选任何你需要的UI控件，然后拖拽它到你的视图界面上。试着把按钮放到视图的中间位置。

 

    接着，让我们给这个按钮重起个名字。编辑按钮的标签，双击按钮，输入内容“Hello World”。

 

    如果你现在尝试着运行这个程序，它还是会和之前一样，什么都没有。这个原因就是我们并没有告诉这个app程序，要让它加载一个新添加的视图。因此，我们将要添加几行代码来加载HelloWorldViewController.xib文件。选中项目导航栏中的AppDelegate.m 文件，添加下面的引用内容在文件的最前面：

 

    在didFinishLaunchingWithOptions：方法中，添加下面几行代码：

 

    最终编辑完成的代码应该像这样：

 

    你刚才做的那些操作就是为了能够加载HelloWorldViewController.xib 文件。然后将其设置为根视图控制器。现在，你再运行一遍你的程序，你应该会看到这样：

 

    现在，如果你点击这个按钮，将什么反应都没有。我们还需要添加代码，来是它显示“Hello World”这个信息。

    

编写Hello World 按钮

    在项目导航栏中，选中“HelloWorldViewController.h”这个文件。代码编辑区将会显示你选中这个文件的代码。在@end之前，添加以下这句代码：

 

    你完成后，代码应该是像这样：

 

    然后，选择“HelloWorldViewController.m”，在@end部分之前，插入下面这部分代码：

 

    编辑完后，应该是下面这个样子：

 

    别去管上面那部分Objective-C代码的意思。我们会在之后的教程中给你解释。现在，我们只是来好好想想，怎么触发“showMessage”这个事件。然后如何指示iOS在界面上显示出“Hello World”这个信息。

 

给Hello World 按钮绑定事件

    但是，这里有个问题：如何告诉“Hello World”这个按钮，当有人点击了按钮的时候，触发事件？

 

    那么接下来，我们就来建立关于“Hello World”按钮和你之前刚添加的“showMessage”事件之间的连接。选择“HelloWorldViewController.xib”文件，返回Interface Builder（界面编编辑区）。点击键盘上的Control键，然后点住“Hello World”按钮，将其拖拽到“File‘s Owner”处。如图所示：

 

    松开两个按钮，然后会有一个关于“showMessage”事件的弹出框显示。选中它，这样就将点击按钮和这个“showMessage”事件绑定好了。

 

测试你的程序

    就这样，你已经完成并可以测试你的首个app程序了。只要点击“Run”按钮，如果一切正常的话，有的程序将会在模拟器中正常运行。

 

    恭喜！你已经创建完成了你的首个app程序。它虽然简单，但是我相信你对Xcode以及如何开发一个iechengx已经有了更进一步的理解了。

 

    你可以跳转到Hello World 程序的第二部分内容，学习HelloWorld 程序实际上是如何工作的。这里给你提供了下载程序的源码，以供参考。

 

    还是惯例，如果你在创建你的程序的过程中遇到困难，给我们留言。我们会发布更多的关于Xcode 5和iOS 7的教程。

[译] 三、使用Xcode 5和界面生成器创建Hello World 应用

标签：

原文地址：http://www.cnblogs.com/jianglan/p/4652665.html