Tutorial: Storyboards

創(chuàng)新互聯(lián)是一家專業(yè)提供松江企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、H5技術(shù)、小程序制作等業(yè)務(wù)。10年已為松江眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)的建站公司優(yōu)惠進(jìn)行中。

教程：故事板

本教程建立在你在第一個(gè)教程 (Tutorial: Basics)中創(chuàng)建的對(duì)象的基礎(chǔ)上。你將利用你學(xué)過(guò)的關(guān)于視圖、視圖控制器、動(dòng)作、以及導(dǎo)航的知識(shí)。跟隨第一個(gè)界面設(shè)計(jì)過(guò)程，你也會(huì)為你的ToDoList應(yīng)用程序創(chuàng)建一些關(guān)鍵的用戶界面流，并且添加行為到你已經(jīng)創(chuàng)建的場(chǎng)景中。

本教程將教你如何：

采用自動(dòng)布局來(lái)靈活的添加用戶界面

使用故事板來(lái)定義app的內(nèi)容和流程

管理多視圖控制器

添加動(dòng)作給用戶界面里的元素

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

Adopt Auto Layout

采用自動(dòng)布局

添加待辦事宜項(xiàng)（add-to-do-item scene）場(chǎng)景被配置為在縱向模式下操作，因?yàn)槟憔褪沁@樣創(chuàng)建它的。所以，如果用戶旋轉(zhuǎn)了設(shè)備會(huì)發(fā)生什么？嘗試在模擬器中選準(zhǔn)你的app。

在iOS模擬器中旋轉(zhuǎn)

1.在iOS模擬器中啟動(dòng)app。

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

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

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

使用自動(dòng)布局來(lái)定位文本字段

1.在項(xiàng)目導(dǎo)航器中選擇Main.storyboard.

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

3.在畫布中，從文本字段內(nèi)向上方的區(qū)域開始拖拽，結(jié)束在圍繞為本字段的空白區(qū)域。這個(gè)控件是文本字段的父視圖。
一個(gè)快捷菜單出現(xiàn)在你釋放拖動(dòng)的位置。

4.從快捷按鈕中選擇 “Top Space to Top Layout Guide” 。
一個(gè)文本字段的頂部和導(dǎo)航條之間的間隔約束被創(chuàng)建。
如果出現(xiàn)不一樣的快捷菜單，可能菜單項(xiàng)是“Leading Space to Container”，這是應(yīng)為垂直拖拽到屏幕頂部造成的，你的拖拽方向不同。Xcode使用拖拽方向來(lái)理解何種約束使你想要的，而且它使用拖拽的開始和結(jié)束點(diǎn)來(lái)理解那個(gè)對(duì)象被約束關(guān)聯(lián)。繼續(xù)嘗試不同的拖拽方向來(lái)看看各種可用的約束。

5.當(dāng)你嘗試時(shí)，從文本字段的右側(cè)拖拽到父視圖，創(chuàng)建一個(gè)“Trailing Space to Container”約束。

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

這些約束指定文本字段的邊緣與它的父視圖之間的距離不會(huì)被改變。這就意味著如果設(shè)備方向變化，文本字段會(huì)自動(dòng)的增長(zhǎng)來(lái)滿足這些約束。

Checkpoint: 運(yùn)行app。如果你旋轉(zhuǎn)設(shè)備，文本字段會(huì)隨著設(shè)備的旋轉(zhuǎn)而變化尺寸。

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

雖然你添加的項(xiàng)目場(chǎng)景還不能做太多事情，但是基本的用戶界面和功能已經(jīng)完成。從一開始就考慮布局可以確保你有一個(gè)堅(jiān)實(shí)的構(gòu)建基礎(chǔ)。

Creating a Second Scene

創(chuàng)建第二個(gè)場(chǎng)景

迄今為止，你一直是在一個(gè)通過(guò)視圖控制器管理的單一場(chǎng)景中工作，這個(gè)場(chǎng)景是一個(gè)讓你能夠在待辦事宜清單上添加項(xiàng)目的頁(yè)面。現(xiàn)在，是時(shí)候來(lái)創(chuàng)建一個(gè)用于顯示整個(gè)待辦事宜清單的場(chǎng)景了。幸運(yùn)的是，iOS附帶一個(gè)強(qiáng)大的內(nèi)建的類叫做表格視圖，它專門設(shè)計(jì)用來(lái)顯示滾動(dòng)的表格項(xiàng)目。

