Day05 UIKit 04 - 在 Storyboard 上设计画面

在 Storyboard 上设计画面

接下来我们来在一开始建立的专案上设计画面，首先我们在专案导览器选取Main.storyboard，这时Xcode 便会显示出一个 Storyboard 的视觉编辑器，即所谓的「介面建构器」（Interface Builder ），而此时Main.storyboard上的画面即是预设的ViewController.swift的视图

介面建构器提供一个视觉化的方式让开发者来建立与设计 App 的 UI，可以使用它来设计个别的视图（或画面），介面建构器的 Storyboard 可以让你布局多个视图（ViewController），并使用不同的转场（transition ）方式来建立完整的使用者介面。这些都不需要撰写一行程序码即可办到

透过点选Xcode 右上角的元件库（+）按钮来显示元件库

在这里可以选择任何一个 UI 视图元件，并拖放到这个视图上

此时可以在工具区（ Utility Area ）下点选属性检阅器（ Attributes Inspector ），它可以让您对选取的视图编辑属性

拉完所设计的UI 後，这边介绍一个 Xcode 好用的功能，Assistant Editor 辅助编辑/关联编辑功能，它可以用来帮助你快速检阅目前最为相关的关联文件，并提供必要的互动。

只要在 Xcode 上，点选 Adjust Editor Options 按钮

然後选择 Assistant (快速键 cmd + option + control + enter)，即可显示 Assistant Editor 辅助编辑画面

之後 Assistant Editor 就会自动预测你目前可能还需要检阅哪些文件，像是您正在使用 Interface Builder 设计介面，Assistant Editor 即会自动显示其对应的 ViewController，如下图

在编辑介面时也可以透过 Assistant Editor 直接产生介面元件所需的程序码，只要直接将元件拖曳至程序码中即可，我们在介面上再新增一个按钮来一起介绍

首先用control + 滑鼠左键或是滑鼠右键对要编辑的视图进行拖拉，并拖曳至ViewController 中第一个 function 位置的上面

注意：Xcode 将透过我们所拖曳至的位置来判断产生的程序码，连到第一个 function 之前将产生property 的 outlet，连到第一个 function 之後将产生 function 的 action，因为定义 class 时，我们习惯在前面宣告 property，後面定义 function

当然，若拉错位置时，可在 Outlet 设定视窗，透过Connection 的选单切换更改

接着在 Outlet 设定视窗的 Name 栏位输入名字，然後按右下角的 Connect

将产生以下程序码：

    @IBOutlet weak var button: UIButton!

接着换对按钮视图再用control + 滑鼠左键或是滑鼠右键拖拉到ViewController 中第一个 function 位置的下面

然後在 Action 设定视窗的 Name 栏位输入名字，然後按右下角的 Connect

将产生以下程序码：

    @IBAction func buttonPressed(_ sender: Any) {
    }

这样就简单透过 Assistant Editor 完成了 UI 物件与程序码的连结，此时可以在工具区下点选 Connections Inspector ，它可以显示属於此物件的相关Connections 资料，可以看到我们的按钮已经与ViewController 连结

接下来我们就能透过在 ViewContorller 来对画面来进行程序设计了