Your first iOS app（6）——Tutorial: Storyboards

Tutorial: Storyboards

教程：故事板

本教程建立在你在第一個教程 (Tutorial: Basics)中創建的對象的基礎上。你將利用你學過的關于視圖、視圖控制器、動作、以及導航的知識。跟隨第一個界面設計過程，你也會為你的ToDoList應用程序創建一些關鍵的用戶界面流，并且添加行為到你已經創建的場景中。

本教程將教你如何：

采用自動布局來靈活的添加用戶界面

使用故事板來定義app的內容和流程

管理多視圖控制器

添加動作給用戶界面里的元素

在你完成本教程所有的步驟之后，你將有一個如下所示的app：

Adopt Auto Layout

采用自動布局

添加待辦事宜項（add-to-do-item scene）場景被配置為在縱向模式下操作，因為你就是這樣創建它的。所以，如果用戶旋轉了設備會發生什么？嘗試在模擬器中選準你的app。

在iOS模擬器中旋轉

1.在iOS模擬器中啟動app。

2.選擇 Hardware > Rotate Left (或者 Command+Left Arrow).

正如你看到的，文本字段沒有正確顯示。它停留在接近屏幕中間的位置。文本字段應該橫穿過整個屏幕，就像在縱向模式中一樣。幸運的是，Xcode有一個強大的內建的布局引擎，稱為自動布局。通過自動布局，你可以按照你的意圖來放置屏幕中的元素，然后讓布局引擎決定實現這些意圖的最好方式。你使用約束（constraints，規定一個元素相對于另外一個元素的位置）來描述你的意圖，或者它的尺寸、或者當有東西減少他們的空間時兩個中哪個元素應該先收縮。對于add-to-do-item場景，有兩個約束被需要——一個是定位文本字段，另一個是設置它的大小。

在IB中可以很容易的設置這些約束（constraints）。

使用自動布局來定位文本字段

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

2.在故事板中選擇文本字段。

3.在畫布中，從文本字段內向上方的區域開始拖拽，結束在圍繞為本字段的空白區域。這個控件是文本字段的父視圖。
一個快捷菜單出現在你釋放拖動的位置。

4.從快捷按鈕中選擇 “Top Space to Top Layout Guide” 。
一個文本字段的頂部和導航條之間的間隔約束被創建。
如果出現不一樣的快捷菜單，可能菜單項是“Leading Space to Container”，這是應為垂直拖拽到屏幕頂部造成的，你的拖拽方向不同。Xcode使用拖拽方向來理解何種約束使你想要的，而且它使用拖拽的開始和結束點來理解那個對象被約束關聯。繼續嘗試不同的拖拽方向來看看各種可用的約束。

5.當你嘗試時，從文本字段的右側拖拽到父視圖，創建一個“Trailing Space to Container”約束。

6.從文本字段向左拖拽到父視圖，創建一個“Leading Space to Container” 約束。

這些約束指定文本字段的邊緣與它的父視圖之間的距離不會被改變。這就意味著如果設備方向變化，文本字段會自動的增長來滿足這些約束。

Checkpoint: 運行app。如果你旋轉設備，文本字段會隨著設備的旋轉而變化尺寸。

如果你沒有的到想要的行為，使用Xcode自動布局調試特性來幫助你。通過選中文本字段，選擇Editor > Resolve Auto Layout Issues > “Reset to Suggested Constraints”Xcode通過之前的步驟來設置約束。或者選擇Editor > Resolve Auto Layout Issues > Clear Constraints來移除所有的文本視圖的約束，然后重新按照上述步驟設置一遍。

雖然你添加的項目場景還不能做太多事情，但是基本的用戶界面和功能已經完成。從一開始就考慮布局可以確保你有一個堅實的構建基礎。

Creating a Second Scene

創建第二個場景

迄今為止，你一直是在一個通過視圖控制器管理的單一場景中工作，這個場景是一個讓你能夠在待辦事宜清單上添加項目的頁面。現在，是時候來創建一個用于顯示整個待辦事宜清單的場景了。幸運的是，iOS附帶一個強大的內建的類叫做表格視圖，它專門設計用來顯示滾動的表格項目。

創建一個帶有表格視圖的場景到你的故事板

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

2.在工具區打開對象庫。

3.從列表中拖拽表視圖控制器對象，把它放在畫布中 add-to-do-item場景的左側。如果你需要，你可以使用右下角的縮放按鈕來調整畫布大小使得有足夠的空間來拖拽它。如果你看到一個標示圖的內容，但當你視圖拖拽它到畫布的時候，沒有發生任何事，你或許拖動的是一個表視圖而不是表視圖控制器。表視圖是是表視圖控制管理的一個事物，但你想要整個封裝，所以你要查找表視圖控制器并將它拖動到畫布。

