IOS Apps 开发(Swift)（3）——Build a Basic UI（1）

前言：网上一直没有找到用Swift开发IOS的好的教程，所以找了官网的文档翻译一下算了。如有错误欢迎指正。博主首发CSDN，mcf171专栏。

博客链接：mcf171的博客

原文链接：Build a Basic UI

——————————————————————————————

在这个课程中，我们将熟悉Xcode，这个工具是用来写apps的，同时我们也会熟悉在Xcode中的程序架构，通过这次课程，我们将开始制作一个FoodTrackerapp的简单的用户接口(UI)并在模拟器中进行展示。当我们完成程序之后，应该看起来像下图：

学习目标

在本次课程中，你可以了解到：

• 在Xcode中创建项目
• 了解Xcode 程序模板创建的关键文件功能
• 在一个工程中打开和切换文件
• 在模拟器中运行一个app
• 在一个storyboard 中增加、移动UI和调整UI的尺寸。
• 使用属性查看器编辑 storyboard 中的 UI元素属性
• 使用大纲视图浏览和重新排列UI元素
• 使用预览助手编辑器进行一个 storyboard UI的预览
• 使用 Auto Layout 使得UI的布局自适应用户的设备尺寸。

创建一个新的程序

Xcode包括一些内置的开发iOS app通用的模板，比如说游戏、基于tab的导航app、基于table view的app。大多数这些模板都有预配置的接口和源码文件。在本次课程中，我们从最基础的模板开始：Single View Application

创建一个新的程序

1、打开Xcode。

Xcode的欢迎界面如图所示

如果不是欢迎界面而是一个程序窗口，那么也不用担心，这是因为你可能预先在Xcode中创建或者打开一个工程。可以通过使用在下一步中的菜单来创建工程。

2、在欢迎界面点击 Create a new Xcode project” (or choose File > New > Project).接下来Xcode将打开一个窗口，从而我们可以选择一个模板

3、在左侧点击iOS单元，选择应用程序。

4、在主窗口点击Single View Application 然后点击下一步。

5、当对话框出现时，使用下面的只来命名app。

• Product Name: FoodTracker
  

Xcode使用你输入的产品名称来命名工程名和app名字

• Organization Name：组织的名字或者你的名字，可以留空
• Organization Identifier：组织的标识。如有没有使用com.example
• Bundle Identifier：这个值基于产品名和组织标识自动生成
• Language:Swift
• Devices:Universal

一个一般的app就是既可以在iPhone也可以在iPad上运行的app

• Use Core Data:不选
• Include Unit Tests:选
• Include UI Tests：不选

6、点击下一步

7、再出现的对话框中选择一个目录保存项目然后点击创建。

Xcode将在workspace window 打开新建的工程

在workspace window 中，可能能注意一个黄色的三角形，说“No code signing identities found.”这个警告意味着你没有设置Xcode为iOS开发。但是不需要担心，完成本次课程不需要完成这个。

熟悉XCode

Xcode包括我们需要创建一个app的所有东西。它不仅仅组织了创建一个app所需要的所有文件，它同时提供的代码和接口元素的编辑器，允许我们编译和允许我们的app，还包括强有力的调试工具。

我们需要花一些时间来熟悉Xcode 的workspace的主要区域，因为在之后的整个课程中，我们会使用下述图中标注区域的功能。不用太过担心，每一块区域你可以在需要的时候再进行详细的了解。

运行模拟器

因为我们的工程是基于Xcode模板，因此基础的app环境已经自动安装好了。尽管我们还没有写任何代码和配置，我们也可以编译和运行这个Single View Application 模板。

为了编译和运行app，我们使用Xcode包括的模拟器。模拟器让我们我们对app在真实设备上看起来怎么样，运行效果怎么样有一个感性的认知。

模拟器也能模拟大量不同的硬件设备——不同屏幕尺寸的iPad、iPhone等等。所以我们能在所有设备上模拟我们app的效果。在这个课程中，我们使用iPhone 6的选项。

在模拟器上运行app

1、在顶部的Xcode的Scheme 工具栏选择iPhone 6.

 通过 Scheme菜单我们可以选择模拟的设备。

2、点击左上的Run 按钮

同样我们也可以通过Product > Run (or press Command-R)

