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

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

博客链接：mcf171的博客

原文链接：Build a Basic UI

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

上一篇文章写到了对于模板创建的两个重要文件的描述。

打开你的Storyboard

为了我们的app我们准备通过storyboard开始工作了。storyboard是一个app UI可视化展现，能够展现屏幕的内容和转换。我们可以通过storyboard来进行布局flow或者story。我们能一边做一边准确的看到我们正在构建的是什么，能过马上知道什么正在工作，哪些不在，可以马上来可视化的改变我们的UI

打开你的storyboard

• 在工程导航栏选择Main.storyboard

Xcode在Interface Builder（一个可视化的接口编辑器）中打开storyboard。这个storyboard的背景是画布（canvas）。我们可以使用这个画布来增加和管理UI元素。

你的storyboard应该看起来是这样的

到目前为止，你的app中的storyboard包含一个场景（scene），场景是用来展现你app内容的屏幕。在画布的左边有一个指向左边屏幕的箭头，他是这个storyboard的进入点，也就是意味着当app启动之后这个屏幕将首先被加载。在画布上我们所看到的场景包含了一个被view controller管理的single view。我们将在马上对于views和view controllers进行进一步的了解。

当我们在iPhone6 模拟器运行app的时候，这个视图就是我们在设备屏幕上看到的。但是当我们在画布上看这个场景，我们会注意到他并不是iPhone6 屏幕的尺寸。这是因为在画布上这个场景是在你的结构上生成的呈现，因此可以引用到任何设备的任何方法。我们可以通过这种呈现来创一个自适应的接口。

构建基本的UI

是时候构建一个基础的UI了。我们首先考虑增加一个菜品到我们的菜品追踪app的这么一个场景。

Xcode提供了一个对象库。其中有一些元素能够在UI上进行展现，比如说按钮和文本框。一个文本框可以允许我们输入一行文字，这样我们就能进行命名菜品了。

增加一个文本框到我们的场景中

1、打开对象库

对象库出现在使用区域的底部，也就是Xcode的右下方。如果没有看到对象库，如下图所示的按钮打开选择栏（可选方案是选择choose View > Utilities > Show Object Library）。

这个列表展现了对象的名字，描述和可视化的外形。

2、在搜索栏输入text field，我们能很快的得到文本框对象

3、从对象库中将文本框脱去到场景中

如果必要可以使用 Editor > Canvas > Zoom.来进行缩放

4、将文本框拖到如图所示的位置。

这个蓝色的布局线可以帮助我们防止文本框。布局希艾娜只有当我们拖拽或者调整对象的时候才会出现。其他时候都会消失。

5、如果必要的话，点击这个文本框将出现尺寸调整的小方块。

我们可以通过拖拽这些小方块来重新调整UI元素的尺寸。如果你的文本框跟下图一样的话，那么你就可以重新调整文本框的尺寸。如果不是的话点击一下这个文本框。

6、重新调整文本框的大小直到看到三个垂直的布局线。

尽管在场景中已经有了一个文本框，但是并没有指令来告诉用户在这个文本框输入什么。因此我们将使用文本框的placeholder属性来提示用户输入新的菜品名称。

配置文本框的 placeholder 文本

1、选中文本框，打开使用区域的属性查看器。

属性查看器如图所示。

2、在属性查看器中，找到文本框的Placeholder并且输入Enter meal name

3、按return来显示文本框中的新的 placeholder 文本

现在你的场景看起来应该是这样

当你正在编译文本框的属性时，我们可以以编辑系统键盘的属性，当我们选择文本框的时候。

配置文本框的键盘属性

1、确定文本框仍然是被选中的

2、在属性查看器中找到Return Key的然后选择Done

这个改变将使系统键盘上的Return Key变成了Done。

3、在属性查看器，勾选Auto-enable Return Key 的多选框。

这个改变将导致用户敲不了Done键，除非在文本框中敲入了内容，确保了用户不能输入一个空的菜品名。

下一步在屏幕的顶部增加一个label。一个label是不可以交互的，只能在UI中展现静态的文本。为了帮助我们更好的理解如何定义元素和UI的交互，我们将配置这个label，使得当偶们输入文本框的文字时，label展现文本框的内容。这是一个好的方式来测试文本框正在接受用户的输出同时合适的进行了处理。