你現在有了兩個場景，一個顯示待辦事宜項目的清單，另外一個是添加待辦事宜項目。

當用戶啟動app的時候，首先要看到有意義的列表，所以告訴Xcode設置表視圖控制器為第一個場景。

設置表視圖控制器為初始化場景

1.如果必要，使用畫布左下角的按鈕來打開大綱視圖

2.在大綱視圖中，選擇最新添加的表視圖控制器。

3.在表視圖控制器選中的狀態下，打開在工具區的屬性檢查器

4.在屬性檢查器中，選擇初始化視圖控制器選項旁邊的復選框。


或者，你可以直接從XYZAddToDoItemViewController拖拽初始化場景指示器到畫布上表視圖控制器。
表視圖控制器在故事板中被設置為初始化視圖控制器，在app啟動的時候會被加載為第一個場景。

Checkpoint:運行app。你將看到的是一個空的表視圖，而不是add-to-do-item 場景。

在表視圖中顯示靜態的內容

因為你還沒有學過關于數據存儲的內容，創建和存儲待辦事宜事項和在表視圖中顯示它們還為時尚早。但你不需要真的數據原型來用于你的用戶界面。Xcode允許你在表視圖中創建靜態的內容。這使得更容易看到用戶界面如何行為，這是一個值得嘗試的不同方法。

在表格視圖中創建靜態的表視圖單元

1.在界面的大綱視圖中，選擇表視圖控制器下得表視圖。

2.在表視圖被選中的狀態下，打開位于工具區的屬性檢查器

3.在屬性檢查器中，內容選項旁邊的彈出菜單中選擇靜態表單元。
在你的表視圖中將出現三個空的表視圖單元。

4.在大綱視圖或者畫布中，選擇頂部的表單元。

5.在屬性檢查器中，從樣式選項旁邊的彈出菜單中選擇基礎（Basic）。
基礎樣式包括標簽，所以Xcode在表單元中創建一個文本為“Title”的標簽。

6.在大綱視圖或畫布中選擇這個標簽。

7.在屬性檢查器中，改變標簽的文本為“Mow the Lawn”。通過按回車鍵或是點擊工具區域以外的范圍來確定這個修改。
另外，你能夠通過雙擊來編輯標簽和直接編輯文本。

8.重復4-7的步驟來輸入其他表單元，給他們類似的待辦事宜項目。

9.創建足夠多得表單元來使項目超過屏幕。你能通過復制粘貼或者按住Option鍵加拖動來來創建新的表單元。

Checkpoint: 你將看到帶有預配置表單元得表視圖添加到IB中。看看當你滾動它是表視圖的感覺。嘗試旋轉模擬器設備——注意表視圖已經配置為恰當的內容。你通過使用表視圖來得到很多靈活的行為。

當你完成后，是時候為表視圖提供導航方法，×××事宜清單項目，到你創建的第一個場景，在哪里用戶創建新的待辦事宜項目。

添加一個繼續（Segue）來向前導航

你在故事板中配置了兩個視圖控制器，但是他們之間沒有聯系。關聯兩個場景被稱為繼續（segues）。

在創建一個segue之前，你需要配置你的場景。首先你要封裝你的XYZToDoListViewController到導航控制器。從Defining the Interaction 回憶導航控制器提供導航條并跟蹤導航棧。你將添加一個按鈕到這個導航條來轉換到XYZAddToDoItemViewController場景。

添加導航控制器到你的表視圖控制器

1.在大綱視圖選擇表視圖控制器。

2.在視圖控制器被選中的情況下選擇Editor > Embed In > Navigation Controller

Xcode添加一個新的導航控制器到你的故事板，為他集成初始化場景，并且創建一個新導航控制器和已存在的表視圖控制器之間的關系。在畫布中，如果你選擇兩個場景的連接圖標，你將看到它是根視圖控制器的關系。這意味著導航欄下面視圖顯示的內容是表視圖。初始化場景設置為導航控制器，因為導航控制器擁有你app中將被顯示的所有內容——它是待辦事宜清單和添加待辦事宜項目兩個場景的容器。

Checkpoint: 運行app。在表視圖上面你會看到一個額外的控件。這是導航控制器提供的導航條。

現在，你將添加一個標題和一個按鈕到導航條。

配置導航條

