iOS程式開發與XCode 4.X-使用XCode4.2中的storyboard
如果你已經開發過iOS的應用程式，一定對xib/nib檔不陌生。如果你沒有開發過這類型程式，那你可以想像xib/nib檔是一種在MVC的設計模式中擔任view，也就是使用者元件表現的任務的部份。而在傳統(之前)的iOS程式設計中，通常你可以把一個nib/xib想像成是一個要設計應用程式的主畫面。而每一個nib/xib背後會有一個控制元件，也就是MVC中的Controller，在iOS中會被稱為UIViewController的子類別物件所控制。因此你可以想像一個View可以看作是一個場景，而在這個場景中會有各個角色(UIView的子類別)在裡面活動。而在不同的場景之間，我們可以使用類似像是UINavigationController來貫穿全場，在不同的UIViewController所代表的View中作切換。因此你可以想像我們很像是導演，畫了一張一張的分鏡，而手動的將這些分鏡使用程式碼拚接起來。

加入了storyboard之後
你可以把storyboard想像成是一種新的實作使用者介面的方式，從這一版的XCode 4.2開始，我們可以在一個畫面中定義這些介面和它們彼此之間的關聯。事實上，在這一版的XCode中已經有一些預設的專案是使用了storyboard，因此讓我們先來看看預設的專案樣版能夠更有助於了解。

使用頁面基礎的專案
首先讓我們從新增一個專案開始，在新的介面中你可以看到在iOS的類別下有一個Application的子類別，在右側的專案樣版中可以找到一個"Page-Based Application"，這個樣版可以提供使用頁面為基礎的樣版如圖1，而我們也可以看到一個storyboard的"半成品"，來看看iOS自己的範例。



▲ 圖1 使用Page-Based Application作為樣版文件



按下了Next之後，你可以設定這個專案的產品名稱，並且在Device Family中讓我們選擇Universal如圖二，讓我們能夠在iPhone和iPad中都產生出對應的 storyboard，並且分別顯示出內容。



▲ 圖2 在Next的畫面中的Device Family中選擇Universal



當專案新增好之後，你會發現之前所熟悉的xib/nib檔已經不見了，取而代之的是.storyboard的兩個專案，而且你可以從字面上看到，會有分別對應至iPhone和iPad的檔案如圖3。



▲ 圖3 在專案下看到新的storyboard檔案分別對應iPhone和iPad



因此先讓我們看看這個專案是怎麼樣讓iPhone和 iPad的部署標的和這兩個storyboard專案連接起來。

storyboard的設定
首先請你先點擊這個專案，在主要畫面中你可以點擊預設的這個Target，在iPhone的部署目標底下你可以看到所連結的storyboard如圖4。




▲ 圖4 設定iPhone/iPad部署目標的storyboard



由於iPhone/iPod是使用相同的解析度，就算是iPhone4/iPhone4s使用的Retina解析度也是使用2x的模式，所以我們可以在同一個類別下作設定。

至於iPad，你可以看到預設的連結storyboard如圖5。



▲ 圖5 設定iPad部署目標的storyboard



知道如何從應用程式開始呼叫到適當的storyboard之後，讓我們開始檢視storyboard的內容。

storyboard的內容
首先請你打開storyboard的內容，你可以看到它的畫面如圖6。



▲ 圖6 檢視story board的內容



在主畫面的左側，你可以看到有一個類似電影的打板卡如圖7，一個打板卡可以看作是一個之前的nib，你可以看到有它的檔案的File Responder跟View Controller如圖7，你可以在這個檔案中看到有兩個場景Scene，事實上當你點擊不同的Scene時，你可以看到對應的ViewController會變成被選取的狀態。



▲ 圖7 在storyboard中檢視不同的scene



舉例而言，當你點擊了Data View Controller Scene之後，你可以看到中間主畫面右側的ViewController被圈選起來如圖8。同時你可以看到這個ViewController所顯示的View底下有兩個圖示，如同之前的版本，一個是View Controller的黃色圖示，另外一個就是First Respond的橙色圖示。



▲ 圖8 選取的ViewController會被藍色的框框被選


