（譯）Getting Started——1.2.4 Tutorial：Storyboard（故事板）

    該教程是基於你在前面的課程中構建的項目上進行的。學完本教程後，你將使用你前面學到的視圖、視圖控制器、動做、導航的內容，還會爲應用建立一些關鍵的用戶界面，並在場景中添加行爲

    如下就是本節課的內容：

    1. 使用storyboard來定義應用內容和流程

    2. 管理多個視圖控制器

    3. 在用戶界面上，給元素添加動做

    完成本節教程後，你的應用應該以下所示：

建立第二個場景

    到如今爲止，你所操做的只是一個由視圖控制器管理的單場景，它就是一個能夠把事件添加到待辦事件列表的頁面，即添加事件的場景。如今，是時候建立列表了。幸運的是，IOS已經內置了一個功能強大的類：table view（UITableView），該類用於顯示能夠滾動的列表項。

    在storyboard的場景中添加表格的步驟：

    1. 在項目導航器中，選擇Main.storyboard。若是項目導航器被關閉了，點擊Xcode toolbar上的Navigator按鈕就能夠打開它：

    若是助手編輯器是打開的，那麼點擊Standard按鈕就能夠關閉它。

    2. 在utility區域打開對象庫。

    3. 在對象庫的搜索框中，輸入table view controller，快速找到該對象。

    4. 從列表中把一個Table  View Controller對象拖動到畫布上。若是有須要，你可使用菜單：Editor > Canvas > Zoom，對場景進行縮小。若是當你試圖把一個table view拖動到畫布上來，可是沒有拖動成功時，你頗有可能拖動的是table view，而不是table view controller。

    如今，storyboard中已經有兩個場景了，一個用於顯示待辦列表，一個用於添加待辦事項：

    當用戶打開應用時，應該先看到待辦列表，所以，你能夠把table view controller設置爲開始場景，具體的作法是：

    把添加事件場景前的入口點拖動放到待辦列表的場景前。

    如今，table view controller被設置爲初始的視圖控制器了，它做爲應用啓動後加載的第一個場景。

    注意：如今你運行項目，你看到的應該是一個空的table view——即頁面被水平線分隔爲一行一行，可是每一行上沒有任何內容。

在table view中顯示靜態的內容

    由於你尚未學習數據的存儲，所以，如今建立和存儲要在列表上顯示的數據還爲時過早。可是，你的界面上也是不非得須要真實的數據。Xcode中，你能夠給Interface Builder中的table view建立一些靜態的內容。這樣的方式去看界面長什麼樣子，就簡單省事多啦，你還可使用這種辦法來嘗試更多的想法哦。

    在table view中建立靜態單元格：

    1. 若是有須要，打開outline view

    2. 在outline view中，選擇位於Table view controller下方的Table view

    3. 選中table view，打開utility區域的Attributes inspector

    4. 在Attributes inspector中，在Content option的彈出菜單中，選擇 Static Cells。在storyboard中的table view中會出現空的三個表格單元格

    5. 在outline view中，選擇最上面的單元格

    6. 在Attributes inspector中，在Style option彈出的菜單中，選擇Basic。Basic樣式中，包含了一個label，所以，Xcode會在單元格中建立一個label，label上的文字是Title。

    7. 選擇outline view中的label：

    8. 在Attributes inspector中，把label的文本修改成「修剪草坪」。輸入完成後，按下return鍵或在utility區域單擊就能夠看到效果。

    9. 或者，你也能夠在label控件上雙擊對文本進行修改。

    10. 給其它兩個單元格重複上述4~7步，輸入其它的待辦事項。

    11. 建立足夠多的單元格（多於一頁），建立的方式可使用複製、粘貼，也能夠拖動。

    檢查點：運行應用。你會看見你在Interface Builder中添加的東東，由於表格裏的內容已經超過一屏了，你能夠來回滾動感受下。在模擬器的屏幕上，你會發現表格裏的內容仍然正常顯示。使用table view，默認會有不少的行爲。你確定注意到了：最上面的單元格已經蓋住了設備的狀態欄——也就是顯示時間、電量和手機其它信息的區域。這是個問題，不過不用擔憂，後面教程中會修復的。