創(chuàng)建一個(gè)帶有表格視圖的場(chǎng)景到你的故事板

1.在項(xiàng)目導(dǎo)航器中選擇Main.storyboard.

2.在工具區(qū)打開對(duì)象庫(kù)。

3.從列表中拖拽表視圖控制器對(duì)象，把它放在畫布中 add-to-do-item場(chǎng)景的左側(cè)。如果你需要，你可以使用右下角的縮放按鈕來(lái)調(diào)整畫布大小使得有足夠的空間來(lái)拖拽它。如果你看到一個(gè)標(biāo)示圖的內(nèi)容，但當(dāng)你視圖拖拽它到畫布的時(shí)候，沒有發(fā)生任何事，你或許拖動(dòng)的是一個(gè)表視圖而不是表視圖控制器。表視圖是是表視圖控制管理的一個(gè)事物，但你想要整個(gè)封裝，所以你要查找表視圖控制器并將它拖動(dòng)到畫布。

你現(xiàn)在有了兩個(gè)場(chǎng)景，一個(gè)顯示待辦事宜項(xiàng)目的清單，另外一個(gè)是添加待辦事宜項(xiàng)目。

當(dāng)用戶啟動(dòng)app的時(shí)候，首先要看到有意義的列表，所以告訴Xcode設(shè)置表視圖控制器為第一個(gè)場(chǎng)景。

設(shè)置表視圖控制器為初始化場(chǎng)景

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

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

3.在表視圖控制器選中的狀態(tài)下，打開在工具區(qū)的屬性檢查器

4.在屬性檢查器中，選擇初始化視圖控制器選項(xiàng)旁邊的復(fù)選框。


或者，你可以直接從XYZAddToDoItemViewController拖拽初始化場(chǎng)景指示器到畫布上表視圖控制器。
表視圖控制器在故事板中被設(shè)置為初始化視圖控制器，在app啟動(dòng)的時(shí)候會(huì)被加載為第一個(gè)場(chǎng)景。

Checkpoint:運(yùn)行app。你將看到的是一個(gè)空的表視圖，而不是add-to-do-item 場(chǎng)景。

在表視圖中顯示靜態(tài)的內(nèi)容

因?yàn)槟氵€沒有學(xué)過(guò)關(guān)于數(shù)據(jù)存儲(chǔ)的內(nèi)容，創(chuàng)建和存儲(chǔ)待辦事宜事項(xiàng)和在表視圖中顯示它們還為時(shí)尚早。但你不需要真的數(shù)據(jù)原型來(lái)用于你的用戶界面。Xcode允許你在表視圖中創(chuàng)建靜態(tài)的內(nèi)容。這使得更容易看到用戶界面如何行為，這是一個(gè)值得嘗試的不同方法。

在表格視圖中創(chuàng)建靜態(tài)的表視圖單元

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

2.在表視圖被選中的狀態(tài)下，打開位于工具區(qū)的屬性檢查器

3.在屬性檢查器中，內(nèi)容選項(xiàng)旁邊的彈出菜單中選擇靜態(tài)表單元。
在你的表視圖中將出現(xiàn)三個(gè)空的表視圖單元。

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

5.在屬性檢查器中，從樣式選項(xiàng)旁邊的彈出菜單中選擇基礎(chǔ)（Basic）。
基礎(chǔ)樣式包括標(biāo)簽，所以Xcode在表單元中創(chuàng)建一個(gè)文本為“Title”的標(biāo)簽。

6.在大綱視圖或畫布中選擇這個(gè)標(biāo)簽。

7.在屬性檢查器中，改變標(biāo)簽的文本為“Mow the Lawn”。通過(guò)按回車鍵或是點(diǎn)擊工具區(qū)域以外的范圍來(lái)確定這個(gè)修改。
另外，你能夠通過(guò)雙擊來(lái)編輯標(biāo)簽和直接編輯文本。

8.重復(fù)4-7的步驟來(lái)輸入其他表單元，給他們類似的待辦事宜項(xiàng)目。

9.創(chuàng)建足夠多得表單元來(lái)使項(xiàng)目超過(guò)屏幕。你能通過(guò)復(fù)制粘貼或者按住Option鍵加拖動(dòng)來(lái)來(lái)創(chuàng)建新的表單元。

Checkpoint: 你將看到帶有預(yù)配置表單元得表視圖添加到IB中。看看當(dāng)你滾動(dòng)它是表視圖的感覺。嘗試旋轉(zhuǎn)模擬器設(shè)備——注意表視圖已經(jīng)配置為恰當(dāng)?shù)膬?nèi)容。你通過(guò)使用表視圖來(lái)得到很多靈活的行為。