1.在大綱視圖中或畫布中，在表視圖控制器下面選擇導航項目。
導航條從當前導航控制器顯示的視圖控制中獲取他們的標題，他們本身沒有標題。你使用導航項設置你的待辦事宜列表的標題，而不是直接在導航條上設置

2.在屬性檢查器中，在標題字段中鍵入 My To-Do List。

3.如果必要，打開對象庫。

4.從列表中拖拽條按鈕到表視圖控制器的導航條右側。
在你拖拽條按鈕項目的地反，按鈕含有文本“Item”顯示。

5.在大綱視圖或畫布中選擇條按鈕（bar button）項目。

6.在屬性檢查其中，在 Bar Button項目區域找到Identifier選型。從Identifier彈出的菜單中選擇Add。
按鈕會改變成Add按鈕 (+)。

Checkpoint: 運行app。導航條將顯示一個標題和一個Add 按鈕。按鈕還不能做任何事，接下來你將修改它。

你想通過Add按鈕切換到add-to-do-item場景。這個changing已經被設置，但是沒有連接到其他場景。Xcode能夠輕松的設置Add按鈕，通過點擊它來切換到其他場景。

配置Add按鈕

1.在畫布中選中Add按鈕

2.按住Control從按鈕拖拽到add-to-do-item視圖控制器。


標題為Action Segue 的快捷菜單出現在釋放拖拽的位置。


這就是Xcode如何允許你選擇什么類型的segue，它體現當歐諾個戶點擊Add按鈕的時候，app是如何從 待辦事宜清單 轉換到 添加待辦事宜項 的。

3.從彈出菜單中選擇“push”。

Xcode設置segue和配置 待辦事宜項目 視圖控制器來被顯示在導航控制器中——你將在IB中看到導航控制器。

此時，你或許注意到在你的工程上的警告。繼續且打開導航問題來查看這個錯誤。

因為你增加 添加待辦事宜項 到導航棧，它現在顯示一個導航條。這個導航條導致你的文本字段向下移動，這意味著你之前設置的自動布局約束不再滿足。幸運的是，這個問題非常容易修復。

更新自動布局約束

1.在大綱視圖或是畫布中選中文本字段。

2.在畫布中，打開解決自動布局問題的彈出菜單，選擇Update Constraints。
或者，你能選擇Editor > Resolve Auto Layout Issues > Update Constraints。
約束被更新且Xcode警告消失。

Checkpoint: 運行app。你已經能夠通過點擊Add按鈕從表視圖轉換到 添加待辦事宜項目 視圖控制器。因為你使用帶有壓棧segue的導航控制器，向后導航將自動處理。這意味著你能夠通過點擊back按鈕來返回到表視圖。

壓入導航的工作就像它是應該、但當添加項目的時候它又不完全如你想要的那樣工作。壓入導航是為挖掘界面設計的，你要提供很多關于用戶如何選擇的信息。添加一個項目，在另一方面，是一個模態操作——用戶執行一些動作，這些操作是完整和獨立的，然后從場景返回到主導航。合適的方法展示這個場景類型是模態segue。

更改segue的類型

1.在大綱視圖或者畫布中，選擇從表視圖控制器到添加待辦事宜項視圖控制器的segue。

2.在屬性檢查器中，選擇類型選項旁邊的彈出菜單中選擇模態（Modal）。

因為模態視圖控制器不會添加到導航棧，它不會從表視圖控制器的導航控制器獲得一個導航條。但是，你想保持導航條支持用戶的視覺連續性。想要在顯示的時候，給添加待辦事宜項視圖控制器一個形式上的導航條，把它嵌入到它自己的導航控制器。

添加一個導航控制器到添加待辦事宜項視圖控制器

1.在大綱視圖中選擇視圖控制器。

2.在視圖控制器被選擇的狀態下，選擇Editor > Embed In > Navigation Controller。

和之前一樣，Xcode添加一個導航控制器和在視圖控制器頂部顯示一個導航條。接下來，配置這個條來添加一個標簽給這個場景以及兩個按鈕，取消和完成。之后，你將連接這兩個按鈕到動作。

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

1.在大綱視圖或者畫布中，選擇視圖控制器下的導航項。如果有必要，打開屬性檢查器。

2.在屬性檢查器中，在標題字段輸入Add To-Do Item。
Xcode更改對視圖控制器的描述，這個視圖控制器是從“View Controller”到“View Controller – Add To-Do Item”，來讓它更容易識別場景。這描述顯示在大綱視圖中。

