建立一个基本的UI

本章让你熟悉Xcode来写应用程序。你会熟悉Xcode项目的结构，并学习如何在基本项目组件中导航。通过整个课程中，您将开始为FoodTracker应用程序制作一个简单的用户界面（UI），并在模拟器查看它。当你完成时，你的应用程序将是这个样子：

学习目标

在课程结束时，你将能够：

1.在Xcode中创建一个项目
2.识别一个Xcode项目模板
3.打开和切换项目中的文件
4.运行模拟器的应用程序
5.在storyboard中添加，移动和调整UI元素
6.在storyboard中使用Attributes inspector编辑UI元素的属性
7.使用outline视图查看并重新排列UI元素
8.使用Preview assistant 编辑器来预览storyboard UI
9.使用Auto Layout来自动适应用户的设备大小

创建一个新项目

Xocde包括一些内置的应用程序模版，为了方便开发常见的IOS应用程序类型，如游戏，基于标签导航的应用程序，基于表格视图的应用程序。大部分模版已经预配置了界面和源代码，本章我们使用的模版为Single View Application

打开Xcode：

选择Create a new Xcode project：

选择 Single View Application，然后点击Next：

输入Product Name：FoodTracker

Organization Name：Apple Inc.

Organization Identifier:com.example

Bundle Identifier:自动生成

Language:Swift

Devices:Universal(这里表示同时运行在ipad和iPhone上的普遍应用程序)

Use Core Data:不选

Include Unit Tests: 这两个在Xcode6.3中没有，不用考虑（出现于Xcode7）

Include UI Tests: 这两个在Xcode6.3中没有，不用考虑（出现于Xcode7）

输入完成后我们点击Next,会看到工作区出现在Xcode中：

在工作区窗口，你可能会看到黄色三角警告，写着No code signing identities found。表示你没有为Xcode设置开发者证书，不用担心。它不会影响我们的本章教程

熟悉Xcode

Xcode中包含你需要创建一个应用程序的一切。它不仅包含组织合作开发工具，它提供了代码编辑器和界面元素，使您能够构建并运行你的应用程序，并包含一个强大的集成调试器。

花一些时间来熟悉的Xcode工作区的主要部分。你需要熟悉窗口的工作区域。

运行模拟器

因为根据你的项目上的Xcode的模板，基本的应用程序环境已自动设置。即使你不写任何代码，你可以编译和执行Single View Application模版。

要编译并运行你的应用程序，可以使用Xcode内置的模拟器，和Android一样装好ADT后都是内置模拟器。模拟器让你的应用程序运行在一个模拟的设备上，你可以查看它的行为，是不是和你开发的思路一致。

模拟器可以模拟多个不同类型硬件的iPad和iPhone，这样你就可以在不同的设备中模拟你正在开发的应用程序。在本章中，我们使用iPhone6的选项。

运行模拟器很简单，点击Scheme ，选中iPhone6，然后点击执行按钮即可，或者直接按Command+R

如果你是第一次运行，Xcode会弹出一个提示，询问你是否以开发者模式运行，我们选择允许，因为不用每次我们输密码那么麻烦

然后模拟器会自动启动。第一次这可能需要一些时间来启动。

当你看到iPhone模拟器模式打开后。模拟器会启动您的应用程序。在应用程序启动完成后，你会在FoodTracker启动画面短暂的看到你应用程序的名称。

稍等一会后会出现

眼下，Single View Application模板，并没有做太多，它只是显示一个白色的屏幕。其他模板有更复杂的行为。重要的是你扩展它应用程序之前要了解模板的用途。如果你觉得模拟器太大，你可以选中模拟器后，在上面的菜单栏中选择window->Scale 调整比例。

选择模拟器后选择Simulator > Quit Simulator来退出模拟器（或按Command-Q）。

查看源代码

Single View Application模板，还附带了一些源代码文件。首先，让我们来看看在AppDelegate.swift文件。

我们可以单击，或双击（单独打开窗口）AppDelegate.swift

AppDelegate.swift源文件有两个主要功能：

1.它创建程序的切入点，并处理传递事件循环。这个工作是由UIApplicationMain属性来做的（@UIApplicationMain），它在类的顶部就声明了。UIApplicationMain创建一个应用程序对象，

该对象是负责管理应用程序的生命周期同时是一个应用程序的代理对象。

