iOS程式開發與XCode4.X-Storyboard(上)

在以前的iOS版本，程式設計師會使用ViewController搭配著XIB來作程式開發，但是自從XCode4開始這種情境又再次的強化，因此在本文中讓我們開始從程式開發者的角度討論一些Storyboard的實務。
在以往，我們所熟悉的MVC設計樣式中表達Model的是UIViewController的子類別，或者是UITableViewController的子類別。既然這是一個Objective C的類別檔，很自然的會將程式邏輯搭配其中。而所有的視窗元件與畫面，都會使用xib來設定。
在XCode底下，xib可以很輕易的讓開發者拖拉使用者視覺元件。事實上雖然說這個 xib看起來很像是一組紀錄圖形的檔案，但是事實上它只是一組XML，在這檔案中會紀錄視覺元件的各個屬性，如大小，位置，與上面的字串等等如圖1。


▲ 圖1 xib檔案的原始檔



因此，你可以想像事實上一組使用者介面，在XCode上的實作事實上是用
* 一組Objective C的類別(.m檔和.h檔)
* 一個xib檔所組成

因此如果在一般的應用程式，你有20個使用者介面必須設計，在XCode上的實作就變成了
* 二十組Objective C的類別
* 二十組xib檔

這樣當然也沒有什麼不對，而事實上這些實作也都是必要的，但是你可以想像，很多應用程式事實上從一個畫面到另一個畫面的連線是固定的，所以除了這些xib檔之外，在Objective C的類別中就必須作很多畫面到畫面的連結。但是這些畫面的連結，除了xib和類別的不同，其它的邏輯都是一致的。

Storyboard

因此，在新的XCode中，雖然並沒有什麼特殊的方式改進這種MVC的設計樣式，但是卻對XIB的表現有了不同的展現。

讓我們使用一個空白的專案開始，請使用如圖 2的方式新增一組空白的專案。


▲ 圖 2 新增一組空白專案



在下一步時請選擇Device Family為Universal如圖3，雖然沒有預設的使用者介面，還是請你選擇它，以便能夠不失其一般性的討論。


▲ 圖3選取Device Family為Universal



專案新增完成之後，讓我們看看如何實作storyboard，請你先【File】【New】【File...】新增一個當案，同時在iOS的User Interface下看到Storyboard的檔案如圖四。


▲ 圖 4 新增一個 Storyboard



在接下來的Device Family時，請你選擇iPhone以便跟我們同步討論，請取名iPhone.storyboard。如果你要實作的是iPad的介面，則必須要新增另一個檔案。

storyboard的初始化

點擊這個iPhone.storyboard，你會拿到一個空白的storyboard檔案，為了要能夠立刻看到效果，請你點擊一個 ViewController並且將它拉至主畫面如圖 5。


▲ 圖5 在storyboard中新增一個主畫面的View Controller



在這個畫面上，你可以把它當成一般的xib中的ViewController加入一些控制項如圖6。


▲ 圖6 在storyboard中加入一些控制項



設定完成之後，你會發覺在模擬器上執行完全是空白的，這是因為在應用程式的代理物件中又被設定成空白的版型，所以請你修改application:didFinishLaunchWithOptions將 關於window的指令先全部註解掉如圖7。


▲ 圖7 清除關於window的初始化設定



如此就完成了第一階段應用程式的初始化。在模擬器上會看到如圖7的畫面。


▲ 圖8 在模擬器上運行的結果



ViewController類別與storyboard
在storyboard的初始化畫面能夠被存取之後，讓我們看看如何將它和類別放置在一起。請使用【Fine】【New】【File...】新增一個Objective C的類別如圖9，並且取名為FirstViewController。請注意由於是使用Storyboard，所以就不需要再產生XIB的檔案。


▲ 圖9 產生一組FirstViewController類別



在Storyboard中的File's Owner可以是UIViewController的子類別，所以請你在storyboard中設定這個Controller的Scene是FirstViewController如圖10。


▲ 圖10 設定第一個Controller的Scene是FirstViewController



再來要能夠順利的將這個類別取出，請你先在AppDelegate中匯入它的檔頭，並且由於storyboard會載入至這個類別的根類別，所以你可以作一個型別轉換將根視窗的控制器轉成正確的型態，同時就可以對這個ViewController作其它的設定如圖11。


