About Storyboard

這篇的主題主要是來討論在 Xcode 4.2 中新的功能或是概念。有一個新的檔名，Storyboard。看名字就知道這個檔要表達的，就是一個故事，就是 App 要說的事情，換句話說，看了這個檔的內容大概就可以掌握整個 App 想要做的事。OK。
由於我個人喜歡從簡單到難，所以接下來的例子，就從一個最簡單的 Template 開始：Empty Application.
如下畫面，在開啟新專案的時候選擇 Empty Application。

就命名為 MyFirst5，記得勾選 Use Automatic Reference Counting 如下所示.

存完檔之後呢，會發現。竟然沒有 Storyboard 檔，果然是 Empty。

如果這個時候比較心急的朋友，直接 Run。當然是看到如下的畫面

好吧，我們來新增自己的 Storyboard。新增 File，然後選擇 User Interface -> Storyboard

命名為 MyStory 好啦。在專案裡就會出現這個 Storyboard 檔。

而且在右側的編輯區當然也是什麼東西都沒有。第一步就是加入一個 View Controller。從 Inspector Library 拉一個 View Controller 到 MyStory.storyboard。

首先你會看到一個白色的畫面和一個向右的箭號。
 

因為在 Storyboard 上面可以放置很多個 View Controller。要有這個箭號表示，Storyboard 第一個要執行的 View Controller。接著我們要在這個 View Controller 白色的 View 上面放上一個 Label。從 Library 拉一個 Label放到上面。如下圖所示。

所以我們預期執行的時候可以呈現上面那張圖。但是在此時執行的結果，如下圖。還是白白一張。

最目前為止？還少了什麼呢？想想。剛剛新增了 Storyboard，但是還沒有和 Xcode 說，也就是說沒有設定在這個專案的設定檔裡。專案的設定檔都是  info.plist。在這個專案就是。MyFirst5-info.plist 如下圖可以找到。

在其內容設定裡新增一個設定，Main storyboard file base name 寫上 MyStory 如下圖所示。

寫上Storyboard 名稱，再執行。發現。還是白白的一張。

 好吧，該設定的都設定了，還少了什麼嗎？其實還是少了去檢查，執行的時候會去做的事。也就是說到目前為止，都是靜態的設定，執行的時候會先去執行什麼 method 呢？答案就是 xxxAppDelegate.m 裡的application:didFinishLaunchingOptions:。看看裡面的內容。

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
     self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
// Override point for customization after application launch.
     self.window.backgroundColor = [UIColor whiteColor];
     [self.window makeKeyAndVisible];
return YES;
}

原在這個 Method 裡 self.window 又被改掉，當然就無法顯示出 Storyboard 加的 Label。建議就直接 Mark / Comment 如下所示：

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    //self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    self.window.backgroundColor = [UIColor whiteColor];
    [self.window makeKeyAndVisible];
    return YES;
}

再執行就可以看到如下的畫面了。