在本課中，你創(chuàng)建第二個(gè)場(chǎng)景，它基于表視圖，用來羅列用戶的菜品。這個(gè)菜品列表會(huì)成為應(yīng)用的首場(chǎng)景。你也要設(shè)計(jì)自定義的表單元來顯示每個(gè)菜品，大概是這樣的：

image: ../Art/CTV_sim_tablecellUI_2x.png

學(xué)習(xí)目標(biāo)

在結(jié)束本課的時(shí)候，你將能夠：

• 創(chuàng)建第二個(gè)storyboard場(chǎng)景
• 理解table view （表視圖）的關(guān)鍵組件
• 創(chuàng)建和設(shè)計(jì)自定義table view cell（表視圖單元）。
• 理解table view 委托方法（delegate）和數(shù)據(jù)源（data source）方法的規(guī)則
• 用數(shù)組存儲(chǔ)和使用數(shù)據(jù)
• 在table view中動(dòng)態(tài)顯示數(shù)據(jù)

創(chuàng)建菜品列表

到現(xiàn)在為止，F(xiàn)oodTracker應(yīng)用只有一個(gè)單一場(chǎng)景，也就是說，只有一個(gè)屏幕的內(nèi)容。在storyboard中，每個(gè)場(chǎng)景包含由一個(gè)視圖控制器管理的視圖以及添加在控制器或者其視圖上的任何元素（例如，自動(dòng)布局的約束）。一個(gè)視圖是一個(gè)能夠繪制它們自己的內(nèi)容并對(duì)用戶事件作出響應(yīng)的矩形區(qū)域。視圖是UIView或者其子類的實(shí)例。在本例中，場(chǎng)景包含了視圖控制器的視圖，以及所有你添加在Interface Builder上的子視圖（stack view，label，text field， imge view，以及rating控件）。

現(xiàn)在是時(shí)候創(chuàng)建另一個(gè)場(chǎng)景，它顯示整個(gè)菜品列表。幸運(yùn)的是，iOS自帶一個(gè)內(nèi)建的項(xiàng)目，UITableView，專門設(shè)計(jì)用來顯示項(xiàng)目的滾動(dòng)列表。表視圖由表視圖控制器（UITableViewController）管理。UITableViewController是UIViewController的子類，它被設(shè)計(jì)用來處理表視圖相關(guān)的邏輯。你將使用表視圖控制器來創(chuàng)建一個(gè)新場(chǎng)景。這個(gè)視圖控制器顯示并管理表視圖。事實(shí)上，表視圖是這個(gè)視圖控制器的內(nèi)容視圖，充滿整個(gè)場(chǎng)景的可用控件。

使用table view添加一個(gè)場(chǎng)景到storyboard

1. 打開Main.storyboard.
2. 在utility area中打開Object library。（或者選擇View > Utilities > Show Object Library。）
3. 在Object library，找到Table View Controller 對(duì)象。
4. 從這個(gè)列表中拖拽Table View Controller對(duì)象到場(chǎng)景中現(xiàn)有的場(chǎng)景的右邊。
   如果你拖拽了但是沒有什么改變，有可能你拖拽的是table view對(duì)象而不是table view controller對(duì)象。table view 對(duì)象是一個(gè)表示表格自身的一個(gè)視圖。和其他的視圖對(duì)象一樣，它必須作為子視圖添加到一個(gè)已有的場(chǎng)景中。另一方面，table view controller是整個(gè)場(chǎng)景。它包含了table view以及管理這個(gè)table view 的控制器。

現(xiàn)在你有了兩個(gè)場(chǎng)景，一個(gè)顯示菜品的列表，另一個(gè)顯示某一菜品的詳細(xì)內(nèi)容。

image: ../Art/CTV_newtableview_2x.png

為了使菜品列表成為用戶啟動(dòng)應(yīng)用時(shí)第一眼看到的場(chǎng)景，需要通過設(shè)置table view controller為第一場(chǎng)景來告訴Xcode你的打算。

設(shè)置菜品列表作為初始化場(chǎng)景

1. 如果你想要跟多的空間，那么把那些邊邊角角都收起來吧。

   
   
   image: ../Art/navigator_utilities_toggle_on_2x.png

2. 把storyboard entry point（故事板入口點(diǎn)）從菜品詳情場(chǎng)景移動(dòng)到菜品列表場(chǎng)景。

   
   
   image: ../Art/CTV_originalinitialscene_2x.png
   
   

   這個(gè)table view controller被設(shè)置為了storyboard的初始化視圖控制器，這樣在應(yīng)用啟動(dòng)的時(shí)候菜品列表作為第一場(chǎng)景被加載。

   
   
   

   image: ../Art/CTV_newinitialscene_2x.png

檢查點(diǎn)：運(yùn)行應(yīng)用。取代帶有text field、image view、以及rating空間的菜品詳情場(chǎng)景，你將會(huì)考到一個(gè)空的table view——一個(gè)由很多水平分割線把屏幕分成行的屏幕，但是這些行里還沒有內(nèi)容。

image: ../Art/CTV_sim_emptytv_2x.png