2.它定义了AppDelegate类，用于应用程序委托对象。应用程序委托创建了窗口，应用程序的内容被绘制到窗口，并提供了一个地方来响应状态的转换。该AppDelegate类是你编写自定义应用程序的地方。

在AppDelegate类包含一个属性：window。通过这个属性的应用程序委托跟踪所有的应用程序中的内容的绘制窗口。window属性是可选的，这意味着它可以为nil。

var window: UIWindow?

该AppDelegate类中还包含了一些重要的方法的实现。这些预定义的方法允许应用程序对象和代理对象交谈。其实这类似于Android的Application，类似生命周期方法的重载

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)

一个应用程序的状态过渡期间，例如，应用程序启动，过渡到背景，应用程序终止，application对象会调用相应的方法，给它一个条件，作出适当的反应。你不需要做任何特殊的处理，这是application以理工作的一部分。

所有这些自动执行的方法都有一个默认的行为。如果AppDelegate类中将移除这个模板或删除它，你就会得到该方法被调用的默认行为。你可以使用这些方法模板添加自定义代码。在本章中，你将不会被使用的自定义app委托代码，所

以您不必进行任何更改。Single View Application模版中还有一个源代码文件，叫做ViewController.swift，现在让我们进去看看这个文件:

这个文件定义了一个UIViewController的子类，名叫ViewController。现在这个类简单的继承了UIViewController的所有行为。为了重写或扩展行为，你需要使用override关键字，或者你可以自定义自己的方法。

通过模版我们看到了didReceiveMemoryWarning()方法，本章中不需要实现这个方法，所以我们可以删除它。

打开你的Storyboard

你已经为你的APP使用storyboard开始工作。一个storyboard是一个可视化的界面的表示，显示屏幕内容并且转化它们。

你使用storyboard来布局你的APP。你能直接看见你构建的项目并且即使反馈，修改你的ui并立即看到效果。打开你的

storyboard,如下图：

此时，在你的应用程序中的storyboard包含一个场景，这代表了应用程序中的一个内容的屏幕。场景上指向画布的左侧箭头上是storyboard的切入点，这意味着应用程序启动时这一场景先加载。现在，你在画布上看到的一场景包含一个

视图控制器管理的单一视图，它由a single view。下面您将了解更多关于视图控制器。当你的APP运行在iPhone6模拟器上时，你在模拟器中看到的视图就是Xcode storyboard中屏幕上的视图。但当你看到画布上的场景时，你要注意

它没有确切iPhone6屏幕尺寸。这是因为画布上的场景是一个可以应用于任何方向的任何设备的接口的通用表示形式。您可以使用这个来表示创建一个自适应接口，这个接口会自动调整，以便在，当前设备和方向上的内容看起来不错。

构建基本UI

是时候构建一个基本的界面了。你将通过屏幕上的UI来工作，让你添加一个新的菜谱到你的FoodTracker中。Xcode提供一个对象库，你能直接添加到storyboard文件中。其中一些元素会出现在UI中，如一个按钮或文本域，但像视图控制器和手势识别这些定义在你APP

中的行为就不会出现在屏幕上。出现在UI中的元素被称为Views，学过android的，肯定对View特别熟悉了，这里和android类似，用于显示内容给用户。它们是构建你的UI并提供内容清晰，高雅，实用方法的基石。Views具有各种有用的内置行为，包括在屏幕上显示自

己和对用户输入做出反映。所有IOS中的View对象是一个UIView类型或它的子类。许多UIView的子类在行为和外观上是高度专门化的。首先添加一个文本域（UITextField）到场景中，它是一个UIView的子类。文本域可以让用户输入

一个单行文本，你将用于菜谱的名称，步骤如下：

1.打开Object library。

对象库出现在Xcode实用区域底部的右边。如果你没有看见对象库，可以点击library selector按钮选中。（你也可以选择View>Utilities>Show Object Library）

这个列表显示每一个对象的名字，描述，视觉展示。

2.在Object library中，输入text field能过滤大量的对象库，并快速找到你需要的Text Field对象。

3.从Object library中拖动一个Text Field对象到你的场景中额打开Object library。

如果必要，你可以选择ditor > Canvas > Zoom来缩放

4.拖动文本框，以便将文本放置在场景的前半部分，并与场景中的左边缘对齐。如图所示：

