在本課中拂共，你將使用navigation controller（導(dǎo)航控制器）和segues來(lái)創(chuàng)建FoodTracker 應(yīng)用的導(dǎo)航流播演。在本課結(jié)束的時(shí)候，你將有一個(gè)完整的導(dǎo)航方案和應(yīng)用交互流暗赶。當(dāng)你完成時(shí)彤避，你的應(yīng)用看上去是這樣的：
學(xué)習(xí)目標(biāo)
在本課結(jié)束的時(shí)候，你將能夠：
- 在storyboard里麦乞，把一個(gè)已有的視圖控制器嵌入到一個(gè)導(dǎo)航控制器中
- 在視圖控制器之間建立segue
- 在storyboard中使用Attribute inspector編輯segue的屬性
- 使用 prepare(for:sender:) 方法在視圖控制器之間傳遞數(shù)據(jù)
- 執(zhí)行unwind segue
- 使用棧視圖來(lái)創(chuàng)建強(qiáng)健的布局
添加segue來(lái)向前導(dǎo)航
數(shù)據(jù)已如期望般顯示蕴茴，是時(shí)候提供一種方式來(lái)讓菜品列表場(chǎng)景導(dǎo)航到菜品詳情場(chǎng)景。在場(chǎng)景之間轉(zhuǎn)換被稱為segue姐直。
在創(chuàng)建場(chǎng)景之前倦淀，你需要配置你的場(chǎng)景。首先声畏，你將把table view controller放到一個(gè)navigation controller（導(dǎo)航控制器）中撞叽。一個(gè)navigation controller管理一系列視圖控制器的向前和向后轉(zhuǎn)換。這一系列通過(guò)navigation controller管理的視圖控制器被稱為導(dǎo)航棧（navigation stack）插龄。第一個(gè)被添加到棧的項(xiàng)目成為根視圖控制器（root view controller）并且它永遠(yuǎn)不會(huì)從導(dǎo)航棧中刪除愿棋。
添加navigation controller到菜品列表場(chǎng)景
- 打開(kāi)storyboard。
-
點(diǎn)擊它的場(chǎng)景dock來(lái)選擇菜品列表場(chǎng)景均牢。
image: ../Art/CTV_scenedock_table_2x.png -
選擇 Editor > Embed In > Navigation Controlle
Xcode添加一個(gè)新的navigation controller到你的storyboard糠雨，把storyboard的入口設(shè)置給它，并且分配菜品列表場(chǎng)景作為它的根視圖控制器膨处。
image: ../Art/IN_navcontrolleradded_2x.png
在畫(huà)布中见秤，連接控制器的圖標(biāo)是根視圖控制器關(guān)系。這個(gè)table view controller是navigation controller的根視圖控制器真椿。storyboard的入口設(shè)置在了navigation controller鹃答，這時(shí)因?yàn)閚avigation controller包含了table view controller。
你或許注意到突硝，現(xiàn)在你的表視圖在它的頂部有一欄测摔。這就是導(dǎo)航欄。每個(gè)在導(dǎo)航棧中的控制器都會(huì)有一個(gè)導(dǎo)航欄解恰，它能包含一些空間來(lái)向前或者向后導(dǎo)航锋八。接下來(lái)，你將添加一個(gè)按鈕到這個(gè)導(dǎo)航欄中來(lái)轉(zhuǎn)換到菜品詳情場(chǎng)景护盈。
檢查點(diǎn)：運(yùn)行應(yīng)用挟纱。在你的表視圖的上法應(yīng)該可以看到一個(gè)額外的空間。這就是由導(dǎo)航控制器提供的導(dǎo)航條腐宋。這個(gè)導(dǎo)航條擴(kuò)展它的背景到上面的狀態(tài)欄紊服，所以狀態(tài)欄沒(méi)有和你的任何內(nèi)容重疊檀轨。
為場(chǎng)景配置導(dǎo)航欄
現(xiàn)在你將添加菜品列表的標(biāo)題和一個(gè)按鈕（用來(lái)添加額外的菜品）到導(dǎo)航欄。導(dǎo)航欄從導(dǎo)航棧頂部的視圖控制中獲取它們的標(biāo)題欺嗤，它們自己沒(méi)有標(biāo)題参萄。每個(gè)視圖控制器都有一個(gè)navigationItem屬性。這個(gè)屬性定義視圖控制器導(dǎo)航欄的外觀煎饼。
在Interface Builder讹挎，你可以通過(guò)編輯視圖控制器的場(chǎng)景中的導(dǎo)航欄來(lái)配置視圖控制器導(dǎo)航項(xiàng)。
在菜品列表配置導(dǎo)航欄
-
雙擊菜品列表場(chǎng)景中的導(dǎo)航欄吆玖。
image: ../Art/IN_rename_meallist_2x.png
一個(gè)光標(biāo)出現(xiàn)在一個(gè)text field中筒溃，讓你添入文本。
-
鍵入 Your Meals并按下回車鍵衰伯。這為表視圖控制器的導(dǎo)航項(xiàng)設(shè)置了標(biāo)題铡羡。
image: ../Art/IN_meallist_newname_2x.png - 打開(kāi)Object library积蔚。
- 在object library中意鲸，找到Bar Button Item對(duì)象。
-
拖拽Bar Button Item對(duì)象到菜品列表場(chǎng)景的導(dǎo)航欄的最右側(cè)尽爆。
在你拖拽bar button item的位置出現(xiàn)了一個(gè)被稱為Item的按鈕怎顾。
image: ../Art/IN_meallist_barbutton_2x.png - 選擇這個(gè)bar button item并打開(kāi)Attributes inspector。
-
在Attributes inspector漱贱，在彈出菜單中緊挨著System Item的選項(xiàng)中選擇Add槐雾。
這個(gè)按鈕變成了加號(hào)按鈕（+）。
image: ../Art/IN_meallist_addbutton_2x.png
檢查點(diǎn)：運(yùn)行應(yīng)用幅狮。導(dǎo)航欄現(xiàn)在應(yīng)該有一個(gè)標(biāo)題和一個(gè)加號(hào)按鈕募强。這個(gè)按鈕還不能做什么。你將在下面做修改崇摄。
你想讓加號(hào)按鈕帶來(lái)菜品詳情場(chǎng)景擎值，所以你將通過(guò)按鈕觸發(fā)一個(gè)到那個(gè)場(chǎng)景去的segue來(lái)做到。
在菜品詳情場(chǎng)景中配置加號(hào)按鈕逐抑。
- 在畫(huà)布中鸠儿，選擇加號(hào)按鈕。
-
按住Control鍵厕氨，從button處拖拽到菜品詳情場(chǎng)景进每。
image: ../Art/IN_addbutton_drag_2x.png
一個(gè)標(biāo)題為Action Segue的快捷菜單出現(xiàn)在拖拽結(jié)束的位置。
image: ../Art/IN_addbutton_segue_2x.png
Action Segue菜單允許你選擇segue的類型命斧，這個(gè)類型會(huì)影響菜品列表場(chǎng)景到菜品詳情場(chǎng)景的轉(zhuǎn)換方式田晚。 - 從Action Segue菜單選擇Show。
Show segue 會(huì)把選中的場(chǎng)景壓入到導(dǎo)航棧的頂部国葬，導(dǎo)航控制器將顯示這個(gè)場(chǎng)景贤徒。當(dāng)你選擇show segue的時(shí)候遭京，Interface Builder設(shè)置這個(gè)show segue，并且改變菜品詳情場(chǎng)景在畫(huà)布中的外觀——在Interface Builder中它會(huì)出現(xiàn)一個(gè)導(dǎo)航欄泞莉。
檢查點(diǎn)：運(yùn)行應(yīng)用哪雕。你能點(diǎn)擊加號(hào)按鈕導(dǎo)，并從菜品列表場(chǎng)景導(dǎo)航到菜品詳情場(chǎng)景鲫趁。因?yàn)槟阏谑褂胹how segue的導(dǎo)航控制器系斯嚎，所以向后導(dǎo)航也已經(jīng)為你處理了，一個(gè)返回按鈕自動(dòng)出現(xiàn)在菜品詳情場(chǎng)景中挨厚。這意味著你能點(diǎn)擊這個(gè)按鈕返回到菜品列表堡僻。
你通過(guò)使用show segue實(shí)現(xiàn)的的推樣式（push-style）的導(dǎo)航正在按照設(shè)想運(yùn)行——但是它并不是你在添加項(xiàng)目時(shí)想要的樣子。推導(dǎo)航是為下墜（drill-down）界面設(shè)計(jì)的疫剃，在那里你將提供更多關(guān)于用戶選擇的信息钉疫。添加一個(gè)按鈕的另一種方式，是模態(tài)操作——用戶執(zhí)行一個(gè)完整的自包含的動(dòng)作巢价，并且從那個(gè)場(chǎng)景返回到主導(dǎo)航牲阁。這種類型場(chǎng)景的恰當(dāng)表現(xiàn)方法是modal （模態(tài)） segue。
與其刪除現(xiàn)有的segue再創(chuàng)建新的壤躲，不如在Attributes inspector中簡(jiǎn)單的改變segue的樣式城菊。就像使用storyboard中眾多的可選元素一樣，你可以使用Attributes inspector來(lái)編輯segue的屬性碉克。
改變segue樣式
-
選擇菜品列表場(chǎng)景到菜品詳情場(chǎng)景的segue凌唬。
image: ../Art/IN_selectsegue_2x.png - 在Attributes inspector，從Kind字段的彈出菜單中選擇Present Modally 漏麦。
- 在Attributes inspector客税，在Identifier字段鍵入AddItem，按下回車鍵撕贞。
稍后更耻，你將使用這個(gè)標(biāo)識(shí)符來(lái)標(biāo)記segue。
一個(gè)模態(tài)視圖控制器（modal view controller）不能添加到導(dǎo)航棧中麻掸，所以它在Interface Builder中沒(méi)有導(dǎo)航欄酥夭。但是，你想保留導(dǎo)航來(lái)為用戶提供視覺(jué)連續(xù)性脊奋。為了在模態(tài)呈現(xiàn)的時(shí)候給菜品詳情場(chǎng)景一個(gè)導(dǎo)航欄熬北，把它嵌入到它自己的導(dǎo)航控制器中。
添加一個(gè)導(dǎo)航控制器到菜品詳情場(chǎng)景
-
選擇菜品詳情場(chǎng)景诚隙。
image: ../Art/CTV_scenedock_mealscene_2x.png - 選中這個(gè)視圖控制器讶隐，選擇 Editor > Embed In > Navigation Controller。
就像之前一樣久又，Xcode添加一個(gè)導(dǎo)航控制器并在菜品詳情場(chǎng)景的頂部顯示一個(gè)導(dǎo)航欄巫延。
如果這個(gè)場(chǎng)景中的元素frame沒(méi)有自動(dòng)更新效五，你需要手動(dòng)更新。如果你收到關(guān)于錯(cuò)誤放置視圖的警告炉峰，選擇視圖控制器并按下在畫(huà)布右下角的Update Frame按鈕畏妖。它將基于它們的約束正確定位這個(gè)場(chǎng)景中的每個(gè)視圖。
接下來(lái)疼阔，配置導(dǎo)航欄戒劫，添加這個(gè)場(chǎng)景的標(biāo)題以及兩個(gè)按鈕，Cancel和Save婆廊。稍后迅细，你將連接這些按鈕到action方法。
在菜品詳情場(chǎng)景中配置導(dǎo)航欄
-
雙擊導(dǎo)航欄淘邻。
image: ../Art/IN_rename_mealscene_2x.png
一個(gè)光標(biāo)出現(xiàn)茵典，讓你輸入文本。
- 鍵入New Meal并按下回車鍵來(lái)保存宾舅。
- 從Object library拖拽Bar Button Item對(duì)象到導(dǎo)航條的最左邊统阿。
-
在Attributes inspector，System Item贴浙，選擇Cancel砂吞。
這個(gè)按鈕的文本改為Cancel。
image: ../Art/IN_mealscene_cancelbutton_2x.png - 拖拽另一個(gè)Bar Button Item對(duì)象到導(dǎo)航欄最右側(cè)崎溃。
-
在Attributes inspector中，System Item盯质，選擇Save袁串。
按鈕的文本變?yōu)镾ave。
image: ../Art/IN_mealscene_savebutton_2x.png
檢查點(diǎn)：運(yùn)行應(yīng)用呼巷。點(diǎn)擊添加按鈕囱修。你將看到菜品詳情場(chǎng)景，但是這里不再有一個(gè)返回菜品列表的的按鈕——取而代之的王悍，你看到的是兩個(gè)你添加的按鈕破镰，Cancel和Save。這些按鈕還沒(méi)有連接到任何action方法压储，所以你能點(diǎn)擊它們鲜漩，但是它們不會(huì)做任何事。你將配置這些按鈕啦保存或者取消添加一個(gè)新菜品集惋，并且讓用戶返回到菜品列表孕似。
（未完待續(xù)......）
