使用 Xcode 5创建 Hello World App

标签: xcode hello world | 发表时间:2014-03-13 00:33 | 作者:MicLee
出处:http://www.iteye.com

当xcode 5发布后,相比之前的版本变化很大,大家可能会有一些疑问:

  • 我跟随教程学习但是发现程序在 Xcode 5 中不再受支持.
  • Interface Builder在哪儿?
  • 我如何去创建一个XIB 文件?

这样的例子不胜枚举. Xcode 5 推荐使用Storyboard 而不是 Interface Builder. 当你使用Single View template创建一个新的 Xcode 工程时, 它默认使用 Storyboard。 是没有XIB文件生成的.

HelloWorld App Featured

Enter the Hello World tutorial for Xcode 5.

作为一个初学者,按照惯例。我们当然以“Hello World”开始。本篇教程的目标:

  • 让你对IOS开发语言Objective-C的语法和结构有更清晰的认识。
  • 对xcode开发环境的基本介绍。你将学习如果创建一个xcode工程和利用内置的用户界面生成器创建一个用户界面。
  • 你将学习如何编译、构建一个app并在模拟器中测试它。
  • 最后,它会让你觉得编程并不困难。  :-)

开始你的第一个应用

在开始编码部分之前,让我们首先看看我们将要实现的“Hello World” app是什么样子的。 最终效果图如下:

HelloWorld App Deliverable

它非常的简单并且只有一个 “Hello World” 按钮。 当我们点击的时候,这个app将提示一条信息。 就是这样。 没有什么复杂的,但它可以帮助你开始你的iOS编程之旅。

开始编程!

首先,启动 Xcode。如果你已经从Mac App 商店安装了xode,你应该能在LaunchPad里面找到 Xcode。 只需点击Xcode的图标来启动它。

Xcode Launchpad

启动之后, Xcode 会显示一个欢迎对话框. 从此处选择 “Create a new Xcode project” 开始一个新工程:

Xcode 5 Welcome Dialog

Xcode 5 – Welcome Dialog

Xcode 有多种工程模版供你选择。在你的第一个app中,让我们选择 “Empty Application” 然后点击 “Next”.

Xcode Empty Application Template

Select Empty Application

来到下一步,需要填写一些必要的选项。

Hello World Project Options

Hello World Project Options

你可简单地按照下面填写:

  • Product Name:  HelloWorld – 你的app的名称。
  • Company Identifier:  com.appcoda –它实际上是域名的倒写。如果你有一个域名,你可以使用自己的域名。比如我的就可以写成com.blogchen。 如果没有,你能使用我的或者直接填写“edu.self”。
  • Class Prefix:  HelloWorld – Xcode自动生成的类将使用这个前缀名。今后,你能选择你自己的前缀或者干脆留空。 但是在这个教程里面,为了简单,我们使用“HelloWorld”。
  • Device Family:  iPhone – 在这个工程中我们选择 “iPhone” 。
  • Use Core Data: [unchecked] –不要选中这个选择. 你不需要核心数据在这个简单的工程中。
如果你已经使用过 Xcode 4.6 或者更低的版本,你可能会发现在Xcode 5中没有 “Use Automatic Reference Counting”和 “Include Unit Tests”选项。在Xcode 5中它们不是默认值。
 
点击 “Next”继续. Xcode会询问你是否保存 “Hello World” 工程。在你的Mac中选择任何文件夹,保存的地方由你自己根据习惯来定 (e.g. Desktop) 。
 
你可能会注意到有一个版本控制的选项。 不要选中它,我们将在以后的教程中讨论它.。点击“Create” 继续。
 

Hello World File Dialog

Pick a folder to save your project

当你确认后, Xcode 将基于所有你提供的选项自动创建 “Hello World”工程。截图看起来如下所示:

Hello World Empty Xcode Project

Empty HelloWorld Project

熟悉 Xcode 工作区

在我们继续编写app之前,让我们花几分钟快速看一下Xcode的工作区环境。左边是工程导航面板。 在这里你能找到你所有的文件。中间部分是编辑区域。 在这个区域根据你选择的文件类型你能编辑所有的东西(例如编辑项目属性, 类文件, 用户界面, etc) 。编辑区域下面,是debug 区域。当你的app运行时,此区域会有内容显示。 最右边的是工具区面板。 这个区域显示文件属性并允许你访问快速帮助指南。 如果 Xcode没有显示这个区域, 你能在工具栏中选择最右边的视图按钮来开启。

Xcode 5 Workspace

最后,此处是工具栏。它为你提供了多种功能去运行你的app、 切换编辑器和工作区视图。

Xcode 5 Toolbar

首次运行你的App

即使你还没有编写任何代码,你也能在模拟器中运行你的app。 这能给你一个概念–如何在xcode中构建和测试一个app。 简单的点击 “Run” 按在工具栏中。

Xcode Run Button

Run button in Xcode 5

Xcode 自动编译app并在模拟器中运行它。 下面是模拟器中运行的效果:

