01—第一个Swift程序

HelloWorld !构建你的第一个APP

你可能听过”Hello World”在其他的编程语言中。”Hello World”是编程人员创建的第一个程序，他非常简单，只需要在一个设备的屏幕上显示出”Hello Wolrd”，这在编程界是一个传统。现在让我们开始遵循传统用Xcode8来创建一个”Hello World”程序吧。

尽管它很简单，但是”Hello World”程序给我们提供了一下几个目的：

• 让你对Swift语言的语法和结构有一个了解；
• 让你对Xcode的开发环境有一个认识，你将会学会如何创建一个Xcode工程以及如何布局一个页面。即使你以前使用过Xcode，你也可以对最新的Xcode8的新特性有一个认知；
• 让你了解如何编译和运行一个APP，以及在模拟器上测试它。

1.你的第一个APP

下面我们学习如何建造你的第一个APP，如图所示

这个程序很简单，就是点击”Hello World”按钮然后弹框显示”我的第一个APP”，心动不如行动，咱们开始吧。

第一，打开Xcode，这时候，Xcode将会显示在你的面前，在这里，选择”Create a new Xcode project”选项：

然后，Xcode将会显示很多模板选项，通常我们都会选择“Single View Application”：

接下来，我们会进入一个页面，在这里我们需要填写app的一些信息：

下面给出这些选项的信息：

名字： 属性 Product Names: 这里填写你的项目名称 Team: 这里选择开发者信息 Organization Name: 填写组织名称，一般格式为com.名称 Organization Identifier: 这里填写组织的标识符 Bundle Identifier: 显示app的唯一标识符 Language: 选择你的开发语言 Devices: 选择你的app适用于设备 Use Core Data: 是否使用数据库CoreData Include Unit Tests: 单元测试 Include UI Tests: UI测试

然后点击”Next”，选择项目存储路径，点击”Create”后完成项目的创建：

2.了解Xcode工作区

在我们开始写代码之前，我们需要了解一下Xcode工作区环境。我们发现，工作区大致被分为三块，左边那块展示的是文件去，用于显示所有的文件和文件夹，中间那块展示的则是代码编辑区，在这里你可以编辑代码、调试，右边展示的则是功能区，在这里你可以使用许多Xcode的功能。

根据所选文件的类型，Xcode在代码编辑区显示不同的界面。比如，当我们选择ViewController.swift文件时，代码编辑区会显示：

但是，当我们选择Main.storyboard时，编辑区则会显示一块界面：

3.运行你的APP

在运行APP之前，我们还需要认识一下Xcode的顶部功能栏。
在左边区域：

第一个按钮时运行，点击以后会开始运行我们的APP，第二个按钮则是停止运行，第三个是我们APP的名称，第四个是模拟器，在这里我们可以选择所有的iPhone设备以及iPad设备。

而在右边区域：

我们先忽略左边那一排按钮，从右边那一排按钮说起，第一个是显示项目导航栏，即上面提到的左边栏，第二个是显示调试栏，一般我们调试APP的信息都显示在调试栏，最右边则显示的是上面提到的功能栏。

认识完按钮以后，我们点击”RUN”来运行我们的项目：

运行完以后，我们发现模拟器只显示了一块白屏幕，别着急，我们什么都没写，所以它啥也不会显示了：

提示，如果你发现你的模拟器太大或者太小，你可以按command+数字即可调整大小，其中1最大，5最小

4.快速浏览界面生成器

现在我们队Xcode有了一个基本的认识了，现在让我们开始设计我们的第一个APP吧。选择Main.storyboard，Xcode将会显示一个可视化的storyboard(故事版)的编辑器，也就是所谓的Interface Builder(界面生成器)，Interface Builder给我们提供了可视化界面来进行UI的编程。在这里，不仅可以创建页面，还可以实现无代码的页面之间的跳转。接下来我们就了解一下Interface Builder的结构吧：

在右下角，有一块区域叫做Object Library，我们所有的UI控件都可以在这里找到。当我们点击Show Object Library按钮时该界面会显示出来，当我们点击Show/Hide document outline时会显示两种不同的Object Library界面。

当我们选择Single View Application场景时，Xcode默认在storyboard生成了一个View Controller Scene，我们在代码编辑区中可以看见这个View Controller。那么什么是View Controller呢？视图控制器是你用来设计一个APP的页面的地方，换句话说，每个APP的界面都是由视图控制器所展现的。而界面生成器则允许你添加多个视图控制器在故事版里面并且让他们之间相互联系起来。

什么是Scene(场景)
在故事版中，一个Scene所展现出来的就是一个控制器和它的视图。在iOS开发中，视图是构建APP最基本的单元。每个视图都有自己的功能，比如你在故事版里面发现的视图就是用来装其他视图比如按钮、标签等视图的集装箱。
而视图控制器就是用来管理与它有关联的视图以及子视图的工具。

在下面，Document Outline view就是显示当前所有的场景的区域。在其右边是Configuration Bar，点击Configuration Bar后会显示：

这个是Xcode8引入的新特性，是为了方便开发者能够快速预览在不同设备不同方向的界面显示。你可以点击加号或者减号来放大或者缩小页面。

5.设计界面

首先，我们需要从Object Library中选择一个按钮。叫做UIButton，选择它并且一直按住触控板，拖到我们的View中去，当你把UIButton拖到正中心时会显示两条蓝色虚线，这时候停止拖动即可：

然后选中UIButton，双击他，这时候你就可以输入自定义文字了，我们输辱Hello World：

编辑完以后，你可能需要居中一下。完成以上步骤以后，我们来运行一下这个APP，这时候模拟器会显示：

按钮已经可以显示了，当然如果你单击的话是没有任何反应的，接下来，我们来增加一个弹窗。

选择ViewController.swift，接下来我们需要在代码编辑区里面编辑代码了。因为我们选择了Single View Application场景，所以Xcode默认在ViewController.swift文件里生成了一个ViewController类，并将ViewController.swift与故事版里面的ViewController关联起来。

输入以下代码：

    @IBAction func showMessage() {        let alertController = UIAlertController(title: "我的第一个APP", message: "Hello World", preferredStyle: .alert)        alertController.addAction(UIAlertAction(title: "OK", style: .default, handler: nil))        present(alertController, animated: true, completion: nil)    }

输入完成后，是这个样子：

上面的代码就是在ViewController类里面添加了一个叫做showMessage方法，当这个方法被调用时，就会弹窗显示“Hello World”的信息，当然，至于为什么这样写，我们下一届在讨论。

6.连接页面和代码

现在，我们方法也写了，页面也做了，那么问题来了，如何把二者关联起来了？

现在，让我们选择Main.storyboard，按住control按钮，然后单击Hello World的按钮，并且将它拖拽到View Controller图标上面，同时松开，这时候将会显示一排菜单，我们选择showMessage：

7.测试APP

点击运行或者同时按command+R来运行你的APP：

点击Hello World按钮：

现在我们的第一个APP已经完成了，当然，还记得我们前面提到的功能区吗？回到故事版，选择Main.storyboard，然后点击Hello World按钮，在右边会显示：

选择Text Color，将颜色选为white color，选择Background，选择颜色为红色：

重新运行，猜猜会发现什么？