蓝色的布局引导帮助您放置文本字段。布局引导仅当你拖动或调整对象的旁边时可见，当你放开文本框的时候，他们会消失。

5.如果必要，可以通过（resize handles）点击文本框来调整大小（resize handles：在选定的用户界面元素的边框上出现的小的白色方块，可以在画布上更改其大小。）

你可以通过拖动它的resize handles来调整UI元素的大小，这时在元素的边界上出现的小的白色方块。通过选中它来显示这个元素的resize handles 。在这种情况下，文本框应该已经被选中，因为你只是停止拖动，没有其他操作。如果

您的文本框字段看起来像下面这样，你就可以调整它的大小，如果没有，你可以在画布上选中它。

6.调整文本框的左、右边缘的大小，直到你看到三个垂直的布局引导：左边缘对齐，水平中心对齐，右边对齐。

虽然你在你的场景中有文本框，但没有提示，用户不知道在该区域输入什么指令。

7.接下来使用文本框的占位符（placeholder）来指定提示用户输入新菜谱的名字。

选中文本框的情况下，打开实用工具的Attributes inspector。你点击从左边数起的第四个按钮。它可以让你编辑storyboard中的对象属性。

找到Placeholder然后键入Enter meal name（输入菜谱名），按下键盘上的回车（return）就可以看到效果了，如下图所示：

当您编辑文本字段的属性时，您还可以编辑用户选择文本字段时显示的系统键盘的属性。找到Return Key点击后下拉，选择Done。这种改变会让键盘上以前的Return键编程Done键。

接着选中Auto-enable Return Key复选框，这可以让用户没有输入文本之前，不能点击Done键，以确保用户永远不能输入一个空字符串作为菜谱名。

8.添加label（标签）到场景中。

打开Object library，输入Label快速过滤出Label对象，然后把这个对象拖动到你的场景中，以使其在文本框上方并与场景中的左边缘对齐。如下图所示：

双击标签，输入Meal Name（菜单名），然后回车

9.添加Button（UIButton）到场景中

这个按钮是可以和用户交互的，用户可以点击它，然后触发一个动作。然后你可以创建一个动作来重置这个label的默认值

打开Object library，输入Button快速过滤出Button对象，然后把这个对象拖动到你的场景中，以使其在文本框下方并与场景中的左边缘对齐。如下图所示：

双击按钮，然后键入 Set Default Label Text，按下回车键。然后结果应该是这样：

很好的理解你在场景中添加的元素是如何安排的。查看大纲视图，可以方便查看场景中的已添加了哪些用户界面元素。

10.查看大纲视图

在你的storyboard，找到outline view toggle(Show Document Outline)不同版本的Xcode文字描述可能不一样，但位置和图标样子是相似的

出现在画布左侧大纲视图可以让你看到在你的storyboard中对象的分层表示。你应该能够看到文本字段，标签和按钮，是一个列表层次结构。但是，为什么您添加的UI元素嵌套在View下？

Views不仅显示自己的屏幕和对用户的输入作出反应，它们可以作为其它Views的容器。一个视图可以有多个子视图，但父视图只有一个。

在一般情况下，每个场景都有自己的视图层次结构。在每个视图层次的顶部是一个内容视图。在当前场景中，内容视图是视图控制器中的顶层视图。文本框，标签，按钮的内容视图的子视图。

预览界面

预览你的应用程序周期性地检查是不是一切都是你期待的方式。您可以使用assistant editor预览您的应用程序界面，它显示了与您的主要的一个二次编辑器。

1.点击assistant editor，它在你Xcode的右边

2.如果你想获得更多的工作空间，你可以折叠你项目中的navigator和utility 区域，在Xcode工具栏上点击这两个按钮即可：

3.在editor selector bar中，选择assistant editor，然后从默认的Automatic中，来选择Preview > Main.storyboard (Preview)

正如在助理编辑器中所看到的，文本框看起来不太正确。它延伸到屏幕的边缘外面。在storyboard中界面看起来正确的，为什么在预览时会这样？

正如我们前面提到的，其实我是构建的一个自适应界面，能适用于不同尺寸的iPhone和ipad的比例。在storyboard中我们在场景中看到的默认情况是一个通用版本的用户界面。你需要为不同的屏幕大小和可用区域来指定界面如何调整。