3.從對象庫拖拽一個條按鈕到在add-to-do-item視圖控制器中的導航條的右側。

4.在屬性檢查其中，選擇從標識選項旁邊的彈出菜單中的Done。
按鈕的文本會變為“Done”。

5.從對象庫中拖拽另一個條按鈕項到 add-to-do-item視圖控制器總的導航條的左側。

6.在屬性檢查器中，選擇標識選項旁邊的彈出菜單的Cancel。
按鈕的文本會變為“Cancel”。

Checkpoint: 點擊Add按鈕。你還看到添加項目的的場景，但是沒有返回到待辦事宜清單的返回導航按鈕，你彈道的是兩個你添加的按鈕，Done和Cancel。這兩個按鈕還沒有連接任何動作，所以你能點擊它們，但是它們沒有任何動作。配置這些按鈕來完成或取消編輯一個新的待辦事宜項。

Create Custom View Controllers

創建自定義視圖控制器

你已經完成了所有的無需編程的配置。但是想要配置完成add-to-do-item視圖控制器需要一些代碼，你需要有一個地方來存放它。現在Xcode已經配置了add-to-do-item視圖控制器和表視圖控制器作為通用的視圖控制器。想要有一個地方來自定義代碼，你需要創建每個視圖控制器的子類，然后配置接口到這些子類。

首先，你將解決add-to-do-item視圖控制器場景。自定義視圖控制器類將被稱為XYZAddToDoItemViewController，因為這個視圖控制器將控制這個為你的待辦事宜清單添加新的項目的場景。

創建UIViewController子類

1.選擇 File > New > File (按 Command+N).

2.在左邊出現的對話框中，在iOS下選擇Cocoa Touch。

3.選擇Objective-C類，并且點擊Next。

4.在Class字段，在前綴XYZ后面輸入AddToDoItem。

5.在“Subclass of”彈出菜單里選擇UIViewController。
類標題改為“XYZAddToDoItemViewController.” Xcode幫助你明確命名，你創建了一個自定義的視圖控制器。

6.確保“Targeted for iPad” 和 “With XIB for user interface”選項沒有被選中。

7.點擊Next。

8.在默認位置保存你的項目。

9.組選項默認為應用程序名字，ToDoList。

10.Targets 區域在默認狀態下是不選中的。

11.點擊創建。

現在，你創建了一個自定義的視圖控制器子類，你需要告訴故事板來使用你的自定義類來替換通用視圖控制器。故事板文件是在app運行的時候被使用的對象的配置。app機器足夠聰明來為你把一般視圖控制器替代為你自定義的視圖控制器，但你需要告訴故事板這是你想要的。

確定你的類作為場景的視圖控制器

1.在工程導航器中選擇 Main.storyboard.

2.如有必要，打開大綱視圖 .

3.在大綱視圖中，選擇 “View Controller – Add To-Do Item”視圖控制器。
點擊 “View Controller – Add To-Do Item” 旁邊的三角形來顯示你的場景中的對象。第一個應該是視圖控制器。點擊它來選擇它。注意這個場景行有不同的圖標。

4.視圖控制器選擇，在工具區打開標識檢查器
標識檢查器在當你點擊工具區從左開始的第三個按鈕的時候出現。它讓你編輯在故事板中對象的屬性，例如什么類。

5.在身份檢查器中，打開Class選項旁邊的彈出按鈕。
你將看到一個Xcode知道的所有視圖控制器的類的列表。在列表中最近一個應該是你自定義的視圖控制器XYZAddToDoItemViewController。選擇它來告訴Xcode要在這個場景使用你的視圖控制器。

運行時，你的故事板將創建一個XYZAddToDoItemViewController的實例來代替通用的UIViewController。注意Xcode把對add-to-do-item視圖控制器場景的描述從 “View Controller – Add To-Do Item”改變為“Add To Do Item View Controller – Add To-Do Item.”Xcode指導你現在為這個場景使用的是自定義的視圖控制器，并且它解釋自定義類的名字，以便它更容易理解故事板中正在進行是什么。

現在，為表視圖控制器做相同的事情。

創建一個UITableViewController的子類

1.選擇 File > New > File (或按 Command+N).

2.在左邊，選擇iOS下的Cocoa Touch，然后選擇Objective-C Class。如果你還沒有在本教程自最近的步驟創建任何類的話，他或許已經為你選擇好了。

3.點擊 Next.

4.在Class字段，鍵入ToDoList。注意Xcode在XYZ，你的類的前綴，和ViewController之間作為插入點，鍵入名字。

5.在 “Subclass of”的彈出菜單中選擇UITableViewController。