增加一个label到场景中

1、在对象库中找到label

2、拖拽label对象到屏幕中

3、拖拽label到如下图所示的位置

4、双击label 输入 Meal Name

5、按Return键来展示label新的文本

这个时候你的场景应该如图所示

现在在界面上添加一个按钮。按钮是可以交互的，所以用户能够点击它从而触发我们定义的时间。之后我们会创建一个事件来重置label的文本。

增加一个按钮到场景中

1、在对象库中找到Button对象

2、将按钮拖到场景中

3、将按钮放置到如图所示的位置

4、双击按钮、输入Set Default Label Text.

5、按下Return键来展示新的文本

到这一步你的场景应该看起来如下图所示

经过上述的操作，相信大家对于如何在场景中添加元素有了一定的了解，接下来让我们看一下大纲视图来查看我们增加了哪些元素到我们的场景中。

查看大纲视图

1、在storyboard中找到大纲视图的触发器

2、如果大纲视图是折叠的，点击触发器来展开大纲视图。

大纲视图在画布的左边，能让我们清楚地看见在storyboard中的对象继承结构。在你的结构中应该能看到文本框，标签和按钮。但是为什么我们添加的元素都嵌入到了View下面呢？而不是其他的view下面？

视图不仅仅在屏幕上展现了自己，同时也会反作用于用户的输入，他们可以作为其他视图的容器。被安排在一个层次结构里的视图集合称为视图层次图。这个视图层次图定义了每个视图和其他视图的相对布局。在这个层次图中，一个视图下面依附的所有视图称为子视图，被依附的称为父视图。一个视图可以有多个子视图，但是只能有一个父视图。

一般来说每个场景都有自己的视图层次。爱每个视图层次嘴上面的称为内容视图。在当前场景中，内容视图为View，最高级的View也是在ViewController下。文本框、标签和按钮都是内容视图的子视图。所有其他放在场景中的视图都是内容视图的子视图。

预览你的接口

定期的预览你的app从而检查是否所有的事情都按照你自己所预期的那样呈现。你可以通过助手编辑器(assistant editor)来预览你的app接口，这个编辑器将在主编辑器旁边。

预览你的接口

1、点击在Xcode工具栏上右上角的助手按钮，从而打开助手编辑器

2、如果想要更多的工作空间，可以将工程导航和使用区折叠起来。通过点击下图两个按钮。

3、助手编辑器的顶部是 编辑器选择栏，将助手编辑器从Automatic to Preview 到 Main.storyboard(Preview)

正如你再助手编辑器看到的，文本框看起来展示的不太正确。它超出了屏幕的边界。但是这个接口在你的storyboard中看起来是非常正确的，那这是为什么呢？

正如你之前所学的，事实上我们建立的是一个自适应的接口，因此可以弹性的适应不同尺寸的iPhone和iPad。在storyboard中看到的场景展示的是你接口一般化的版本。所以你需要指定对于不同的屏幕尺寸接口应该怎么样进行调整。比如说当这个接口缩小到一个iPhone尺寸时，这个文本框也应该缩小，当这个接口增长到iPad尺寸时，这个文本框应该也增长。我们可以很简单的通过使用自动布局来指定这些规则变化。

采用自动布局

自动布局是一个强有力的布局引擎，能够帮助你很容易的设计出自适应的布局。你只需要描述每个元素你希望它在屏幕中的位置，然后让布局引擎决定怎么样来最好的实现这样的意图。我们可以通过使用约束来描述我们的意图，这些约束就是解释每个元素应该在哪以及相对其他元素的位置，并且他的尺寸应该是多少，或者当空间变小的时候，哪两个元素应该先缩小。

在与自动布局的组合中，最强有力的工具之一stack view，它能让跟自动布局融为一体。stack view提供一个流水线接口来布局一系列的视图集合不管是在行还是列。stack view能让你强有力的利用自动布局，创建自适应的任何情况的用户接口。

你也可以很轻易的打包在stack view中存在的接口，增加必要的约束从而确保stack view 在不同的情况下都展示的很好。

为我们的菜品场景增加自动布局约束

1、通过点击标准按钮返回标准编辑器。

可以通过点击上述图中右边两个按钮展开工程导航和使用工具区

2、当按住shift键的时候选中文本框、标签和按钮。