例如，当界面缩小到一个iPhone的时候，文本框就应该收缩。当界面在ipad中时，文本框要变长。你可以使用自动布局来指定这些类型的界面规则。

采用自动布局(以下是Xcode7的内容，其他版本Xcode请忽略)

自动布局是一个功能强大的布局引擎，可以帮助你很容易的设计自适应布局。你为在一个场景中元素的位置描述你的意图，然后让布局引擎决定如何最好地实现这一意图。你描述你的意图使用约束规则，约束规则就是一个元素应该是位于

另一个元素的相对位置，或当由于其他某物让他们减少空间时，这两种元素应该先缩小以减少它们的可用空间。与自动布局相结合，有一个布局工作中最有用的工具之一是堆栈视图（UIStackView）。一个堆栈视图提供了一个简化的界

面，用于在一个列或行中放置一个集合。堆栈视图让你充分利用自动布局的力量，创建可以动态适应设备的方向、屏幕大小和可用空间中的任何变化的用户界面。您可以轻松地将现有的接口包裹在堆栈视图中，添加必要的约束，以使堆栈

视图在不同的情况下显示正确。下面让我们来添加约束规则到meal场景：

1.点击Standard按钮返回到Standard editor，同时展开项目中的navigator和实用区域

2.按下键盘上的Shift键，同时选择文本框，标签和按钮。

3.在画布的底部右边，点击Stack按钮 (你也可以选择Editor > Embed In > Stack View)

Xcode包装UI元素在一个堆栈视图中，堆叠在一起。 Xcode的分析您的现有布局弄清楚该项目应垂直堆叠，不是水平堆叠。

4.如果必要打开大纲视图（outline view）选择Stack View 对象。

5.在Attributes inspector中的Spacing field键入12。然后按下Return。你会发现UI元素之间的垂直间距变长了。

6.在画布的底部右边，打开Pin菜单

7.在“Spacing to nearest neighbor”上方，点击两个horizontal constraints 和 top vertical constraint。他们被选中时会变成红色

因为 “Constrain to margins” 复选框被选中了，stack视图将被限制它父视图的左，右，上的间距。会在屏幕边距留下少量空间。

8.在左边和右边的boxes中，输入0，上方的box中输入60

9.在Update Frames旁边,选择Items of New Constraints。如下图所示：

10.接着在Pin菜单中，点击Add 3 Constraints button，菜谱场景UI看起来会像下面这样：

你要注意文本框不会拉伸到场景边距那么远，接下来我们需要修复这个问题：

a.在你场景中的的storyboard中选择文本框

b.在画布的底部右边打开Pin菜单

c.在“Spacing to nearest neighbor”上方点击两个horizontal constraints。它们会变成红色

d.在左边和右边的boxes中输入0

e.在Update Frames旁边选择Items of New Constraints。然后Pin菜单应该如下图所示：

f.在Pin菜单中，点击 Add 2 Constraints按钮

g.选中文本框，打开实用区域中的Size inspector。然后编辑对象的位置大小

h.在Intrinsic Size中选择Placeholder。当定义为intrinsic content size时，文本框的大小基于它的内容，Intrinsic content size是指在视图中显示的所有内容所需的最小尺寸。眼下，文本字段的内容仅是其placeholder字符串，但用

户输入的实际文字可能比这更长。接下来菜谱场景UI应该看起来像这样：

检查点：运行模拟器的应用程序。文本框不会超出屏幕的边缘了。你应该可以单击文本框中并使用键盘（如果你愿意，通过切换按下Command-K开启软键盘）输入文字。如果您旋转设备（Command-Left Arrow or Command-Right Arrow）或运行在不同的设备上的应用程序，该文本框会增大或缩小，以根据设备的方向和屏幕大小来匹配合适的尺寸。请注意横屏时，状态栏会消失。

如果你没有得到你所期望的行为，那么你可以使用自动布局调试功能。点击Resolve Auto Layout Issues图标，并选择Reset to Suggested Constraints，来让Xcode的更新界面约束，让他有效。或者在点击Resolve Auto Layout

Issues后，在点击Clear Constraints来清除约束，以消除UI元素的所有限制，然后尝试按照上述步骤再来一次。

虽然这个场景并没有做太多，但基本的用户界面是存在的，功能齐全。确保你的布局是稳健的，可扩展的，从一开始就确保你建立在一个坚实的基础。