連接Table Cell用戶界面到代碼
在你能夠在table view cell中顯示動態(tài)數(shù)據(jù)之前棺滞，你需要創(chuàng)建outlet來連接storyboard中的屬性和在MealTableViewCell.swift文件中代表table view cell的代碼裁蚁。
連接這些視圖到MealTableViewCell.swift代碼
- 在storyboard中，選擇table view cell中的label继准。
-
打開助理編輯器枉证。
image: ../Art/assistant_editor_toggle_2x.png -
如有必要，盡可能擴展工作區(qū)空間移必。
image: ../Art/navigator_utilities_toggle_on_2x.png -
在編輯器選擇器欄中室谚，它顯示在助理編輯器的頂部，把助理視圖從預(yù)覽視圖切換到切換到Automatic > MealTableViewCell.swift.
image: ../Art/CTV_assistant_switchtocode_2x.png
MealTableViewCell.swift顯示在右側(cè)的編輯器中崔泵。
- 在MealTableViewCell.swift中秒赤，找到class行：
class MealTableViewCell: UITableViewCell {
- 在class行的下面，添加下面注釋：
//MARK: Properties
-
按住Control鍵憎瘸，從畫布中拖拽label到右側(cè)編輯器顯示的代碼中入篮，在剛才添加的注釋的下面釋放。
image: ../Art/CTV_label_dragoutlet_2x.png -
在彈出的對話框中含思，Name字段鍵入nameLabel崎弃。
讓其他選項保持原樣。你的對話框看起來是這樣的含潘。
image: ../Art/CTV_label_addoutlet_2x.png - 點擊Connect饲做。
- 在storyboard中，選擇table view cell的image view遏弱。
-
按住Control鍵盆均，從畫布中拖拽image view到右側(cè)編輯器顯示的代碼中，在剛才添加的nameLabel屬性下面釋放漱逸。
image: ../Art/CTV_imageview_dragoutlet_2x.png -
在彈出的對話框中泪姨，Name字段鍵入photoImageView。
讓其他選項保持原樣饰抒。并點擊Connect肮砾。
image: ../Art/CTV_imageview_addoutlet_2x.png - 在storyboard中，選擇table view cell的rating控件袋坑。
-
按住Control鍵仗处，從畫布中拖拽rating控件到右側(cè)編輯器顯示的代碼中，在剛才添加的photoImageView屬性下面釋放枣宫。
image: ../Art/CTV_ratingcontrol_dragoutlet_2x.png -
在彈出的對話框中婆誓，Name字段鍵入ratingControl。
讓其他選項保持原樣也颤。并點擊Connect洋幻。
image: ../Art/CTV_ratingcontrol_addoutlet_2x.png
在MealTableViewCell.swift中你的outlet看上去應(yīng)該是這樣的：
@IBOutlet weak var nameLabel: UILabel!
@IBOutlet weak var photoImageView: UIImageView!
@IBOutlet weak var ratingControl: RatingControl!
加載初始數(shù)據(jù)
為了在你的table cell中顯示真實數(shù)據(jù)，你需要編寫代碼來加載這些數(shù)據(jù)翅娶。在這點上文留，你已經(jīng)有菜品的數(shù)據(jù)模型了：Meal類好唯。你還需要保存這些菜品的一個列表。跟蹤這個數(shù)據(jù)的最自然的地方是與菜品列表場景連接的自定義視圖控制器子類燥翅。這個視圖控制器將管理顯示菜品列表的視圖渠啊，并有一個引用指向在用戶界面顯示的內(nèi)容背后的數(shù)據(jù)模型。
首先权旷，創(chuàng)建一個自定義的table view controller子類來管理這個菜品列表場景替蛉。
創(chuàng)建一個UITableViewController子類
- 選擇File > New > File (或者按下 Command-N)。
- 在出現(xiàn)的對話框中拄氯，選擇iOS躲查，并且選擇Cocoa Touch Class。
- 點擊Next译柏。
- 在Class字段镣煮，鍵入Meal。
- 在Subclass of字段鄙麦，選擇UITableViewController典唇。
把類標(biāo)題改為MealTableViewController。 - 確保Also create XIB file選項沒有被選中胯府。
XIB文件是一個舊的通過視圖控制器設(shè)計視圖管理的方式介衔。它們早于storyboard出現(xiàn)，基本相當(dāng)于代表storyboard上的單一視圖骂因。這個視圖控制器不需要一個XIB文件炎咖，因為你已經(jīng)定義它連接應(yīng)用的storyboard了。 - 確保語言是Swift寒波。
- 點擊Next乘盼。
保存位置是項目目錄。
Group選項為默認的FoodTracker俄烁。
在目標(biāo)區(qū)域绸栅，你的應(yīng)用被選擇，而應(yīng)用的tests沒有被選擇页屠。 - 其他的選項保持不變粹胯，點擊Create。
Xcode創(chuàng)建了MealTableViewController.swift卷中，一個定義自定義table view controller子類的源代碼文件矛双。 - 必要時渊抽，在Project navigator蟆豫，拖拽MealTableViewController.swift到和其他的Swift文件一起。
在這個自定義類中懒闷，你能定義一個屬性來存儲Meal對象的列表十减。Swift標(biāo)準(zhǔn)（Swift standard library）包含一個被稱為Array（數(shù)組）的結(jié)構(gòu)栈幸，它能夠很好的跟蹤列表的項。
加載初始數(shù)據(jù)
-
返回標(biāo)準(zhǔn)編輯器帮辟。并盡可能的擴展工作區(qū)空間速址。
image: ../Art/standard_toggle_2x.png - 打開MealTableViewController.swift。
- 緊跟著class行添加下面的代碼：
//MARK: Properties
var meals = [Meal]()
這代碼在MealTableViewController聲明了一個屬性由驹，并用一個默認值初始化它（一個空的元素項為Meal對象數(shù)組）芍锚。聲明meals為變量而不是常量，意味著你能在初始化它之后還可以給它添加元素項蔓榄。
- Table view controller模版包含很多存根方法以及對于這些方法的注釋并炮。這些占位的實現(xiàn)方法你可以刪除注釋和擴展（讓它們可用）來定義表的外觀和行為。在你設(shè)置完成模型數(shù)據(jù)后你將看到這些方法∩＃現(xiàn)在逃魄，滾動到這些方法的下面，在結(jié)束花括號的上面添加如下方法：
//MARK: Private Methods
private func loadSampleMeals() {
}
這是一個輔助方法澜搅，用來加載樣本數(shù)據(jù)到應(yīng)用伍俘。
- 在loadSampleMeals()方法中，首先加載下面三個菜品圖片：
let photo1 = UIImage(named: "meal1")
let photo2 = UIImage(named: "meal2")
let photo3 = UIImage(named: "meal3")
確保圖片在項目中的名字和在代碼中的一致勉躺。
- 在加載完這些圖片后癌瘾，創(chuàng)建三個菜品對象。
guard let meal1 = Meal(name: "Caprese Salad", photo: photo1, rating: 4) else {
fatalError("Unable to instantiate meal1")
}
guard let meal2 = Meal(name: "Chicken and Potatoes", photo: photo2, rating: 5) else {
fatalError("Unable to instantiate meal2")
}
guard let meal3 = Meal(name: "Pasta with Meatballs", photo: photo3, rating: 3) else {
fatalError("Unable to instantiate meal2")
}
因為菜品類的 init!(name:, photo:, rating:)初始化器是可失敗的饵溅，所以你需要檢查初始化器返回的結(jié)果柳弄。在本例中，你傳遞的是有效的參數(shù)嗎所以初始化器永遠不會失敗概说。若果初始化器失敗碧注，你的代碼就有了錯誤。為了幫助你標(biāo)記和修復(fù)錯誤糖赔，如果初始化器失敗萍丐，fatalError()函數(shù)就會在控制臺打印一個錯誤消息，并且應(yīng)用程序終止放典。
- 在創(chuàng)建Meal對象之后逝变，使用如下方法添加它們到meals數(shù)組。
meals += [meal1, meal2, meal3]
- 找到 viewDidLoad()方法奋构。模版的實現(xiàn)看上去是這樣的：
override func viewDidLoad() {
super.viewDidLoad()
// Uncomment the following line to preserve selection between presentations
// self.clearsSelectionOnViewWillAppear = false
// Uncomment the following line to display an Edit button in the navigation bar for this view controller.
// self.navigationItem.rightBarButtonItem = self.editButtonItem()
}
模版實現(xiàn)的這個方法包含注釋壳影，這些注釋是在Xcode創(chuàng)建MealTableViewController.swift的時候插入的。像這樣的代碼注釋在源代碼文件中提供了提示和上下文信息弥臼，但是在本課中你用不到它們宴咧。
- 在 viewDidLoad()方法中，刪除注釋径缅，并在super.viewDidLoad()后面添加如下方法來加載樣本菜品數(shù)據(jù)掺栅。
// Load the sample data.
loadSampleMeals()
當(dāng)視圖加載時烙肺，這個代碼調(diào)用你剛寫的加載樣本數(shù)據(jù)的輔助方法。你把它分離到自己的方法中氧卧，為的是代碼更加模塊化和易讀桃笙。
你的viewDidLoad()方法看上去應(yīng)該是這樣的：
override func viewDidLoad() {
super.viewDidLoad()
// Load the sample data.
loadSampleMeals()
}]
你的loadSampleMeals()方法看上去應(yīng)該是這樣的：
private func loadSampleMeals() {
let photo1 = UIImage(named: "meal1")
let photo2 = UIImage(named: "meal2")
let photo3 = UIImage(named: "meal3")
guard let meal1 = Meal(name: "Caprese Salad", photo: photo1, rating: 4) else {
fatalError("Unable to instantiate meal1")
}
guard let meal2 = Meal(name: "Chicken and Potatoes", photo: photo2, rating: 5) else {
fatalError("Unable to instantiate meal2")
}
guard let meal3 = Meal(name: "Pasta with Meatballs", photo: photo3, rating: 3) else {
fatalError("Unable to instantiate meal2")
}
meals += [meal1, meal2, meal3]
}
檢查點：通過 Product > Build.選擇構(gòu)建項目。你的構(gòu)建應(yīng)該時沒有錯誤的沙绝。注意搏明，這時候，你或許看到一個關(guān)于在應(yīng)用中無法到達View Controller場景的Xcode警告闪檬。你將在下一課修復(fù)它熏瞄。在本課剩下來的部分，先忽略它谬以。
重要
如果你運行出現(xiàn)問題强饮，確保項目中的圖片名字是否真的和在代碼中使用的名字一致，
顯示數(shù)據(jù)
現(xiàn)在为黎，你的自定義table view controller子類邮丰，MealTableViewController，有了一個可變數(shù)組铭乾，它用一些樣本數(shù)據(jù)預(yù)先做了填充〖袅現(xiàn)在你需要在用戶界面上顯示這些數(shù)據(jù)。
為了顯示動態(tài)數(shù)據(jù)炕檩，一個table view需要兩個重要的幫手：數(shù)據(jù)源（data source）和委托（delegate）斗蒋。一個table view 數(shù)據(jù)源，就像它的名字暗示的那樣笛质，提供這個table view要顯示的數(shù)據(jù)泉沾。一個table view委托幫助table view管理cell的選擇、行高妇押、以及與顯示數(shù)據(jù)相關(guān)的其他方面求橄。默認情況下锦庸，UITableViewController及其子類采用必要的協(xié)議來讓table view controller成為它關(guān)聯(lián)的表視圖的數(shù)據(jù)源（UITableViewDataSource協(xié)議）和委托（UITableViewDelegate協(xié)議）夹抗。你的工作就是在table view controller子類中實現(xiàn)合適的協(xié)議方法鹅颊，這樣你的table view就有了正確的行為。
Table view需要實現(xiàn)三個表視圖數(shù)據(jù)源方法肩杈。
func numberOfSections(in tableView: UITableView) -> Int
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell
第一個 numberOfSections(In:)方法柴我，它高速表視圖有多少section（部分）要顯示。section是表視圖內(nèi)部cell的可視化分組扩然，它在表視圖里有很多數(shù)據(jù)的時候特別有用艘儒。對于簡單的表視圖，比如FoodTracker 應(yīng)用，你只需要一個部分顯示就可以了彤悔，所以實現(xiàn)這個方法很簡單。
在table view 中顯示一個section
- 在 MealTableViewController.swift中索守，找到numberOfSections(In:)數(shù)據(jù)源方法晕窑。模版實現(xiàn)看上去是這樣的：
override func numberOfSections(in tableView: UITableView) -> Int {
// #warning Incomplete implementation, return the number of sections
return 0
}
- 把返回值改為1，刪掉警告注釋卵佛。
override func numberOfSections(in tableView: UITableView) -> Int {
return 1
}
這個代碼讓table view顯示1個部分杨赤。你刪掉的注釋說的是#warning Incomplete implementation（警告 沒有完成實現(xiàn)），但你已經(jīng)實現(xiàn)了截汪，所以就刪掉了疾牲。
接下來的數(shù)據(jù)源方法，tableView(_:numberOfRowsInSection:)衙解，高速表視圖一個給定的部分里面有多少行阳柔。你的表視圖只有一個部分，并且每個Meal對象都應(yīng)該有自己的行蚓峦。這就意味著行數(shù)應(yīng)該是meals數(shù)組里Meal對象的數(shù)目舌剂。
返回table view的行數(shù)
- 在MealTableViewController.swift中，找到tableView(_:numberOfRowsInSection:)數(shù)據(jù)源方法暑椰。它的模版實現(xiàn)看上去是這樣的：
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
// #warning Incomplete implementation, return the number of rows
return 0
}
你要返回你有的菜品樹木霍转。Array有一個屬性稱為count，它返回數(shù)組中項目的總數(shù)一汽，所以行數(shù)就是meals.count避消。
- 改變tableView(_:numberOfRowsInSection:)數(shù)據(jù)源方法返回合適的行樹，移除警告注釋召夹。
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return meals.count
}
最后一個數(shù)據(jù)源方法岩喷，tableView(_:cellForRowAt:)，為給定的行配置并提供一個cell用來顯示监憎。表視圖中的每個行都有一個cell均驶，這個cell決定行中顯示的內(nèi)容以及這些內(nèi)容如何布局。
對于只有少量行的表視圖枫虏，所有行或許都在屏幕上妇穴，所以這個方法調(diào)用表中的每一行。但是有很多行的表視圖隶债，在給定的時間里只有小部分能夠顯示在屏幕上腾它。表視圖如果只請求需要被顯示的行的cell就會大大提高了效率，這就是tableView(_:cellForRowAt:)允許表視圖做的死讹。
對于在table view中任何給定的row瞒滴，你通過獲取在meals數(shù)組中的合適的Meal來配置cell，然后用Meal類的合適值來設(shè)置cell的屬性。
在table view中配置和顯示cell
- 在MealTableViewController.swift妓忍，找到tableView(_:cellForRowAt:) 數(shù)據(jù)源方法并取消注釋虏两。（要取消注釋，只要刪除圍繞它的 /* 和 */字符世剖。）
完成后這個這個方法看上去是這樣的：
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "reuseIdentifier", for: indexPath)
// Configure the cell...
return cell
}
dequeueReusableCell(withIdentifier:for:)方法從這個table view中請求一個cell定罢。作為替代在用戶滾動cell的時候創(chuàng)建新cell并刪除舊cell的方式，表格會盡可能的重用cell旁瘫。如果沒有可用的cell祖凫， dequeueReusableCell(withIdentifier:for:)會實例化一個新的；但是如果cell滾動到屏幕的外面酬凳，它們會被重用惠况。標(biāo)識符（identifier）會告訴dequeueReusableCell(withIdentifier:for:)哪個類型的cell要被創(chuàng)建或重用。
為了這段代碼能夠工作宁仔，你需要改變在storyboard中的cell（MealTableViewCell）標(biāo)識符屬性稠屠，然后添加代碼來配置cell。
- 在這個方法一開始的地方添加下面的代碼：
// Table view cells are reused and should be dequeued using a cell identifier.
let cellIdentifier = "MealTableViewCell"
這使用storyboard中設(shè)置的標(biāo)識符創(chuàng)建了一個常量翎苫。
- 使用cellIdentifier變量更新方法中的標(biāo)識符完箩，像下面這樣：
let cell = tableView.dequeueReusableCell(withIdentifier: cellIdentifier, for: indexPath)
- 因為你創(chuàng)建了一一個你想用的自定義cell類，將cell的類型降級到你自定義的cell的子類拉队，MealTableViewCell弊知。
guard let cell = tableView.dequeueReusableCell(withIdentifier: cellIdentifier, for: indexPath) as? MealTableViewCell else {
fatalError("The dequeued cell is not an instance of MealTableViewCell.")
}
這段代碼有很多事要做：
- as? MealTableViewCell表達式試圖把返回對象從UITableViewCell類降級到MealTableViewCell類。這個返回值是一個可選值（optional）粱快。
- guard let表達式會安全解包這個可選值秩彤。
- 如果你的storyboard設(shè)置正確，并且cellIdentifier匹配storyboard的標(biāo)識符事哭，那么降級處理將不會失敗漫雷。如果降級失敗，fatalError()函數(shù)就會在控制臺打印錯誤信息鳍咱，并終止應(yīng)用降盹。
- 在guard語句后面，添加下面的代碼：
// Fetches the appropriate meal for the data source layout.
let meal = meals[indexPath.row]
這個代碼從meals數(shù)組獲取合適的菜品對象谤辜。
- 現(xiàn)在蓄坏，使用meal對象來配置你的cell。用下面的代碼來替換// Configure the cell注釋丑念。
cell.nameLabel.text = meal.name
cell.photoImageView.image = meal.photo
cell.ratingControl.rating = meal.rating
這個代碼為每個在table view cell中的視圖設(shè)置合適的數(shù)據(jù)涡戳，這些數(shù)據(jù)來自meal對象。
你的tableView(_:cellForRowAt:)方法看起來是這樣的：
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
// Table view cells are reused and should be dequeued using a cell identifier.
let cellIdentifier = "MealTableViewCell"
guard let cell = tableView.dequeueReusableCell(withIdentifier: cellIdentifier, for: indexPath) as? MealTableViewCell else {
fatalError("The dequeued cell is not an instance of MealTableViewCell.")
}
// Fetches the appropriate meal for the data source layout.
let meal = meals[indexPath.row]
cell.nameLabel.text = meal.name
cell.photoImageView.image = meal.photo
cell.ratingControl.rating = meal.rating
return cell
}
在用戶界面顯示數(shù)據(jù)的最后一步是把MealTableViewController.swift中定義代碼連接到菜品列表場景脯倚。
將Table View Controller指向MealTableViewController.swift
- 打開storyboard渔彰。
-
通過點擊在場景dock直到整個場景有了一個藍色的輪廓來選擇table view controller嵌屎。
image: ../Art/CTV_scenedock_table_2x.png - 打開Identity inspector。
-
在Identity inspector中恍涂，找到Class字段宝惰，并選擇MealTableViewController。
image: ../Art/CTV_inspector_identity_tablevc_2x.png
檢查點：運行應(yīng)用再沧。你在 viewDidLoad()方法中添加的項目列表應(yīng)該顯示在table view的cell上了尼夺。你可能注意到在table view cell和狀態(tài)欄之間有一個小的重疊——你將在下一課修復(fù)它。
為導(dǎo)航準(zhǔn)備菜品詳情場景
當(dāng)你準(zhǔn)備在FoodTracker應(yīng)用中實現(xiàn)導(dǎo)航产园，你需要刪除一些占位的代碼和你不再需要的的用戶界面汞斧。
清除項目不使用的部分
-
打開storyboard并查看菜品詳情場景夜郁。
你的菜品詳情場景的用戶界面看上去是這樣的：
image: ../Art/CTV_mealsceneUI_old_2x.png -
在這個場景中什燕，選擇Meal Name 標(biāo)簽（label），并按下刪除鍵刪除它竞端。
在棧視圖中的其他元素會自動重定位屎即。
image: ../Art/CTV_mealsceneUI_new_2x.png - 打開ViewController.swift。
- 在ViewController.swift中事富，找到textFieldDidEndEditing(_:)方法技俐。
func textFieldDidEndEditing(_ textField: UITextField) {
mealNameLabel.text = textField.text
}
- 刪除設(shè)置label的text屬性的行。
mealNameLabel.text = textField.text
你將很快使用新的實現(xiàn)來替換它统台。
- 在ViewController.swift雕擂，找到mealNameLabel的outlet，并刪除它贱勃。
@IBOutlet weak var mealNameLabel: UILabel!
因為現(xiàn)在你有兩個視圖控制器在項目中井赌，需要給ViewController.swift一個更加有意義的名字。
重命名ViewController.swift文件
- 在project navigator贵扰，點擊 ViewController.swift文件一次仇穗，并按下回車鍵。
Xcode會允許你為這個文件輸入一個新名字戚绕。 - 重命名為MealViewController.swift纹坐，按下回車鍵。
- 在MealViewController.swift中舞丛，找到類聲明行
class ViewController: UIViewController, UITextFieldDelegate, UIImagePickerControllerDelegate, UINavigationControllerDelegate {
- 改變類名為MealViewController
class MealViewController: UIViewController, UITextFieldDelegate, UIImagePickerControllerDelegate, UINavigationControllerDelegate {
- 在文件頂部的注釋中耘子，也把名字從ViewController.swift 改為MealViewController.swift。
- 打開storyboard球切。
-
通過點擊它的場景dock選擇視圖控制器拴还。
image: ../Art/CTV_scenedock_mealscene_2x.png - 選中這個視圖控制器，打開Identity inspector欧聘。
-
在Identity inspector片林，在Class字段把ViewController改為MealViewController。
image: ../Art/CTV_mealscenefinal_2x.png
檢查點：構(gòu)建或運行應(yīng)用。一切應(yīng)該如常费封。
小結(jié)
在本課中焕妙，你構(gòu)建了一個自定義的table view cell。你把模型對象附加到了table view controller弓摘。你給模型添加了樣本數(shù)據(jù)焚鹊，并且你實現(xiàn)使用模型數(shù)據(jù)動態(tài)的填充表格所需的表視圖控制器代碼。
下一課韧献，你將添加在表視圖和菜品視圖之間導(dǎo)航的功能末患。
注意
想看本課的完整代碼，下載這個文件并在Xcode中打開锤窑。
下載文件