3、在画布的右下方点击Stack按钮（或者选择Editor > Embed In > Stack View）

Xcode将打包这些UI元素到一个stack view中，将他们堆积起来。Xcode分析你已有的布局来计算这个元素在垂直方向的堆栈。

4、如果必要的话，打开大纲视图。选择Stack View对象

 

5、在属性查看器中，在Spacing这一个属性输入12.然后回车。

这时候我们能看到UI玄素在垂直方向自动分割了，stack view也相应的变大了。

6、在画布的右下角，打开Pin菜单

6、在“Spacing to nearest neighbor”文字上我们点击两个水平约束和上部的垂直约束。当这三个约束选中的时候他们会变红。

这个约束表明了这三个方向的间隔。在我们的情况下，左右相邻意味着这UI元素的最近距离。因为"Constrain to margins"的单选框是勾选的，所以在这种情况下Stack view会受到左右上界的父视图的外边距约束，也就只会刘很少的空间给屏幕。

8、在左右盒子中输入0，在上面的盒子中输入60

9、在弹出的Pin菜单中更新框架，选择Items of New Constraints。如下图所示

10、点击增加三个约束的按钮

那么这个菜品场景UI应该看起来如下图所示

我们可以发现文本框并没有延生到屏幕的一端，这是因为我们固定了。

调整文本框的宽度

1、在你的storyboard中选择文本框。

2、在画布的右下叫点击Pin菜单

3、选择两个水平约束。

4、在两个水平约束输入0

5、在弹出的菜单中更新框架，选择 items of New Constraints。那么Pin菜单应该如下图所示

6、在Pin菜单中，点击Add 2 Constraints 按钮

7、选中文本框，打开实用工具区的Size查看器。

Size查看器能让我们编译在storyboard中的对象size和位置

8、在Intrinsic Size这个属性栏选择 Placeholder。因此当我们定义了文本框的固有大小后，文本框将基于他们的内容来改变大小。固定内容大小指的是需要展示视图中所有内容的最小尺寸。如果需要设一个针对不同尺寸的UI，那么你可以分配UI元素一个占位符固有内容尺寸，而不是在设计阶段进行估算。那么文本框的仅仅满足占位符字符串，但是实际一个用户输入的文本可能会比这个更长。

现在菜品场景的UI看起来应该像下图

里程碑：在模拟器中运行你的程序。这个文本框不应该超出屏幕的边界。我们也可以点击文本框并且通过键盘出入一些文字（如果你喜欢的话可以通过Command-K来拉出模拟器的键盘）。

如果旋转设备的话（Command-左箭头或者Command-右箭头）或者在不同设备上进行运行，这个文本框都会进行相应的增长或者缩短。

如果没有获得你期望的效果，可以使用自动布局调试模式来进行调试。点击REsolve Auto Layout Issue 图标，选择Reset to Suggested Constraints来使得Xcode通过一系列合法的约束来更新你的界面。或者点击Resolve Auto Layout Issues 图标，选择清楚所有的约束来移除所有在UI元素上的约束，然后重新跟着上面的步骤再做一遍。

尽管这个场景并没有太多的东西，但是这个基础的用户结果是很全面的。确定你设计的布局是鲁棒的和可扩展的

ps 可以下载这个课程的样例工程。Download File

采用自动布局

自动布局是一个强有力的布局引擎，能够帮助你很容易的设计出自适应的布局。你只需要描述每个元素你希望它在屏幕中的位置，然后让布局引擎决定怎么样来最好的实现这样的意图。我们可以通过使用约束来描述我们的意图，这些约束就是解释每个元素应该在哪以及相对其他元素的位置，并且他的尺寸应该是多少，或者当空间变小的时候，哪两个元素应该先缩小。

在与自动布局的组合中，最强有力的工具之一stack view，它能让跟自动布局融为一体。stack view提供一个流水线接口来布局一系列的视图集合不管是在行还是列。stack view能让你强有力的利用自动布局，创建自适应的任何情况的用户接口。

你也可以很轻易的打包在stack view中存在的接口，增加必要的约束从而确保stack view 在不同的情况下都展示的很好。

为我们的菜品场景增加自动布局约束

1、通过点击标准按钮返回标准编辑器。

可以通过点击上述图中右边两个按钮展开工程导航和使用工具区

