2017年12月2日

iOS 開發教學 - 暸解 Storyboard 1/2 ( iOS Development - A basic introduction to Storyboard Part 1)

為了打好 iOS 開發的基礎,我們需要先稍微暸解 Storyboard 是怎麼運作的,所以我將在這篇文章中簡單介紹 Sotryboard 的運作流程以及 Storyboard 與你的程式碼 (.swift) 是怎麼連結起來的。最後,本篇文章是基於 Swift 4 的環境下進行。( If you want to read this article in English, you can visit here )



Storyboard 運作流程

Storyboard 是一個很方便的功能,但你知道當 iOS App 啟動時它是如何運作的嗎?首先,當 App 啟動時系統會先把 Info.plist 的資料載入,這樣它才知道要使用哪一個 Storyboard。這時候你可以打開 Info.plist 仔細看,其中應該會有一欄為 Main storyboard file base name,然後它的值為 Main。這說明了 Info.plist 告訴系統去使用檔名為 Main 的 Storyboard。如此一來,系統就會根據你的 Main.storyboard 內容,按著你的 App 設計 (劇本) 執行。



為了進一步認識 Storyboard,先打開 Xcode 新建一個 Tabbed App,點選 Main.storyboard 後你可以看到有一個箭頭指向一個 Tab Bar Controller,這代表我們 App 的第一個進入點 (Entry Point),換句話說 iOS App 啟動後這裡就是第一個使用者會看到、使用到的畫面,它也是一個很重要的地方,因為若我們需要初始化一些設定就可以在這邊完成。參考下圖:



上圖中的箭頭是可以拖拉,也就是你可以拖拉那個箭頭到不同的地方。隨著你的 App 設計 (劇本) 的不同,使用者可能需要切換不同的操作畫面,你就需要加入更多的操作畫面,而這時候你的 Storyboard 就會類似下面的架構:



上圖說明了使用者進入了 App 後,我們可以透過按鈕或程式設定讓使用來進入 (切換) 到不同的操作畫面,所以你也可以看到有兩個箭頭延伸出來至不同的 View。以上讓你簡單地認識 Storyboard 以及其扮演的角色,簡單來說它就是一個將你的 App 架構、流程圖像化,讓開發及設計的過程更簡化的功能。而開發者也可以明確知道操作畫面是如何彼此連結的,當然還有很多細節可以討論,之後實作時會補充更多資訊,但我們這邊只給你一個基本的認識。


初步了解 ViewController

上面在介紹 Storyboard 時一直提到操作畫面以及 View (畫面中一個一個的長方塊),其實它們就是一個一個的 ViewController。它們的功用是什麼呢?你可以把 ViewController 當作是一個操作畫面的容器,一個操作畫面是由好多東西組成的,例如:按鈕、文字方塊、圖片等等。我們把這些元件放進容器 ViewController 裡,然後我們透過 ViewController 來進行更細部、有效的管理。

但是我們要如何寫程式來設定、控制 ViewController ? 這時候我們就可以建立 Swift 程式檔案 (.swift) 然後加入程式碼,最後透過 Xcode 將 ViewController 的 Class 指定到我們新建 .swift 檔案內的 Class。這樣系統就會知道這個 ViewController 要使用這個 Class 內的程式碼。概念參考下圖:



在這篇文章中,雖然我們還沒開始動手實作,但先初步認識 Storyboard 與 ViewController 會對之後的開發有很大的幫助。請繼續閱讀iOS 開發教學 - 暸解 Storyboard 2/2


Environment :
  ・ macOS



熱門文章