如果你是第一次运行一个app，那么Xcode将询问是否在你的Mac上开启开发者模式。开发者模式允许Xcode在不用请求你输入密码的情况下访问一些调试的功能。

在本课程中假设开发者模式是可用的。

3、观察Xcode的工具栏知道编译完成

Xcode将在 activity viewer窗口显示编译程序的消息，这个在工具栏的中间。

当Xcode完成了工程的编译，模拟器自动启动，第一次运行可能会花一些时间启动。

模拟器将用iPhone模式打开，因为我们之前指定了。在模拟的iPhone屏幕，模拟器会加载你的app。在app 完成加载之前，我们能检点的看见我们的app名称FoodTracker

然后我们能看到下面的图

从上图我们可以看到Single View Application模板并没有做太多，仅仅展示了一个白屏。其他的模板会做一些更复杂的行为，在制作你自己的app之前，区里阿杰如果使用一个模板是非常重要的。在模拟器上没有做修改就运行你的app是一个开好的方式来进行开发和理解。

我们可以选择Simulator > Quit Simulator 来退出模拟器。

源码

Single View Application模板创建了一些源码文件。首先让我们看看AppDelegate.swift文件。

查看AppDelegate.swift源文件

1、确定在导航区域的工程导航是打开的。

项目导航展示了所有我们工程用到的文件。如果我们项目导航是关闭的，点击最左侧的按钮（也可以选择 View > Navigators > Show Project Navigator.）

2、如果必要的话，通过点击三角形打开在工程导航中的FoodTracker文件夹。

3、选择AppDelegate.swift

Xcode 在主窗口的编辑区域打开这个源文件。

可选的方案是双击AppDelegate.swift文件从而在一个单独的窗口打开。

AppDelegate 源文件

文件主要有两部分功能：

• 它创建了一个app的进入点(entry point)和一个运行循环(run loop)，运行循环用来分发输入事件给app。这个工作被UIApplicationMain 属性完成。

UIApplicationMain创建了一个应用程序对象，这个对象是用来管理app的生命周期，并且是一个app的代理对象，将在下面进一步描述。

• 它定义了AppDelegate 类，这个是app代理对象的蓝图。app代理对象创建了展现我们app内容的窗口，提供了一个地方来响应app的状态转换。这个AppDelegate类就是我们写我们的用户级代码的地方。

AppDelegate类包含了一个单一的属性window。通过这个属性，app代理可以持续跟踪我们app被展现的内容的窗口。这个窗口是一个optional类型，也就意味着在某些使用没有值(nil)

AppDelegate类也包含了一些重要方法的模板实现。这些预定义的方法允许应用程序对象跟app代理进行交流。

func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool
func applicationWillResignActive(application: UIApplication)
func applicationDidEnterBackground(application: UIApplication)
func applicationWillEnterForeground(application: UIApplication)
func applicationDidBecomeActive(application: UIApplication)
func applicationWillTerminate(application: UIApplication)

在一个app状态转换时，比如app加载、过度到背景、app终结。这个应用程序对象调用在app代理中相应的方法，从而能够在合适的时候有机会进行回应。我们不需要做任何特别的事情就能在正确的时候去调用这些方法——应用程序对象将帮我们处理这部分工作。

这些自动实现的方法都有一个默认的行为。富有我们没有实现这些模板方法或者从我们的AppDelegate类中删掉，那么无论什么时候我们得到的相应都是默认的行为。使用这些方法模板来从而能在这些方法调用的使用执行我们自定义的增加的代码。在这个课程中，我们不需要使用任何自定义的app代理代码，我们不用对AppDelegate.swift文件做任何改变。

View Controller 源文件

在Single View Application模板中海油另外一个源码文件:ViewController.swift。

这个文件定义了一个UIViewController的用户子类，名字为ViewController。这个类简单的继承了UIViewController定义的所有行为。为了重写或者延生这些行为，我们需要重写在UIViewController定义的方法，比如viewDidLoad()方法和didReceiveMemoryWarning方法。或者实现我们自己的自定义方法。

尽管模板中有didReceivememoryWaring方法，但是我们不需要在这个课程中实现这个方法，所以不用管它或者删掉它。

到目前为止，你的ViewController.swift代码应该看起来是这样的

import UIKit
 
class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }
    
}