Xcode 5 iPhone Simulator

iPhone Simulator in Xcode 5

白屏而且没有任何东西在里面?! 这是正常的。 你的app还没有完成,模拟器只是显示一个空白界面。 要终止这个app,在工具栏点击 “Stop” 按钮即可.

Xcode 默认设置使用iPhone Retina (3.5-inch) 作为模拟器。 你能自由的选择其他模拟器去测试你的app。 试着去选择另外一个模拟器运行app看看。

Xcode Simulator Selection

返回代码

好了,让我们继续把Hello World按钮加入到app中。在放入按钮之前, 我们首先需要创建一个视图和它对应的控制器。 你能想象一下,在一个容器里面包含其他的UI项目,比如按钮。

返回到工程导航面板。在HelloWorld文件上右键单击然后选择 “New File”。

Xcode 5 Add New File

Adding a new file in Project Navigator

在 Cocoa Touch 类别, 选择 Objective-C class模版然后点击”Next”.

Xcode 5 Create New Class

为新类命名为 HelloWorldViewController 并且继承自 UIViewController。 确保你选择了 “With XIB for user interface” 选项。通过选择这个选项, Xcode 会为这个视图控制器自动生成用户界面。

HelloWorldViewController Class with XIB

将有一个对话框提示你,点击完成后, Xcode 自动生成三个文件,包含HelloWorldViewController.h, HelloWorldViewController.m 和HelloWorldViewController.xib。如果你选HelloWorldViewController.xib 文件,你将看到一个类似下面的空视图:

HelloWorldViewController XIB

HelloWorld Interface Builder (.xib)

现在我们需要加入Hello按钮到视图中。在工具区域的下方部分,切换到 Object library。如图。 从这里你能选择所有的 UI Controls,可以拖动它到视图区域。 在这个Hello World app 中,让我们选择 button 并且拖动它到视图中。尝试放置这个按钮到视图的中间。

Interface Builder Drag Button

Drag button into the View

接下来,让我们重命名这个button。想要编辑这个button的名字,只需要双击它然后输入“Hello World”。

Interface Builder Edit Label

如果你现在试着去运行app,你会发现它仍然是一个空白屏幕。 原因是我们还没有告诉这个app去加载这个新视图。我们需要加入几行代码去加载 HelloWorldViewController.xib。在工程导航区域选择AppDelegate.m。在文件的开使部分加入下面的代码:

1
#import "HelloWorldViewController.h"

在 didFinishLaunchingWithOptions: 方法中, 在“self.window.backgroundColor = [UIColor whiteColor]“这行后面加入下面的代码.

1
2
HelloWorldViewController *viewController = [[HelloWorldViewController alloc] initWithNibName: @"HelloWorldViewController"  bundle: nil ];
self .window.rootViewController = viewController;

你的代码最终看起来应该像下面这样:

HelloWorld AppDelegate Code

你刚才做的就是加载HelloWorldViewController.xib,并将其设置为根视图控制器。 现在再次试着运行app,你应该能看到下面这样:

HelloWorld App with Button

现在,如果你点击button, 它不会发生任何事情。 我们需要加入代码去显示“Hello, World” 信息。

编写HelloWorld按钮

在工程导航区,选择 “HelloWorldViewController.h”。编辑区域将显示选中文件的源代码。在“@end” 这行之前加入下面的代码:

1
-( IBAction )showMessage;

你完成后的代码应该像下面一样:

1
2
3
4
#import UIKit/UIKit.h
@interface  HelloWorldViewController : UIViewController
-( IBAction )showMessage;
@end

然后,选择 “HelloWorldViewController.m” 并且在 “@end” 之前插入下面的代码:

1
2
3
4
5
6
- ( IBAction )showMessage
{
UIAlertView *helloWorldAlert = [[UIAlertView alloc]
initWithTitle: @"My First App"  message: @"Hello, World!"  delegate: nil  cancelButtonTitle: @"OK"  otherButtonTitles: nil ]; // Display the Hello World Message
[helloWorldAlert show];
}

编辑完成之后,你的代码看起来像下面这样:

Source Code of HelloWorldViewController After Editing

Source Code of HelloWorldViewController After Editing

先不必理解上面的 Objective-C 代码的意思。在以后的文章中我会为你解释。 现在,想象“showMessage” 作为一个行为 并且这个行为命令 iOS 在屏幕上去显示一个 “Hello World” 信息。

连接Hello World按钮和行为

但这里还有一个问题:

当有人点击“Hello World” button时,它怎么才能知道这个行为并且去调用它呢?

接下来,你需要在 “Hello World” button和 “showMessage” action 之间建立一个连接。选择 “HelloWorldViewController.xib”文件回到用户界面。按住键盘上的  Control 键, 点击 “Hello World” button 拖动到 “File’s Owner”.如下图所示:

Connect HelloWorld Button

释放两个按钮后会弹出一个悬浮框显示 “showMessage” 行为。 选中它就能在button 和“showMessage” 之间建立起连接。

ShowMessage Send Events