添加segue來向前導航

    是時候給table view添加導航了，添加導航後，用戶能夠從列表頁面跳轉到上節教程中製做的添加待辦事項的頁面。咱們在Defining the Interaction（定義交互）章節中已經講過，兩個場景之間的轉換被稱做segue。

    在建立segue以前，須要對場景進行一番配置。首先，把table view controller包裹在navigation controller中。還記得Defining the Interaction（定義交互）章節講到的內容嗎？navigation controller會提供一個導航條，並保存了對導航棧的跟蹤。接下來，將在導航條上添加一個按鈕，用於跳轉到添加待辦事項的場景。

    在table view controller中添加navigation controller須要如下幾個步驟：

    1. 在outline view中，選中Table view controller

    2. 選中table view controller，選擇菜單：Editor > Embed In > Navigation Controller

    進行完上述操做後，Xcode就會給storyboard中添加一個新的navigation controller，給它設置storyboard的入口點，在新的navigation controller和已經存在的table view controller之間建立一個關係。

 

    在畫布中，若是你選中鏈接兩個場景的圖標，你就會在outline view下方的navigation controller中看到relatioinship root view controller to table view controller的字樣。這就意味着顯示在導航條下的內容視圖將是table view。storyboard的入口點被設置給了navigation controller，這是由於應用中全部顯示的內容，都在navigation controller裏。navigation controller既是待辦列表場景的容器，又是添加待辦事項場景的容器。

    檢查點：運行應用。在table view的上面，你會看到一塊額外的空間，它就是由navigation controller提供的導航條。導航條把它的背影擴展到了頂部的狀態欄上了，所以，狀態欄不會再遮蓋你的內容了。

    接下來，要在導航條上添加一個待辦列表的標題和一個添加待辦的按鈕。導航條從navigation controller中顯示的視圖控制器中獲取標題——導航條本身是沒有標題的。所以，你給待辦列表的導航項（table view controller）添加標題，而不是直接給導航條添加標題。

    添加標題的步驟以下：

    1. 在outline view或在畫布上，選中table view controller下的navigatioin item：

    2. 在attributes inspector的Title字段中，鍵入待辦列表，而後單擊return鍵。這時，Xcode會自動把該場景的描述由Table View Controller改變爲待辦列表，這樣，你就更加方便去定位這個場景了。在outline view中顯示的描述以下：

    3. 在對象庫中，找到Bar Button Item對象。

    4. 拖動一個Bar Buttom Item對象，把它放置到table view controller中導航條的右邊，這樣，文字爲Item的按鈕就出面在導航條上了。

    5. 在outline view或在畫布上，選中bar button item。

    6. 在attributes inspector中，在Bar Button Item節中找到Identifier選項，從它的彈出菜單中選擇Add菜單。這時，按鈕的樣子就變爲Add按鈕了（+）。

    檢查點：運行應用。這時，導航條應該有一個標題，並顯示添加按鈕。可是，點擊按鈕是沒有任何反應的。

    使用添加按鈕的意圖是引出添加待辦事項的場景。該場景已經在前面的教程中建立了，可是它尚未鏈接到其它的場景上。你須要配置添加按鈕，使得當用戶按下按鈕時，頁面能夠跳轉到添加待辦事項的頁面。爲了實現上述效果，你應該這樣作：

    1. 在畫布上，選中添加按鈕

    2. 按住Control，從按鈕上一直拖動到添加待辦事項的視圖控制器

    在拖動結束的位置，會出現一個快捷菜單：

    Action Segue菜單可讓你選擇：當用戶點擊添加待辦事項按鈕時，你須要使用哪一種類型的segue，來從待辦列表過渡到添加待辦事項頁面。

    3. 從Action Segue菜單中，選擇show

    Xcode配置segue，設置在navigation controller中顯示添加待辦事項的視圖控制器，在Interface Builder中，你將會看到導航條

    檢查點：運行應用。點擊添加按鈕，頁面就會從table view視圖控制器導航到添加待辦事項視圖控制器。由於你使用了帶有show segue的navigation controller，所以，系統爲你把返回導航的操做給處理了。這就意味着若是你點擊返回按鈕，頁面就會回到列表頁面。

    你經過使用show segue獲得的push-style類型的導航的效果與你想象的有所不一樣。push navigation被設計爲向下攥取的界面，在該界面上，你能夠提供有關用戶選擇東東的更多信息。再者，添加操做通常是一個模態的操做——用戶執行完整、獨立的動做，而後從這個場景返回到主導航。這種類型場景恰當的展示方法應該是modal segue。

    不要刪除已經存在的segue，也不要建立一個新的segue，把segue的類型改成modal就能夠了。與storyboard中大多數可選的元素同樣，你能夠在Attributes inspector面板中添加segue的屬性。

    改變segue類型：

    1. 在outline view或在畫布上，選擇從table view controller到添加待辦事項的view controller的segue。

    2. 在Attributes inspector中，在segue選項的彈出菜單中，選擇Present Modally。

    由於模態的視圖控制器，沒有被添加到導航棧中，所以，它不會從table view controller的navigation controller中得到導航條。可是，你可能會想在模態的視圖控制器上也顯示導航條，這樣，會給用戶一個統一的視覺效果，你能夠這樣作：當模態出現時，給添加待辦事項的視圖控制器添加一個導航條，把它嵌在本身的navigation controller中：

    給添加待辦事項視圖控制器添加導航控制器的作法：

    1. 在outline view中，選中View Controller

    2. 選擇Editor > Embed In > Navigation Controller

    與前面講過的同樣，Xcode添加了一個導航控制器，並在view controller的最上面顯示導航條。下面，給這個導航條配置一個標題和兩個按鈕：取消、保存。隨後，再給這兩個按鈕添加事件。

    配置添加待辦事項視圖控制器的導航條：

    1. 在outline view或在畫布上，選中view controller下的navigation item

    2. 在Attributes inspector的title字段裏，鍵入添加待辦事項文字。Xcode會自動把視圖控制器場景的描述改變爲添加待辦事項場景，這樣會讓你定位起來更加方便，以下圖所示：

    3. 從對象庫中拖動一個Bar Button Item對象，把它放在添加待辦事項視圖控制器的右邊

    4. 在Attributes inspector的Identifier選項中，從彈出菜單裏選擇Save，這時，按鈕上的文本就變爲Save

    5. 再從對象庫中拖動一個Bar Button Item對象，把它放在添加待辦事項視圖控制器的左邊    

    6. 在Attributes inspector的Identifier選項中，從彈出菜單裏選擇Cancel，這時，按鈕上的文本就變爲Cancel

    檢查點：運行應用。單擊新增按鈕。你所看到的仍然是添加待辦事項場景，可是，該場景再也不是導航條上有返回按鈕的場景了，相反，你會看到你剛剛添加的兩個按鈕：Save和Cancel。如今，這兩個按鈕尚未連接到任何的動做上，所以你點擊按鈕時不會有任何的反應。接下來的任務就是：給這兩個按鈕配置完成或取消新增待辦事項的編輯，而且返回到待辦列表。

 