當(dāng)你完成后，是時(shí)候?yàn)楸硪晥D提供導(dǎo)航方法，×××事宜清單項(xiàng)目，到你創(chuàng)建的第一個(gè)場(chǎng)景，在哪里用戶創(chuàng)建新的待辦事宜項(xiàng)目。

添加一個(gè)繼續(xù)（Segue）來(lái)向前導(dǎo)航

你在故事板中配置了兩個(gè)視圖控制器，但是他們之間沒有聯(lián)系。關(guān)聯(lián)兩個(gè)場(chǎng)景被稱為繼續(xù)（segues）。

在創(chuàng)建一個(gè)segue之前，你需要配置你的場(chǎng)景。首先你要封裝你的XYZToDoListViewController到導(dǎo)航控制器。從Defining the Interaction 回憶導(dǎo)航控制器提供導(dǎo)航條并跟蹤導(dǎo)航棧。你將添加一個(gè)按鈕到這個(gè)導(dǎo)航條來(lái)轉(zhuǎn)換到XYZAddToDoItemViewController場(chǎng)景。

添加導(dǎo)航控制器到你的表視圖控制器

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

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

Xcode添加一個(gè)新的導(dǎo)航控制器到你的故事板，為他集成初始化場(chǎng)景，并且創(chuàng)建一個(gè)新導(dǎo)航控制器和已存在的表視圖控制器之間的關(guān)系。在畫布中，如果你選擇兩個(gè)場(chǎng)景的連接圖標(biāo)，你將看到它是根視圖控制器的關(guān)系。這意味著導(dǎo)航欄下面視圖顯示的內(nèi)容是表視圖。初始化場(chǎng)景設(shè)置為導(dǎo)航控制器，因?yàn)閷?dǎo)航控制器擁有你app中將被顯示的所有內(nèi)容——它是待辦事宜清單和添加待辦事宜項(xiàng)目?jī)蓚€(gè)場(chǎng)景的容器。

Checkpoint: 運(yùn)行app。在表視圖上面你會(huì)看到一個(gè)額外的控件。這是導(dǎo)航控制器提供的導(dǎo)航條。

現(xiàn)在，你將添加一個(gè)標(biāo)題和一個(gè)按鈕到導(dǎo)航條。

配置導(dǎo)航條

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

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

3.如果必要，打開對(duì)象庫(kù)。

4.從列表中拖拽條按鈕到表視圖控制器的導(dǎo)航條右側(cè)。
在你拖拽條按鈕項(xiàng)目的地反，按鈕含有文本“Item”顯示。

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

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

Checkpoint: 運(yùn)行app。導(dǎo)航條將顯示一個(gè)標(biāo)題和一個(gè)Add 按鈕。按鈕還不能做任何事，接下來(lái)你將修改它。

你想通過(guò)Add按鈕切換到add-to-do-item場(chǎng)景。這個(gè)changing已經(jīng)被設(shè)置，但是沒有連接到其他場(chǎng)景。Xcode能夠輕松的設(shè)置Add按鈕，通過(guò)點(diǎn)擊它來(lái)切換到其他場(chǎng)景。

配置Add按鈕

1.在畫布中選中Add按鈕

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


標(biāo)題為Action Segue 的快捷菜單出現(xiàn)在釋放拖拽的位置。


這就是Xcode如何允許你選擇什么類型的segue，它體現(xiàn)當(dāng)歐諾個(gè)戶點(diǎn)擊Add按鈕的時(shí)候，app是如何從 待辦事宜清單 轉(zhuǎn)換到 添加待辦事宜項(xiàng) 的。

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

Xcode設(shè)置segue和配置 待辦事宜項(xiàng)目 視圖控制器來(lái)被顯示在導(dǎo)航控制器中——你將在IB中看到導(dǎo)航控制器。

此時(shí)，你或許注意到在你的工程上的警告。繼續(xù)且打開導(dǎo)航問(wèn)題來(lái)查看這個(gè)錯(cuò)誤。

因?yàn)槟阍黾?添加待辦事宜項(xiàng) 到導(dǎo)航棧，它現(xiàn)在顯示一個(gè)導(dǎo)航條。這個(gè)導(dǎo)航條導(dǎo)致你的文本字段向下移動(dòng)，這意味著你之前設(shè)置的自動(dòng)布局約束不再滿足。幸運(yùn)的是，這個(gè)問(wèn)題非常容易修復(fù)。

