Start Developing iOS Apps (Swift
连接Table Cell用户界面到代码
在你能够在table view cell中显示动态数据之前，你需要创建outlet来连接storyboard中的属性和在MealTableViewCell.swift文件中代表table view cell的代码。
连接这些视图到MealTableViewCell.swift代码
- 在storyboard中，选择table view cell中的label。
-
打开助理编辑器。
image: ../Art/assistant_editor_toggle_2x.png
-
如有必要，尽可能扩展工作区空间。
image: ../Art/navigator_utilities_toggle_on_2x.png
-
在编辑器选择器栏中，它显示在助理编辑器的顶部，把助理视图从预览视图切换到切换到Automatic > MealTableViewCell.swift.
image: ../Art/CTV_assistant_switchtocode_2x.png
MealTableViewCell.swift显示在右侧的编辑器中。
- 在MealTableViewCell.swift中，找到class行：
class MealTableViewCell: UITableViewCell {
- 在class行的下面，添加下面注释：
//MARK: Properties
-
按住Control键，从画布中拖拽label到右侧编辑器显示的代码中，在刚才添加的注释的下面释放。
image: ../Art/CTV_label_dragoutlet_2x.png
-
在弹出的对话框中，Name字段键入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控件到右侧编辑器显示的代码中，在刚才添加的photoImageView属性下面释放。
image: ../Art/CTV_ratingcontrol_addoutlet_2x.png
在MealTableViewCell.swift中你的outlet看上去应该是这样的：
@IBOutlet weak var nameLabel: UILabel!
@IBOutlet weak var photoImageView: UIImageView!
@IBOutlet weak var ratingControl: RatingControl!
加载初始数据
为了在你的table cell中显示真实数据，你需要编写代码来加载这些数据。在这点上，你已经有菜品的数据模型了：Meal类。你还需要保存这些菜品的一个列表。跟踪这个数据的最自然的地方是与菜品列表场景连接的自定义视图控制器子类。这个视图控制器将管理显示菜品列表的视图，并有一个引用指向在用户界面显示的内容背后的数据模型。
首先，创建一个自定义的table view controller子类来管理这个菜品列表场景。
创建一个UITableViewController子类
- 选择File > New > File (或者按下 Command-N)。
- 在出现的对话框中，选择iOS，并且选择Cocoa Touch Class。
- 点击Next。
- 在Class字段，键入Meal。
- 在Subclass of字段，选择UITableViewController。
把类标题改为MealTableViewController。 - 确保Also create XIB file选项没有被选中。
XIB文件是一个旧的通过视图控制器设计视图管理的方式。它们早于storyboard出现，基本相当于代表storyboard上的单一视图。这个视图控制器不需要一个XIB文件，因为你已经定义它连接应用的storyboard了。 - 确保语言是Swift。
- 点击Next。
保存位置是项目目录。
Group选项为默认的FoodTracker。
在目标区域，你的应用被选择，而应用的tests没有被选择。 - 其他的选项保持不变，点击Create。
Xcode创建了MealTableViewController.swift，一个定义自定义table view controller子类的源代码文件。 - 必要时，在Project navigator，拖拽MealTableViewController.swift到和其他的Swift文件一起。
在这个自定义类中，你能定义一个属性来存储Meal对象的列表。Swift标准（Swift standard library）包含一个被称为Array（数组）的结构，它能够很好的跟踪列表的项。
加载初始数据
-
返回标准编辑器。并尽可能的扩展工作区空间。
image: ../Art/CTV_scenedock_table_2x.png
- 打开Identity inspector。
-
在Identity inspector中，找到Class字段，并选择MealTableViewController。
image: ../Art/CTV_inspector_identity_tablevc_2x.png
检查点：运行应用。你在 viewDidLoad()方法中添加的项目列表应该显示在table view的cell上了。你可能注意到在table view cell和状态栏之间有一个小的重叠——你将在下一课修复它。
image: ../Art/CTV_sim_finalUI_2x.png
为导航准备菜品详情场景
当你准备在FoodTracker应用中实现导航，你需要删除一些占位的代码和你不再需要的的用户界面。
清除项目不使用的部分
-
打开storyboard并查看菜品详情场景。
你的菜品详情场景的用户界面看上去是这样的：
image: ../Art/CTV_mealsceneUI_old_2x.png
-
在这个场景中，选择Meal Name 标签（label），并按下删除键删除它。
在栈视图中的其他元素会自动重定位。
image: ../Art/CTV_mealsceneUI_new_2x.png
- 打开ViewController.swift。
- 在ViewController.swift中，找到textFieldDidEndEditing(_:)方法。
func textFieldDidEndEditing(_ textField: UITextField) {
mealNameLabel.text = textField.text
}
- 删除设置label的text属性的行。
mealNameLabel.text = textField.text
你将很快使用新的实现来替换它。
- 在ViewController.swift，找到mealNameLabel的outlet，并删除它。
@IBOutlet weak var mealNameLabel: UILabel!
因为现在你有两个视图控制器在项目中，需要给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
检查点：构建或运行应用。一切应该如常。
小结
在本课中，你构建了一个自定义的table view cell。你把模型对象附加到了table view controller。你给模型添加了样本数据，并且你实现使用模型数据动态的填充表格所需的表视图控制器代码。
下一课，你将添加在表视图和菜品视图之间导航的功能。
注意
想看本课的完整代码，下载这个文件并在Xcode中打开。
下载文件