建立自定義的視圖控制器

    到目前爲止，一行代碼都沒有寫，就已經完成了全部的配置。要完成添加待辦事項視圖控制器的配置，須要寫一些代碼，還要找個地方存放這些代碼。

    項目建立成功後，響應添加待辦事項視圖控制器的代碼就生成了，是在ViewController.h和ViewController.m文件中。這兩個文件是自定義的視圖控制器，做爲Single View Application模板的一部分，在項目建立的同時一同被建立。可是，學習如何本身動手建立和配置視圖控制器是很是重要的，由於這是IOS應用開發的經常使用功能。因此，如今須要建立一個名爲AddToDoItemViewController的視圖控制器，用於響應stroyboard中的添加待辦事項的場景。AddToDoItemViewController是ViewController的子類，所以，在它裏面能夠獲取到視圖控制器全部的基本功能。

    若是你願意的話，你甚至能夠刪除ViewController.h和ViewController.m文件，這是由於在這個教程中，它們根本沒有做用。刪除的方法是：在項目導航器中，選擇要刪除的文件，按下Delete鍵，在出現的對話框中，點擊Move to Trash選項。

    建立自定義的視圖控制器：

    1. 選擇菜單：File > New > File，或者使用Command + N快捷鍵

    2. 在彈出的對話框的左邊，在IOS節中選擇Source

    3. 選擇Cocoa Touch Class，單擊下一步

    4. 在Class字段內，輸入AddToDoItem

    5. 在Subclass的彈出菜單中，選擇UIViewController，類的標題就變成AddToDoItemViewController了，Xcode這樣命名的目的是爲了看得更清楚一些。

    6. 確保Also create XIB file選項沒有被勾選

    7. 確保Language選項選擇的是Objective-C

    8. 點擊Next按鈕。文件默認的存儲位置是在項目的目錄中。Group選項默認是應用的名稱。

    9. 保持其它選項的值爲默認值，點擊Create。

    完成上述步驟後，Xcode就建立了兩個文件：AddToDoItemViewController.h（接口文件）和AddToDoItemViewController.m（實現文件）文件。

    這樣，你就已經建立了自定義的視圖控制器了，還有一步很重要，你得告訴storyboard去使用這個視圖控制器：你得把添加待辦事項場景由原來使用的ViewController換爲AddToDoItemViewController。

    更換的方法：

    1. 在項目導航器中，選中Main.storyboard

    2. 若是須要，請打開outline view

    3. 在outline view中，在添加待辦事項場景下，選中View Controller

    4. 在utility區域，單擊第三個圖標，打開Identity inspector

    indentity inspector可讓你編輯storyboard中，與對象的identity相關的對象的屬性，例如對象屬於哪一個類。

    5. 打開Class選項的彈出菜單，彈出菜單中的內容是全部Xcode能夠識別的視圖控制器的列表。列表中的第一個元素應該就是你自定義的視圖控制器：AddToDoItemViewController

    6. 爲該場景選擇使用AddToDoItemViewController

 

    注意：在outline view中，Xcode改變了添加待辦事項視圖控制器的描述，從View Controller變爲添加待辦事項。Xcode的這種做法使得自定義的類更容易被理解。

    在運行時，故事板會建立AddToDoItemViewController類的實例，即自定義視圖控制器的子類。應用中添加待辦事項的場景將獲取storyboard中定義的界面和定義在AddToDoItemViewController.m中的行爲。

    如今能夠在故事板中建立一個響應待辦列表場景的自定義類了。由於，待辦列表場景是一個table view controller，所以，它的類是UITableViewController類的子類。一樣，UITableViewController也提供了視圖控制器的基本行爲，還有一些只能被table view使用的行爲。

    建立UITableViewController的子類：

    1. 選擇菜單：File > New > File，或者使用Command + N快捷鍵

    2. 在左邊IOS節下的Source中，選擇Cocoa Touch Class

 

    3. 單擊Next

    4. 在Class字段中，輸入ToDoList

    5. 在Subclass of的彈出菜單中，選擇UITableViewController，類的標題就變爲ToDoListTableViewController了

 

    6. 確保Also create XIB file選項沒有被勾選

    7. 確保Language選項選擇的是Objective-C

    8. 點擊Next按鈕。文件默認的存儲位置是在項目的目錄中。Group選項默認是應用的名稱。

    9. 保持其它選項的值爲默認值，點擊Create。

    完成上述步驟後，Xcode就建立了兩個文件：ToDoListViewController.h（接口文件）和ToDoListViewController.m（實現文件）文件。

    爲待辦列表場景配置Identity：ToDoListViewController：

    1. 在項目導航器中，選擇Main.storyboard

    2. 在outline view中，選擇待辦列表場景下的Table view controller，而後打開utility區域的Identity inspector面板

    3. 從Class選項的彈出菜單中，選擇ToDoListViewController

    好了，能夠給你本身的視圖控制器添加代碼了。