取

同時在這個storyboard的內容中你可以看到有一個Root View Controller的Scene，你可以看到它的圖示如同圖9。這裡的Root View Controller可以看作是一個主要的使用者介面的進入點。



▲ 圖 9 在storyboard中可以看到Root View Controller



這樣的storyboard所執行出來的結果先讓我們在模擬器上運行看看結果如圖10，你會看到一個如同Data View Controller所顯示的畫面，除此之外，你更可以左右的去滑動這個介面，你可以看到會有向左右翻頁的效果，並且上面的索引也會從1月2月一直變動到12月。




▲ 圖10 執行出來的結果在iPhone模擬器上執行的結果



如果你對這個範例的運行結果有興趣，你可以檢視這個RootViewController的原始碼，在viewDidLoad底下你可以看到由這個 RootViewController中將另一個ViewController作為PageViewController般的載入，並且你可以看到我們同時也設定了手勢辨識器，這樣才可以去控制由左往右滑和右往左滑時的控制。

在完成了這個實際的storyboard的簡單應用之後，讓我們退回一個更一般的例子，看看在一般的情形下要如何運作storyboard。

在single view Application中使用storyboard
讓我們在一個更簡單的環境底下使用storyboard，此時讓我們重新開始一個專案，此時使用Single View Application，也就是之前的XCode中可以作MVC的樣版並且附有一個nib的專案版型如圖11。



▲ 圖11 重新選擇一個 Single View Application的專案版型



按下Next之後你就可以進入這個單一View的應用程式的專案設定，此時你會在這個專案設定中看到一個「Use Storyboard」的選項。它的預設「不是」被選取的。也就是說這個View Based Application預設還是一樣使用xib作為使用者介面的平台。不過如果你想要使用storyboard的功能，就請你將它選取起來如圖12。



▲ 圖12 將「Use Storyboard」選取起來，使用storyboard的功能



至此你可以得到一個有著storyboard的single view controller專案，首先還是讓我們檢視一下它生成的檔案如圖13。



▲ 圖13 產生的專案與storyboard檔案



此時你會看到這個專案除了主要的application delegate，也就是nov2AppDelegate之外，還有一個nov2ViewController.h和.m的類別定義檔。如同你所知道的，這個是一個 ViewController的類別檔，因此讓我們來看看如何讓storyboard能和這個類別檔作連結。

storyboard和view controller類別的連結
此時請你打開storyboard的檔案，並且在第一個，也是唯一的一個scene中點選它的View Controller，此時你會看到主畫面中的View Controller是處於被選取的模式，同時，你也會看到這個ViewController有一個箭頭代表它是主要的這個View Controller，此時請你點選右側的子視窗中的身份檢視器Identity Inspector，你可以看到這個ViewController所代表的類別正是nov2ViewController，也就是這個專案中幫你生成的檔案框架如圖14。



▲ 圖14 在storyboard下設定 View Controller與檢視它所對應的類別



至此你應該有能力將這個storyboard的部署情境和原本之前的nib作連結了。基本上如果將storyboard看成是nib，那這種情境和之前的nib只是名稱的不同，至於其它的callback和檢視的方式和nib還是幾乎相同的。不過，讓我們來使用一下storyboard的特有功能，以便你對它有更具體的想法。

在storyboard中加入更多的View Controller
在實作這個storyboard的運作前，我們必須要加入更多的View Controller，才能夠在這個storyboard中實作應用程式的邏輯。不過在此筆者必須先作一個澄清。事實上在以前的xib/nib中要加入多個ViewController也是可行的，但是差別是在，之前的ViewController是獨立的元件被放置在xib檔案之中，而現在在storyboard中可以你除了可以增加這些view controller之外，還可以組態它們的邏輯。

因此讓我們從新增兩個View Controller開始。要在storyboard中新增View Controller，你可以打開右側子視窗，在右下角的子視窗你可以看到物件函式庫，請你打到黃色的物件系列，在一個黃色的圈圈中包含一個方塊的 View，就是ViewController的物件，你可以用拖拉的方式將它們拖拉到畫面上。請你拉兩個 View Controller到畫面上，此時如果你的營幕解析度不夠，你可以在主畫面的下方找到如圖15的元件，你可以按下放大縮小來控制這個畫面的比例。