2、当按住shift键的时候选中文本框、标签和按钮。

3、在画布的右下方点击Stack按钮（或者选择Editor > Embed In > Stack View）

Xcode将打包这些UI元素到一个stack view中，将他们堆积起来。Xcode分析你已有的布局来计算这个元素在垂直方向的堆栈。

采用自动布局

自动布局是一个强有力的布局引擎，能够帮助你很容易的设计出自适应的布局。你只需要描述每个元素你希望它在屏幕中的位置，然后让布局引擎决定怎么样来最好的实现这样的意图。我们可以通过使用约束来描述我们的意图，这些约束就是解释每个元素应该在哪以及相对其他元素的位置，并且他的尺寸应该是多少，或者当空间变小的时候，哪两个元素应该先缩小。

在与自动布局的组合中，最强有力的工具之一stack view，它能让跟自动布局融为一体。stack view提供一个流水线接口来布局一系列的视图集合不管是在行还是列。stack view能让你强有力的利用自动布局，创建自适应的任何情况的用户接口。

你也可以很轻易的打包在stack view中存在的接口，增加必要的约束从而确保stack view 在不同的情况下都展示的很好。

为我们的菜品场景增加自动布局约束

1、通过点击标准按钮返回标准编辑器。

可以通过点击上述图中右边两个按钮展开工程导航和使用工具区

2、当按住shift键的时候选中文本框、标签和按钮。

3、在画布的右下方点击Stack按钮（或者选择Editor > Embed In > Stack View）

Xcode将打包这些UI元素到一个stack view中，将他们堆积起来。Xcode分析你已有的布局来计算这个元素在垂直方向的堆栈。

采用自动布局

自动布局是一个强有力的布局引擎，能够帮助你很容易的设计出自适应的布局。你只需要描述每个元素你希望它在屏幕中的位置，然后让布局引擎决定怎么样来最好的实现这样的意图。我们可以通过使用约束来描述我们的意图，这些约束就是解释每个元素应该在哪以及相对其他元素的位置，并且他的尺寸应该是多少，或者当空间变小的时候，哪两个元素应该先缩小。

在与自动布局的组合中，最强有力的工具之一stack view，它能让跟自动布局融为一体。stack view提供一个流水线接口来布局一系列的视图集合不管是在行还是列。stack view能让你强有力的利用自动布局，创建自适应的任何情况的用户接口。

你也可以很轻易的打包在stack view中存在的接口，增加必要的约束从而确保stack view 在不同的情况下都展示的很好。

为我们的菜品场景增加自动布局约束

1、通过点击标准按钮返回标准编辑器。

可以通过点击上述图中右边两个按钮展开工程导航和使用工具区

2、当按住shift键的时候选中文本框、标签和按钮。

3、在画布的右下方点击Stack按钮（或者选择Editor > Embed In > Stack View）

Xcode将打包这些UI元素到一个stack view中，将他们堆积起来。Xcode分析你已有的布局来计算这个元素在垂直方向的堆栈。

采用自动布局

自动布局是一个强有力的布局引擎，能够帮助你很容易的设计出自适应的布局。你只需要描述每个元素你希望它在屏幕中的位置，然后让布局引擎决定怎么样来最好的实现这样的意图。我们可以通过使用约束来描述我们的意图，这些约束就是解释每个元素应该在哪以及相对其他元素的位置，并且他的尺寸应该是多少，或者当空间变小的时候，哪两个元素应该先缩小。

在与自动布局的组合中，最强有力的工具之一stack view，它能让跟自动布局融为一体。stack view提供一个流水线接口来布局一系列的视图集合不管是在行还是列。stack view能让你强有力的利用自动布局，创建自适应的任何情况的用户接口。

你也可以很轻易的打包在stack view中存在的接口，增加必要的约束从而确保stack view 在不同的情况下都展示的很好。

为我们的菜品场景增加自动布局约束

1、通过点击标准按钮返回标准编辑器。

可以通过点击上述图中右边两个按钮展开工程导航和使用工具区

2、当按住shift键的时候选中文本框、标签和按钮。

3、在画布的右下方点击Stack按钮（或者选择Editor > Embed In > Stack View）

Xcode将打包这些UI元素到一个stack view中，将他们堆积起来。Xcode分析你已有的布局来计算这个元素在垂直方向的堆栈。