給返回的導航添Unwind Segue

    除了show和modal類型的segue，Xcode還提供了unwind類型的segue。該類型的segue，可讓用戶從指定的場景返回到前一個場景，而且，當用戶返回到前一場景時，該類型的segue還爲本身編寫的代碼提供了執行的地方。咱們要從AddToDoItemViewController返回到ToDoListViewController，就須要使用該類型的segue。

    要建立unwind類型的segue，首先，須要給目標視圖控制器（即將要被展示的場景所使用的視圖控制器）添加一個方法，該方法的類型必須是IBAcion，參數類型爲UIStoryboardSegue。由於你想返回到待辦列表場景，所以，你須要按照上述的要求在ToDoListViewController的接口和實現文件中添加方法。

    添加方法的步驟：

    1. 在項目導航器中，打開ToDoListViewController.h文件

    2. 在@interface的下方，添加下面的代碼：

            - (IBAction)unwindToList:(UIStoryboardSegue *)segue;

    3. 在項目導航器中，打開ToDoListViewController.m文件

    4. 在@implementation下方，添加下面的代碼：

            - (IBAction)unwindToList:(UIStoryboardSegue *)segue {

 

            }

    你能夠把方法的名稱命名爲你喜歡的任意有效的名稱。示例中的方法名是：unwindToList，這樣命名的緣由是爲了從方法的名稱上就能夠看出方法的做用。在後面的項目中，都會採用相似的命名約定。

    如今，這個方法的實現體是空的。隨後，這個方法將被用於從AddToDoItemViewController中檢索數據，而後把檢索到的數據添加到待辦列表中。

    要建立unwind segue，並把它連接到Cancel和Save按鈕上。

    具體的作法是：

    1. 在項目導航器中，選中Main.storyboard

    2. 在畫布上，按鈕Control鍵，從Cancel按鈕上一直拖動到畫布頂部最右邊的Exit按鈕上：

    若是你在畫布的最上邊沒有找到Exit按鈕，而是找到了畫布的描述，那你就不停的使用Editor > Canvas > Zoom菜單，直到你能看見爲止。

    在拖動結束的地方，會出現一個菜單：

    3. 從快捷菜單中，選擇unwindToList。

    4. 這就是你剛剛添加到ToDoListTableViewController.m文件裏的動做。如今，若是用戶點擊Cancel按鈕，那麼，應該就會回到待辦列表頁面。這時，unwindToList方法被調用。

    5. 在畫布上，按住Control鍵，從Save按鈕拖動到Exit按鈕。

    在拖動結束的地方，會出現一個菜單：

    6. 在快捷菜單中，選擇unwindToList

    如今，當用戶點擊Save按鈕時，頁面就會跳轉到待辦列表場景，同時，unwindToList方法被調用。

    注意：Save和Cancel兩個按鈕使用了一樣的動做。在後面的教程中，將寫代碼來區分這兩種不一樣的狀況。

    檢查點：運行應用。剛啓動完成，你會看見一個table view——可是裏面沒有數據。單擊添加按鈕，應用就會從待辦列表頁面跳轉到添加待辦事項頁面。你能夠點擊添加待辦事項頁面的Save按鈕或Cancel按鈕，回到列表頁面。

    數據爲何不顯示了？table view有兩種獲取數據的方式——靜態、動態。若是table view的視圖控制器已經實現了必須的方法：UITableViewDataSource，那麼，table view數據來源就是視圖控制器，而無論在Interface Builder中是否配置了靜態數據。如今打開ToDoListTableViewController.m文件，你會在發現文件裏已經實現了三個方法——numberOfSectionsInTableView，tableView:numberOfRowsInSection，tableView:cellForRowIndexPath。在後面的教程中，將使用這三個方法來顯示動態數據。

回顧

    到如今爲止，你已經完成了應用界面的開發。應用一共有兩個場景——待辦列表，添加待辦事項，用戶還能夠在這兩個頁面之間來回導航。下一個模塊，就要實現添加待辦事項、瀏覽待辦列表的能力。