配置table view

1. 在storyboard中，打開大綱視圖并展開utility area。

2. 在大綱視圖，選擇Table View。
   table view被嵌套在Table View Controller Scene > Table View Controller里面。你需要點(diǎn)擊這些對(duì)象旁邊的展開三角才能看到被嵌套的table view。

   
   
   image: ../Art/CTV_outlineview_table_2x.png
3. 選中table view，在utility area中打開Size inspector。
4. 在Size inspector，找到Row Height（行高）字段，輸入90，按下回車鍵。

過會(huì)兒我們?cè)倩貋聿僮鱰able view自身，我們先來設(shè)計(jì)顯示table view顯示內(nèi)容的界面：table view cells（表視圖單元）。

設(shè)計(jì)自定義表單元

在table view中的單獨(dú)一行，是被table view cell（UITableViewCell）管理的，它負(fù)責(zé)繪制它們自己。Table view cell擁有各種預(yù)定義的行為和默認(rèn)的單元樣式；但是，因?yàn)槟阋@示在cell中的內(nèi)容超過了默認(rèn)樣式的范圍，所以你需要自定義cell樣式。

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

1. 打開Project navigator。
2. 選擇File > New > File (或按下 Command-N)
3. 在出現(xiàn)的對(duì)話框的頂部，選擇iOS。
4. 選擇Cocoa Touch Class，然后點(diǎn)擊Next。
5. 在Class字段，鍵入Meal。
6. 在Subclass of字段，選擇UITableViewCell。
   類標(biāo)題更改為MealTableViewCell。Xcode從命名中清楚的表明你創(chuàng)建了一個(gè)自定義的table view cell，就用這個(gè)新名字。
7. 語言還是用Swift。
8. 點(diǎn)擊Next。
   保存到項(xiàng)目目錄。Group選項(xiàng)保持默認(rèn)，F(xiàn)oodTracker。
9. 在Targets部分，確保你的應(yīng)用被選中，而應(yīng)用的測(cè)試沒有選中。
10. 點(diǎn)擊Create。
    Xcode創(chuàng)建了定義MealTableViewCell類的文件：MealTableViewCell.swift。
11. 在Project navigator中，把MealTableViewCell文件放在其他Swift文件的下面。

現(xiàn)在再次打開storyboard。

如果你查看storyboard中的菜品列表場(chǎng)景，你會(huì)注意到它只顯示了一個(gè)單一的的table view cell。

image: ../Art/CTV_singletvcell_2x.png

這個(gè)cell是table的屬性cell。你能定義它的設(shè)計(jì)和行為。Table可以在需要的時(shí)候創(chuàng)建這個(gè)cell的實(shí)例。但首先，你需要連接場(chǎng)景中的table view cell到你創(chuàng)建的自定義cell子類。

為你的table view 配置自定義cell

1. 在大綱視圖，選擇Table View Cell。
   找到嵌套的table view cell。

   
   
   image: ../Art/CTV_outlineview_cell_2x.png
2. 選中table view cell，打開Attributes inspector。
3. 在Attributes inspector中，找到Identifier標(biāo)簽字段并鍵入MealTableViewCell。按下回車鍵。
   你將使用這個(gè)識(shí)別符來創(chuàng)建屬性cell的實(shí)例。
4. 打開Size inspector。

5. 在Size inspector中，找到Row Height標(biāo)簽字段并鍵入90。確保這個(gè)字段旁邊的Custom復(fù)選框被選中。

   
   
   image: ../Art/CTV_inspector_size_cell_2x.png
   
   

   按下回車鍵，storyboard中顯示了新cell高度。

6. 打開Identity inspector。
   回想一下，Identity inspector讓我們編輯storyboard中的對(duì)象的與身份相關(guān)的屬性，例如對(duì)象所屬什么類。

7. 在Identity inspector中，找到Class 字段并選擇MealTableViewCell。

   
   
   image: ../Art/CTV_inspector_identity_cell_2x.png

使用cell設(shè)置，你能在storyboard中直接設(shè)計(jì)自定義用戶界面。你需要一個(gè)label、一個(gè)image view、以及一個(gè)rating 控件。你能復(fù)用在之前的課程里創(chuàng)建的rating控件類。你的自定義界面將包含菜品名、照片、評(píng)分，它看起來是這樣的。

image: ../Art/CTV_sim_tablecellUI_2x.png

設(shè)計(jì)自定義表單元界面

1. 使用對(duì)象庫找到Image View對(duì)象并拖拽到table cell。

2. 拖拽image view，讓它呈現(xiàn)下圖的樣子和位置：

   
   
   image: ../Art/CTV_imageview_resize_2x.png
3. 選中image view，打開Attributes inspector。

4. 在Attributes inspector中找到Image 字段，選擇defaultPhoto。
   你可以添加上一課默認(rèn)的圖片到項(xiàng)目。

   
   
   image: ../Art/CTV_imageview_setdefault_2x.png
5. 使用對(duì)象庫找到Label 對(duì)象并拖拽它到table cell。你將使用這個(gè)label來顯示菜品的名稱。

