iT邦幫忙

2021 iThome 鐵人賽

DAY 5
0
自我挑戰組

來寫看看app好了! Swift探索之旅系列 第 5

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


上一篇
Day#04 TableView
下一篇
Day#06 新增
系列文
來寫看看app好了! Swift探索之旅30

尚未有邦友留言

立即登入留言