更新自動(dòng)布局約束

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

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

Checkpoint: 運(yùn)行app。你已經(jīng)能夠通過(guò)點(diǎn)擊Add按鈕從表視圖轉(zhuǎn)換到 添加待辦事宜項(xiàng)目 視圖控制器。因?yàn)槟闶褂脦в袎簵egue的導(dǎo)航控制器，向后導(dǎo)航將自動(dòng)處理。這意味著你能夠通過(guò)點(diǎn)擊back按鈕來(lái)返回到表視圖。

壓入導(dǎo)航的工作就像它是應(yīng)該、但當(dāng)添加項(xiàng)目的時(shí)候它又不完全如你想要的那樣工作。壓入導(dǎo)航是為挖掘界面設(shè)計(jì)的，你要提供很多關(guān)于用戶如何選擇的信息。添加一個(gè)項(xiàng)目，在另一方面，是一個(gè)模態(tài)操作——用戶執(zhí)行一些動(dòng)作，這些操作是完整和獨(dú)立的，然后從場(chǎng)景返回到主導(dǎo)航。合適的方法展示這個(gè)場(chǎng)景類型是模態(tài)segue。

更改segue的類型

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

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

因?yàn)槟B(tài)視圖控制器不會(huì)添加到導(dǎo)航棧，它不會(huì)從表視圖控制器的導(dǎo)航控制器獲得一個(gè)導(dǎo)航條。但是，你想保持導(dǎo)航條支持用戶的視覺連續(xù)性。想要在顯示的時(shí)候，給添加待辦事宜項(xiàng)視圖控制器一個(gè)形式上的導(dǎo)航條，把它嵌入到它自己的導(dǎo)航控制器。

添加一個(gè)導(dǎo)航控制器到添加待辦事宜項(xiàng)視圖控制器

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

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

和之前一樣，Xcode添加一個(gè)導(dǎo)航控制器和在視圖控制器頂部顯示一個(gè)導(dǎo)航條。接下來(lái)，配置這個(gè)條來(lái)添加一個(gè)標(biāo)簽給這個(gè)場(chǎng)景以及兩個(gè)按鈕，取消和完成。之后，你將連接這兩個(gè)按鈕到動(dòng)作。

配置導(dǎo)航條到添加待辦事宜項(xiàng)視圖控制器

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

2.在屬性檢查器中，在標(biāo)題字段輸入Add To-Do Item。
Xcode更改對(duì)視圖控制器的描述，這個(gè)視圖控制器是從“View Controller”到“View Controller – Add To-Do Item”，來(lái)讓它更容易識(shí)別場(chǎng)景。這描述顯示在大綱視圖中。

3.從對(duì)象庫(kù)拖拽一個(gè)條按鈕到在add-to-do-item視圖控制器中的導(dǎo)航條的右側(cè)。

4.在屬性檢查其中，選擇從標(biāo)識(shí)選項(xiàng)旁邊的彈出菜單中的Done。
按鈕的文本會(huì)變?yōu)椤癉one”。

5.從對(duì)象庫(kù)中拖拽另一個(gè)條按鈕項(xiàng)到 add-to-do-item視圖控制器總的導(dǎo)航條的左側(cè)。

6.在屬性檢查器中，選擇標(biāo)識(shí)選項(xiàng)旁邊的彈出菜單的Cancel。
按鈕的文本會(huì)變?yōu)椤癈ancel”。

Checkpoint: 點(diǎn)擊Add按鈕。你還看到添加項(xiàng)目的的場(chǎng)景，但是沒有返回到待辦事宜清單的返回導(dǎo)航按鈕，你彈道的是兩個(gè)你添加的按鈕，Done和Cancel。這兩個(gè)按鈕還沒有連接任何動(dòng)作，所以你能點(diǎn)擊它們，但是它們沒有任何動(dòng)作。配置這些按鈕來(lái)完成或取消編輯一個(gè)新的待辦事宜項(xiàng)。

Create Custom View Controllers

創(chuàng)建自定義視圖控制器

你已經(jīng)完成了所有的無(wú)需編程的配置。但是想要配置完成add-to-do-item視圖控制器需要一些代碼，你需要有一個(gè)地方來(lái)存放它。現(xiàn)在Xcode已經(jīng)配置了add-to-do-item視圖控制器和表視圖控制器作為通用的視圖控制器。想要有一個(gè)地方來(lái)自定義代碼，你需要?jiǎng)?chuàng)建每個(gè)視圖控制器的子類，然后配置接口到這些子類。