6.確定“Targeted for iPad” 和 “With XIB for user interface”沒有被選中。

7.點擊 Next.
保存到默認位置。

8.Group保持默認的app的名字。

9.Targets 區域在默認狀態下是不選中的。

10.點擊 Create.

再一次確定你配置的自定義表視圖控制器XYZToDoListViewController在故事板中。

配置故事板

1.在工程導航器中選擇 Main.storyboard.

2.如果有必要，打開大綱視圖

3.在大綱視圖中，選擇表視圖控制器并在工具區打開身份檢查器

4.在身份檢查器中，從Class選項旁邊的彈出菜單中選擇XYZToDoListViewController

現在，你已經準備好添加自定義代碼到你的視圖控制器了。

Unwind a Segue to Navigate Back

展開Segue到Navigate Back

除了push和modal的segues，Xcode還提供了unwind segue。這個segue允許用戶從給定的場景返回之前的場景，并且它為你的代碼提供位置，這個代碼是當用戶在這些場景間進行導航的時候要被執行的。你可以使用unwind segue 來把XYZAddToDoItemViewController返回到XYZToDoListViewController。

Unwind segue是通過添加一個方法到目標視圖控制器來創建的（這個視圖控制器是你想讓unwind做的）。方法能被unwound不需要返回一個動作 (IBAction)，并且故事板的segue(UIStoryboardSegue)要作為參數。因為你想要unwind back 到XYZToDoListViewController，你需要添加一個帶有XYZToDoListViewController格式的實現的動作方法。

unwind back 到XYZToDoListViewController

1.在工程導航器中打開 XYZToDoListViewController.m.

2.在 @implementation 行下面添加如下代碼:

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

.

.{

.

.

.

.}

3.

4.

你可以為unwind動作隨意命名。稱之為unwindToList：可以清楚的表明unwind將帶你到何處。為了工程的今后，采取類似命名約定，一個名字能夠清楚的表明unwind將你帶往何處。

現在，離開這這個空的實現方法。稍后你將使用這個方法來檢索從XYZAddToDoItemViewController來的數據來添加一個項目到你的to-do-list。

創建unwind segue，將Cancel和Done按鈕連接到unwindToList: 動作，通過源視圖控制器XYZAddToDoItemViewController里的dock中的Exit圖標。

連接按鈕到unwindToList: action

1.在工程導航器中選擇 Main.storyboard.

2.在畫布中，從Cancel按鈕Control+拖拽到add-to-do-item場景dock中Exit項目。
如果你在場景dock中沒有看到Exit項目，但看到場景描述，點擊按鈕直到你看見它。
在拖動結束的位置出現一個菜單。

3.在快捷菜單中選擇unwindToList：。
這是你剛才添加到XYZToDoListViewController.m文件中的動作。這意味著當Cancel按鈕被點擊的時候，segue將unwind并且這個方法將被調用。

4.在畫布中，Control+拖拽，從Done按鈕到場景dock中的Exit項目。

5.從快捷菜單中選擇 unwindToList:。

注意，你為Cancel和Done按鈕使用相同的方法。在下一個教程中，你將區別這兩種不同的情況，當你在寫處理unwind segue的方法的時候。

Checkpoint: 運行app。啟動后，你將看到一個表視圖，但這里沒有數據。你能點擊Add按鈕并從XYZToDoListViewController導航到XYZAddToDoItemViewController。你能點擊Cancel和Done按鈕來返回到表視圖。

那么為什么你不能顯示數據？表示圖有兩種途徑來獲得數據，靜態和動態。當表視圖的控制器實現請求的UITableViewDataSource方法，表視圖請求它的視圖控制器來顯示數據，不管靜態數據在IB中是否已經被配置。如果你查看XYZToDoListViewController.m，你將注意到三個實現方法——numberOfSectionsInTableView:, tableView:numberOfRowsInSection:, 和 tableView:cellForRowAtIndexPath:。你能通過把這三個方法添加注釋來重新顯示靜態數據。如果喜歡你可以繼續嘗試。

Recap

回顧

至此，你完成了app界面的開發。你有了兩個場景——一個用來添加項目到待辦事宜清單，另一個顯示這個清單——并且你能在他們之間進行導航。接下來，你將實現添加待辦事宜項目和顯示這個清單的功能。在下個模塊中會覆蓋數據操作和行為實現。

Defining the Interaction

Incorporating the Data

Copyright 2014 Apple Inc. All rights reserved. Terms of Use | Privacy Policy | Updated: 2013-10-22