讀書筆記【2】初探Storyboard

SuperDanny發表於2017-12-13

以前一直使用xib，後來來到新公司就使用純程式碼。從來沒有用過Storyboard（中文稱故事板），今天趁有幾分興致，在學習繪圖的同時練練故事板。這裡做一下筆記，方便以後檢視。如果大家有什麼Storyboard使用技巧可以留言分享喲！

建立一個基於Navigation Controller的根檢視

首先，我們選中預設生成的View Controller，在Editor -> Embed In 中有Navigation Controller和Tab Bar Controller兩個選項（圖一），我們選擇嵌入Navigation Controller。
另外拖一個Table View Controller到故事板中，選中Table View Controller的Table View。開啟Attrbutes inspector，將Content設定為Static Cells，layout area中的Table View上出現了3個Cell。
我們依次給每一個Cell設定不同的背景顏色，並依次選中3個Table View Cell，然後在Attributes inspector中將他們的Style改成Basic並給每一個Cell設定標題（圖二）。

繫結跳轉事件

腦補時刻，先講解一下一些關鍵的跳轉事件

Selection Segue：當使用者點選table view cell的任何部分，都會產生反應。

Accessory Action：只有當使用者點選table view cell右邊的圓圈箭頭按鈕時，才會產生的反應。

Show：在master或detail區域展現內容(典型的如iPad的設定介面，左側是master，右側是detail)，究竟是在哪個區要取決於螢幕上的內容，如果不分master/detail，就單純的把新的內容push到當前view controller stack的頂部

Show Detail：大致同Show，在detail區域展現內容，如果不分master/detail，新的內容取代當前view controller stack的頂部

Present Modally：模態展示內容

Present as Popover：在當前的view上出現一個小視窗來展示內容，無處不在的“選中文字後出現複製/翻譯按鈕就是這個

Custom：自定義的

我們選中第一個Cell，按住Control鍵拖拉到要跳轉的檢視，在彈出的選項窗中選擇show，這樣就完成了頁面跳轉操作。接下來2個Cell也是同樣的操作。

修改Navigation Bar標題

在Table View Controller上中選中Navigation Item（圖三）。
將Attributes inspector中Title設定為“繪圖技術”，將Back Button設值為“繪圖”（圖四）。

注意，這裡的Back Button並不是顯示在當前的Navigator Bar上的，而是顯示在下一個sub view controller的navigator bar上的返回按鈕的文字

ViewController

ViewController之間的資料傳遞

當你從當前scene中觸發一個segue的時候，系統會自動呼叫prepareForSegue:sender:這個方法。如果你想從一個介面切換到裡另一個介面的時候傳遞資料，你應該override這個方法。比如：檢視A -> 檢視B

- (void)prepareForSegue:(nonnull UIStoryboardSegue *)segue sender:(nullable id)sender {
    ThreeViewController *b_vc = segue.destinationViewController;
    //我們傳遞了一個字串到檢視B
    b_vc.str = @"dataStr";
}
複製程式碼

ViewController之間的跳轉

在上文中我提及到通過繫結事件進行ViewController之間的跳轉。這裡羅列一下有三種情況可進行跳轉：

如果在Storyboard中當前的ViewController和要跳轉的ViewController之間的segue存在，則可以執行performSegueWithIdentifier:sender:這個方法實現跳轉。
如果目標ViewController存在Storyboard中，但是沒有segue。你可以通過UIStoryboard的instantiateViewControllerWithIdentifier:這個方法獲取到它，然後再用你想要的方式實現跳轉，如：壓棧。
如果目標ViewController不存在，則需要我們建立好ViewController才能進行接下來的操作。