首先，你將解決add-to-do-item視圖控制器場(chǎng)景。自定義視圖控制器類將被稱為XYZAddToDoItemViewController，因?yàn)檫@個(gè)視圖控制器將控制這個(gè)為你的待辦事宜清單添加新的項(xiàng)目的場(chǎng)景。

創(chuàng)建UIViewController子類

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

2.在左邊出現(xiàn)的對(duì)話框中，在iOS下選擇Cocoa Touch。

3.選擇Objective-C類，并且點(diǎn)擊Next。

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

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

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

7.點(diǎn)擊Next。

8.在默認(rèn)位置保存你的項(xiàng)目。

9.組選項(xiàng)默認(rèn)為應(yīng)用程序名字，ToDoList。

10.Targets 區(qū)域在默認(rèn)狀態(tài)下是不選中的。

11.點(diǎn)擊創(chuàng)建。

現(xiàn)在，你創(chuàng)建了一個(gè)自定義的視圖控制器子類，你需要告訴故事板來(lái)使用你的自定義類來(lái)替換通用視圖控制器。故事板文件是在app運(yùn)行的時(shí)候被使用的對(duì)象的配置。app機(jī)器足夠聰明來(lái)為你把一般視圖控制器替代為你自定義的視圖控制器，但你需要告訴故事板這是你想要的。

確定你的類作為場(chǎng)景的視圖控制器

1.在工程導(dǎo)航器中選擇Main.storyboard.

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

3.在大綱視圖中，選擇 “View Controller – Add To-Do Item”視圖控制器。
點(diǎn)擊 “View Controller – Add To-Do Item” 旁邊的三角形來(lái)顯示你的場(chǎng)景中的對(duì)象。第一個(gè)應(yīng)該是視圖控制器。點(diǎn)擊它來(lái)選擇它。注意這個(gè)場(chǎng)景行有不同的圖標(biāo)。

4.視圖控制器選擇，在工具區(qū)打開標(biāo)識(shí)檢查器
標(biāo)識(shí)檢查器在當(dāng)你點(diǎn)擊工具區(qū)從左開始的第三個(gè)按鈕的時(shí)候出現(xiàn)。它讓你編輯在故事板中對(duì)象的屬性，例如什么類。

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

運(yùn)行時(shí)，你的故事板將創(chuàng)建一個(gè)XYZAddToDoItemViewController的實(shí)例來(lái)代替通用的UIViewController。注意Xcode把對(duì)add-to-do-item視圖控制器場(chǎng)景的描述從 “View Controller – Add To-Do Item”改變?yōu)椤癆dd To Do Item View Controller – Add To-Do Item.”Xcode指導(dǎo)你現(xiàn)在為這個(gè)場(chǎng)景使用的是自定義的視圖控制器，并且它解釋自定義類的名字，以便它更容易理解故事板中正在進(jìn)行是什么。

現(xiàn)在，為表視圖控制器做相同的事情。

創(chuàng)建一個(gè)UITableViewController的子類

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

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

3.點(diǎn)擊 Next.

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

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

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

7.點(diǎn)擊 Next.
保存到默認(rèn)位置。

8.Group保持默認(rèn)的app的名字。

9.Targets 區(qū)域在默認(rèn)狀態(tài)下是不選中的。

10.點(diǎn)擊 Create.

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

配置故事板

1.在工程導(dǎo)航器中選擇Main.storyboard.

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

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

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

現(xiàn)在，你已經(jīng)準(zhǔn)備好添加自定義代碼到你的視圖控制器了。

Unwind a Segue to Navigate Back

展開Segue到Navigate Back

除了push和modal的segues，Xcode還提供了unwind segue。這個(gè)segue允許用戶從給定的場(chǎng)景返回之前的場(chǎng)景，并且它為你的代碼提供位置，這個(gè)代碼是當(dāng)用戶在這些場(chǎng)景間進(jìn)行導(dǎo)航的時(shí)候要被執(zhí)行的。你可以使用unwind segue 來(lái)把XYZAddToDoItemViewController返回到XYZToDoListViewController。