▲ 圖15控制元件大小，左側的放大鏡有一個減號是縮小，右側是放大，中間的是等比例



縮放好之後，你可以分別在這兩個ViewController的view中加入一些內容來分辨它們的不同，這樣可以有助於你待會檢視實作的成果。製作完之後的storyboard所看到的結果如圖16。



▲ 圖16 新增兩個ViewController的結果



在story board中加入觸發的元件
在story board中所實作的這些view controller是可以彼此有關聯的，也就是說你可以設定它們觸發的條件。因此讓我們使用兩個按鈕來舉例，因此你同樣的可以使用右側子視窗，並且在物件函式庫中選擇Controls的子選項，讓我們使用兩個按鈕來作舉例，你可以拉兩個Round Rect Button進主要的這個 View Controller，並且分別給它們不同的名稱。舉例來說，讓我們分別讓它們指到第二個 View Controller與第三個View Controller如圖17。



▲ 圖17 在主要的View Controller中加入兩個按鈕



設定Segue
先讓我們回想一下沒有storyboard的時代接下來的故事該如何發展。基本上iOS跟cocoa的設計樣式都是依照MVC的設計樣式發展的，所以在View上是不會有元件的邏輯的。因此要實作某個按鈕按下去的反應，或者是某個元件被觸發時的反應，首先我們要定義一個 IBAction(由Interface Builder所連結的Action)，並且在裡面實作相對應的程式碼，再使用Interface Builder來進行連結。而以跳到下一頁的這個邏輯來說，就是呼叫ViewController，並且使用presentModel之類的程式碼來運作。因此你可以想像如果是手動的方式，我們就必須要在一個 IBAction的函數中實作view controller的切換，再連結到不同的Button中。
而在storyboard中，我們可以省略這些程式碼，直接進行元件的切換。首先請你點擊第一個Button(例如是到第二頁的這個Button)，並且按下右側子視窗中的連線檢視器，也就是Connection Inspector，此時在這個視窗中你可以看到Storyboard Seques，下面有Custom, Push和Model這三種如圖18。




▲ 圖 18 在storyboard中的ViewController下的按鈕會有storyboard seques的選項



由於Model是按下去會切換到新的ViewController，所以請你按下這個Model右側的圓圈，並且拖拉它直到中間畫面的第二個ViewController再放開，你就可以看到主ViewController和次ViewController中出現一條連線如圖19。



▲ 圖19 加入第一個 segue


讓我們用同樣的方式，將第二個按鈕的storyboard seque的連線設定到第三個View Controller，設定好之後你應該會得到一個如圖20的連線圖。



▲ 圖20 由主要的View Controller連線到兩個View Controller都完成



都連線完成之後，在測試之前請你觀察主要的這個View Controller的Scene，你會看到除了有 View與兩個 Button之外，還有兩個Segue的連線設定如圖21。



▲ 圖21 在Scene中可以看到Seque的兩個設定



當設定完成之後，你就可以在模擬器下執行，此時你就可以看到按下Button之後畫面所作的變換，當你按下第一個按鈕會切換至第二個 View Controller，而按下第二個按鈕會切換至第三個View Controller。

至此你可能會嚇一跳，到目前為止我們一行程式碼都沒有寫，就可以完成這樣子的一個專案。除了有靜態的元件擺設，我們還可以作到某些程度簡單的使用者互動。因此你可以想像這樣子的一些設定可以藉著使用storyboard將原本是程式碼中該作的部份由拖拉的方式完成。這樣除了對初學者來說可以減少一些寫Objective C/cocoa framework所需要花費的精力之外，我們還可以在storyboard中看到這些ViewController分鏡的過程，這樣其實對整個專案的使用者介面應該可以有更好的掌握。

後記
隨著iPhone4S的上市，基於iOS5的裝置會愈來愈普及，在之後的文章中，我們會陸陸續續和各位討論iOS5新增的功能與開發者該注意的事項。