Send Events Selection

测试你的 App

就是这样! 你现在已经准备测试你的第一个app了。 点击 “Run” button。如果一切正确,你的app在模拟器中如同下面这样。

HelloWorld  App

完美!你已经编译出你的第一个iPhone app了。这是一个简单的app,然而我认为关于Xcode和怎么开发一个app,你已经有一个好的主意了。

转载自:http://www.blogchen.com/archives/581.html



已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [xcode hello world] 推荐:

使用 Xcode 5创建 Hello World App

- - 移动开发 - ITeye博客
当xcode 5发布后,相比之前的版本变化很大,大家可能会有一些疑问:. 我跟随教程学习但是发现程序在 Xcode 5 中不再受支持.. Interface Builder在哪儿?. 我如何去创建一个XIB 文件?. Xcode 5 推荐使用Storyboard 而不是 Interface Builder.

"Hello World!" 玩跨界

- cpy - 果壳网 guokr.com - 果壳网
DIYer:约瑟 制作时间:一星期 制作难度:★★★☆☆ GEEK指数:★★★☆☆. 我们家宝贝妮子大寿,自然我就要整一个独一无二滴东西,恩,于是我邪恶的计划诞生了~把废弃的赛扬CPU使用浓硝酸腐蚀法做成一个手机挂坠~. 初步打算是使用纸片画上自己喜欢的图像,然后剪裁后黏贴于CPU上,使用喷漆喷涂,然后解下纸片,生成一个镂空的地方.

Java和MongoDB之Hello World

- - BlogJava-首页技术区
新建Java Project,并把mongo-java-driver驱动加入到项目bulid path中,如果你使用的是maven增加依赖. 2.连接上MongoDB. //>2.10版本. 如果需要验证,需要输入用户名和密码. 3.MongoDB数据库 得到MongoDB中的数据库,如果数据库名不存在,MongoDB会自动创建.

IOS代码实现Hello World

- - CSDN博客推荐文章
前面写的IOS笔记一直都是用Xib文件实现的小Demo开发,但是问了好几个现在正从事IOS开发的朋友,在实际开发,并不是所有的项目都会用Xib来实现的,因为IOS以前的版本不能正常运行,因为还在学习阶段,也没有在真机上测试,所以没法验证. 但还是决定要用代码来实现Demo,也可以重新巩固一下先前学习的内容.

【Thrift二】Thrift版的Hello World

- - 开源软件 - ITeye博客
本篇,不考虑细节问题和为什么,先照葫芦画瓢写一个Thrift版本的Hello World,了解Thrift RPC服务开发的基本流程. 在Intellij中创建一个Maven模块,加入对Thrift的依赖,同时还要加上slf4j依赖,如果不加slf4j依赖,在后面启动Thrift Server时会报错.

用JavaScript+html来开发win8 app—Hello World

- - 博客园_首页
在win8+vs2012环境下面,我们除了能用C#,C++来开发win8的app,还可以用js+html直接开发win8的app. 2.修改default.html. 在body里面用标准的html input控件添加了一个button. 新建完项目VS会自动引用default.js. 我们可以把绑定事件的js代码放到这里.

Ruby On Rails 4 hello world,Ruby On Rails上手

- - CSDN博客Web前端推荐文章
有机会再试一试Rails了,只是原来接触的是2,现在已然变成了4,似乎现在的安装比原来会快些. 似乎这就是当前的最新版本. 似乎这就是诸如Django、Rails这类对于轻量级网站的数据库要求. 其他可以看情况安装,如openSUSE. 可以直接用rails生成. 这样的话打开  http://localhost:3000 就可以看到,Rails的欢迎界面Welcome aboard,有点类似于Django-CMS的小马哥~~.

我有一个Hello World的C++程序编译不过

- Jo - 酷壳 - CoolShell.cn
在StackOverflow上有这样一个贴子,楼主说,我有下面这样的一个C++程序,为什么编译不通过啊. 其让我想起了以前的这两个帖子《编程真难啊》和《给我一个序列号》. hello world 程序. 楼主还给出了相关的编译出错的信息(相信你一看就明白问题在哪里了,你应该还会发出一声“靠”. 先是用Visual C++ 2010编译.

使用Mule Studio开发ESB应用 - Hello World

- - CSDN博客推荐文章
本文介绍如何使用Mule Studio开发一个简单的"Hello World"ESB应用. 第1步 - 下载和安装Mule Studio. 从 www.mulesoft.org下载Mule ESB Community Edition的发布包. 无需安装, 解压至本地硬盘即可使用. 第2步 - 启动Mule Studio.

hello,chrome,我是Firefox。。。

- - 前端观察
今天,Firefox发表了一段视频, 宣告Firefox和Chrome之间的视频通信成功~~. 在Chrome支持WebRTC之后,Firefox终于在Nightly版本中也开始原生支持了. 虽然现在只有PC支持,但是可以遇见不久之后,手机端也会开始支持了,而Firefox引入WebRTC,应该主要还是为了自己的Firefox OS.