▲ 圖11 將根視窗控制器作正確的型別轉換



Storyboard與其它容器的互動

當然如果Storyboard只有如此的效果，那它就和xib的形式其實是差不多的。在之前的xib運作中，你可以看到應用程式其實很常使用一種類似精靈的設計樣式，也就是從第一個ViewController到第二個ViewController再到第三個ViewController...，這種形式在之前的必須要使用UINavigationController，再不斷的用pushViewController和popViewController來作頁面之間的互動。

然而這種常見的樣式，不止有些浪費程式設計師的時間，更容易造成程式不小心的錯誤而導致不正確的執行。因此在Storyboard中針對這種情境有特別的處理，幫助你系統圖示這個方案。

在Storyboard中使用導覽列

Storyboard能夠讓ViewController之間的連貫更流暢，並且可以在圖形介面中將UINavigationController加入ViewController。以目前的這個畫面來說，當你點擊了目前的這個Scene之後，請按下Editor，Embed In並且選擇Navigation Controller，則你就可以在畫面上看到這個畫面已經被嵌入一個Navigation Controller之中如圖 12。


▲ 圖12 將First View Scene嵌入UINavigation Controller之中



嵌入的ViewController如圖12，你會看到在它的畫面上方直接就有Navigation Controller的圖示，事實上這就和你在程式中實作UINavigationController並且將它的RootViewController設定成FirstViewController一樣，所以同樣的，對於這個ViewController，我們可以設定它的Title，你可以在這個View Controller的Scene底下看到一個Navigation Item，點擊它之後打開它的屬性檢視器，可以在Title中作設定如圖13。


▲ 圖13 設定Navigation Item的Title



使用Storyboard有另外一個好處，就是這樣的圖示是很容易讓人望【圖】生義的。舉例來說，從圖12的畫面來說，你會看到畫面的進入點是Navigation Controller，所以我們必須要將application:didFInishLaunchWithOptions中的內容作修改，在代理物件的self.window.rootViewController改成Navigation Controller的類別，並且再使用這個Navigation Controller的topViewController函數傳回這個畫面並且作編輯，所以你可以修改程式碼如圖14。



▲ 圖14 修改self.window.rootViewController對應的類別



如此在模擬器上執行的結果如圖 15，你可以看到畫面被正確的畫成綠色的，同時也可以產生出導覽列控制列。


▲ 圖15 在模擬器上產生出對應的導覽列



導覽列的走訪

增加了導覽列之後，應用程式就可以很輕易的在不同的View Controller中間走訪。舉例來說，如果你希望從第一頁能夠進入第二頁，在以後，我們需要增加第二個xib檔，編寫對應的ViewController子類別，再透過UINavigationController的pushViewController:的函數來實作對應的邏輯，但是在storyboard底下這個部份就可以被省略，而用圖示的方式來實作。

首先你可以在畫面上加入一個獨立的 View Controller，請注意，加入的View Controller是沒有Navigation Item的，所以它是一個空白的元件如圖16。


▲ 圖16 加入一個 View Controller



加入之後，讓我們加入First View Controller到這個一個畫面的連結，你可以在這個畫面加入一個按鈕元件並且將它取名叫Next，並且點擊它之後按下按下Control建立連線，將它連到第二個View Controller之後放開，你會看到跳出一個 Segue的選單，請你選擇Push，之後會看到第一個View Controller至第二個 View Controller的連結如圖17。


▲ 圖17 建立第一個至第二個 View Controller的連結



此處請你將第二頁的Navigation Item也設定成【第二頁】並且加入一些標籤於第二頁的View Controller內容之中，加入的內容如圖18。


▲ 圖18 加入第二頁的內容



如此在模擬器上執行，首先在模擬器上執行，你可以看到一個第一頁的按鈕如圖19。


▲ 圖 19 在模擬器上執行的結果



當你按下Next之後，出現的畫面如圖20，你可以看到雖然說我們並沒有真的實作pushViewController的內容，但是畫面是真的被推入UINavigation Controller的類別實例之中，所以你會看到一個往前的導覽回前一頁的按鈕。


▲ 圖20 在模擬器上第二頁運行的結果