6. 拖拽label，讓它到達(dá)下圖顯示的位置。

   
   
   image: ../Art/CTV_label_drag_2x.png

7. 拖拽label的右邊緣和table cell的右邊緣對(duì)其。如下圖所示。

   
   
   image: ../Art/CTV_label_resize_2x.png
8. 使用對(duì)象庫找到Horizontal Stack View 對(duì)象并拖拽到table cell。
9. 選中stack view，打開Size inspector。
10. 在Size inspector中，在Height字段鍵入44，在Width字段鍵入252。按下回車鍵。

11. 拖拽stack view到下圖所示的位置。

    
    
    image: ../Art/CTV_ratingcontrol_resize_2x.png
12. 選中這個(gè)視圖，打開Identity inspector。

13. 在Identity inspector中，找到Class 字段，并選擇RatingControl。

    
    
    image: ../Art/CTV_inspector_identity_control_2x.png
    
    

    如果你在彈出菜單中沒有看到RatingControl選項(xiàng)，確保你已經(jīng)在畫布中選擇了stack view。

14. 選中這個(gè)視圖，打開Attributes inspector。
15. 在Attributes inspector中，設(shè)置Spacing為8。接下來，找到Interactoio字段并取消User Interaction Enabled復(fù)選框。
    你設(shè)計(jì)的自定義rating 控件類是可以交互的，但是你在這個(gè)cell 視圖中不想用戶能夠改變?cè)u(píng)分。取而代之的是，用戶點(diǎn)擊在cell的任何地方選中的都是這個(gè)cell本身。所以取消這個(gè)控件的交互性很重要。

你的用戶界面看上去應(yīng)該是這樣的：

image: ../Art/CTV_tablecellUI_2x.png

檢查點(diǎn)：運(yùn)行應(yīng)用。表視圖單元的高度是變高了。但是你沒有看到任何你添加在表視圖單元上的用戶界面元素，它們顯示的是空白，就像之前一樣，為什么會(huì)這樣？

image: ../Art/CTV_sim_wideemptycells_2x.png

在storyboard中，你能夠設(shè)置table view顯示靜態(tài)數(shù)據(jù)（在storyboard中提供）或者動(dòng)態(tài)數(shù)據(jù)（通過table view controller的編程提供）。默認(rèn)情況下，table view controller使用動(dòng)態(tài)數(shù)據(jù)。這意味著你在storyboard中創(chuàng)建的界面只是table cell的屬性而已。你仍然需要在代碼中創(chuàng)建cell的實(shí)例并使用應(yīng)用的數(shù)據(jù)來填充它。

現(xiàn)在，你可以使用助理編輯器來預(yù)覽你的cell。

預(yù)覽你的界面

1. 打開助理編輯器。

   
   
   image: ../Art/assistant_editor_toggle_2x.png

2. 折疊一些區(qū)域增加操作空間。

   
   
   image: ../Art/navigator_utilities_toggle_on_2x.png

3. 在編輯器選擇器欄中，在助理編輯器頂部出現(xiàn)，選擇Automatic to Preview > Main.storyboard(Preview)。

   
   
   image: ../Art/CTV_assistant_switchtopreview_2x.png

你的Xcode窗口看上去是這樣的：

image: ../Art/CTV_assistant_preview_2x.png

這個(gè)預(yù)覽顯示image view 和label。rating空間沒有顯示在預(yù)覽中，但是table view cell看上去和預(yù)期的一樣。

注意
如果在預(yù)覽中看到錯(cuò)誤的場(chǎng)景，確保是容果點(diǎn)擊table view的場(chǎng)景dock來選擇它的。

添加圖片到項(xiàng)目

接下來，你需要添加幾張簡(jiǎn)單的圖片到項(xiàng)目。當(dāng)你加載初始化菜品數(shù)據(jù)到應(yīng)用中的時(shí)候，你將使用這些圖片。

你能在本課最后的下載文件的Images文件夾中找到這些圖片，或者你使用自己的圖片。（確保圖片的名字和你稍后在代碼中使用的圖片名字相匹配）。

添加圖片到項(xiàng)目

1. 如果助理編輯器開著，返回到標(biāo)準(zhǔn)編輯器。

   
   
   image: ../Art/navigator_utilities_toggle_on_2x.png
2. 在project navigator，選擇 Assets.xcassets來訪問資源目錄視圖。
3. 在左下角，點(diǎn)擊加號(hào)按鈕并在彈出菜單中選擇New Folder。
4. 雙擊文件名并重命名為Sample Images。
5. 選中文件，在左下角點(diǎn)擊加號(hào)按鈕，在彈出菜單中選擇New Image Set。
6. 雙擊image set名字并重命名它，這個(gè)名在你編寫代碼的時(shí)候也要一致。
7. 在你的電腦中，選擇你想添加的圖片。
8. 拖拽圖片到image set中的2x的插槽。

重復(fù)上面5-8步驟添加更多你喜歡的圖片。在本課中將定你有三個(gè)不同的圖片，meal1, meal2, 和 meal3。

image: ../Art/CTV_assetcatalog_2x.png