Unwind segue是通過(guò)添加一個(gè)方法到目標(biāo)視圖控制器來(lái)創(chuàng)建的（這個(gè)視圖控制器是你想讓unwind做的）。方法能被unwound不需要返回一個(gè)動(dòng)作 (IBAction)，并且故事板的segue(UIStoryboardSegue)要作為參數(shù)。因?yàn)槟阆胍猽nwind back 到XYZToDoListViewController，你需要添加一個(gè)帶有XYZToDoListViewController格式的實(shí)現(xiàn)的動(dòng)作方法。

unwind back 到XYZToDoListViewController

1.在工程導(dǎo)航器中打開XYZToDoListViewController.m.

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

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

.

.{

.

.

.

.}

3.

4.

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

現(xiàn)在，離開這這個(gè)空的實(shí)現(xiàn)方法。稍后你將使用這個(gè)方法來(lái)檢索從XYZAddToDoItemViewController來(lái)的數(shù)據(jù)來(lái)添加一個(gè)項(xiàng)目到你的to-do-list。

創(chuàng)建unwind segue，將Cancel和Done按鈕連接到unwindToList: 動(dòng)作，通過(guò)源視圖控制器XYZAddToDoItemViewController里的dock中的Exit圖標(biāo)。

連接按鈕到unwindToList: action

1.在工程導(dǎo)航器中選擇Main.storyboard.

2.在畫布中，從Cancel按鈕Control+拖拽到add-to-do-item場(chǎng)景dock中Exit項(xiàng)目。
如果你在場(chǎng)景dock中沒有看到Exit項(xiàng)目，但看到場(chǎng)景描述，點(diǎn)擊按鈕直到你看見它。
在拖動(dòng)結(jié)束的位置出現(xiàn)一個(gè)菜單。

3.在快捷菜單中選擇unwindToList：。
這是你剛才添加到XYZToDoListViewController.m文件中的動(dòng)作。這意味著當(dāng)Cancel按鈕被點(diǎn)擊的時(shí)候，segue將unwind并且這個(gè)方法將被調(diào)用。

4.在畫布中，Control+拖拽，從Done按鈕到場(chǎng)景dock中的Exit項(xiàng)目。

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

注意，你為Cancel和Done按鈕使用相同的方法。在下一個(gè)教程中，你將區(qū)別這兩種不同的情況，當(dāng)你在寫處理unwind segue的方法的時(shí)候。

Checkpoint: 運(yùn)行app。啟動(dòng)后，你將看到一個(gè)表視圖，但這里沒有數(shù)據(jù)。你能點(diǎn)擊Add按鈕并從XYZToDoListViewController導(dǎo)航到XYZAddToDoItemViewController。你能點(diǎn)擊Cancel和Done按鈕來(lái)返回到表視圖。

那么為什么你不能顯示數(shù)據(jù)？表示圖有兩種途徑來(lái)獲得數(shù)據(jù)，靜態(tài)和動(dòng)態(tài)。當(dāng)表視圖的控制器實(shí)現(xiàn)請(qǐng)求的UITableViewDataSource方法，表視圖請(qǐng)求它的視圖控制器來(lái)顯示數(shù)據(jù)，不管靜態(tài)數(shù)據(jù)在IB中是否已經(jīng)被配置。如果你查看XYZToDoListViewController.m，你將注意到三個(gè)實(shí)現(xiàn)方法——numberOfSectionsInTableView:, tableView:numberOfRowsInSection:, 和 tableView:cellForRowAtIndexPath:。你能通過(guò)把這三個(gè)方法添加注釋來(lái)重新顯示靜態(tài)數(shù)據(jù)。如果喜歡你可以繼續(xù)嘗試。

Recap

回顧

至此，你完成了app界面的開發(fā)。你有了兩個(gè)場(chǎng)景——一個(gè)用來(lái)添加項(xiàng)目到待辦事宜清單，另一個(gè)顯示這個(gè)清單——并且你能在他們之間進(jìn)行導(dǎo)航。接下來(lái)，你將實(shí)現(xiàn)添加待辦事宜項(xiàng)目和顯示這個(gè)清單的功能。在下個(gè)模塊中會(huì)覆蓋數(shù)據(jù)操作和行為實(shí)現(xiàn)。

Defining the Interaction

Incorporating the Data

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

文章標(biāo)題：YourfirstiOSapp（6）——Tutorial:Storyboards
網(wǎng)頁(yè)網(wǎng)址：http://chinadenli.net/article16/gosggg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營(yíng)銷型網(wǎng)站建設(shè)、網(wǎng)站維護(hù)、App設(shè)計(jì)、Google、網(wǎng)站建設(shè)、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)