Day#05 Storyboard

前言

今天的东西比较少程序，不过就是UIvs方法拉来拉去做连结，所以我尽量截图让开发过程能被描述的更具体。

Storyboard vs. SwiftUI

storyboard，也就是UIKit framework，将app的架构图象化，算是可以在开发的时候直接看到画面，跟程序有对照、连结。而近几年又推出了SwiftUI，两者都是处理UI的工具，如果使用swiftUI的话，专案本身是不包含storyboard的。总之，保守起见，还是先跟着影片所使用的storyboard呗XD

首先，我们来到main.storyboard，加入一个navigation controller。

Editor > Embed In > Navigation Controller

这个东西就是平常手机画面下面一条，有一些icon，点选後会进入不同的画面，如instagram来说，就是主页/影片/个人页面等等的。马上变的完全不明确的描述 ლ(ಠ_ಠლ)

接着点选画面右上角的加号
这边可以加入新的元件，那我们新增一个UITableView，直接点选然後拖移到主画面(不是刚刚加入的controller)当中。此时主画面就有一个table了。

右键/两指点选主画面上方最左边的选项以设定viewController对应到的元件。因为程序部分已经有先写一个table，就将他拉到刚刚画面中的table view，如下图呈现。

此时我真是觉得太酷了，连开发ios app的过程都充满了apple系列的手势体验。

接着要设定constraints。
我的理解是，因为现在诸多萤幕、就导致有诸多不同的萤幕大小要处理。透过constraints的限制与设定，就不需要在那边自己一个个处理。

按照下图的位置，点选icon，然後将上下左右每个边都设定为0，table就会紧贴着边界。

如果想了解更多设定的话，可以参考ios app dev官方教学: UIKit Essentials
Setting Constraints with Auto Layout

好，接下来继续增加元件。
一样右上方搜寻、新增bar button item，并将System Item设定为Add，就会从预设customized的文字变成加号。

好的。那麽这样显示的画面基本上预设就完成了。此时可以按按看cmd+R(run)，去模拟器看画面是否都正常。

可以看到table view一条条的显示出来，然後右上角也如预期的呈现新增的按钮。

结语

按下新增的按钮时，我们希望可以执行新增的动作。因此我们要在程序方面加方法，然後并连结回今天新增的按钮。明天会继续实作～

若有任何指正或建议，欢迎留言 (゜▽゜;)

参考资源

Build To Do List App in Swift 5 (Xcode 12) - 2021 Beginners
简介 SwiftUI & 用其建构一简单的 App