显示昆虫列表
在 OS X中，Table View使用NSTableView类，它等同于iOS的UITableView类，但有一个最大的不同是：NSTableView的每一行有多个列或多个单元格。
·在OS X 10.7Lion之前,table view cell继承于NSCell类。而后者并非NSView类，因此开发者需要自己处理绘图和鼠标事件。
·从 OS X 10.7开始,table view从 NSView继承。这样就和UITableView差不多了。cell也有相应的View类型，因此也和iOS中的类似——这样我们就轻松得多了!
在本教程中，使用的是基于View的TableView。如果你想了解NSTableView的用法，你可以阅读这里,它对 table views 的用法进行了详细的说明。
打开MasterViewController.xib，选中table view。注意Table View位于Scroll View中的Clip View中，因此第一个点击你选中的会是ScrollView，第二次点击你选中的才是ClipView，第三次点击才会选中Table View。
当然，你也可以直接从IB的Objects面板中选择Table View对象（展开 Clip View对象）。
选中Table View之后，在属性面板中，确认Content Mode一项是设置为View Based而不是Cell Based。同时，因为我们的列表仅显示单列，所以将Columns属性修改为1。
勾选 “Alternating Rows”属性，让表格以“明暗颜色交替”的方式绘制单元格。
反选 “Headers” 属性，因为我们不需要在表格上方显示一个标题。
接下来我们修改单元格的大小。选择Table View上的列，拖动它的大小使其占据整个表格宽度。
然后是单元格的配置。我们需要在单元格中显示昆虫的图片和名称，因此需要在Cell中添加一个Image和一个文本控件。
IB中有一种带Image View和Text Field的NSTableCellView对象，我们可以使用它。
在Object library 面板中，找到 “Image & Text Table Cell View”,将它拖到Table View中。
在Table View中，将原来的cell删除（用delete键）。
选中Table View Cell，在Size面板中，将高度调整为32。
然后选中Image View和 Text Field，使它们位于单元格中心，并调整ImageView和Text Field的大小，使它们看起来如下图所示：
接下来要为每一列设置一个id。当然对于本教程来说，我们只有一个列，因此列id可能不是必须的。
在Objects面板中选择表格列，打开Identity面板，将Identifier设置为BugColumn。
如同在iOS中一样，Table View也有Data Source和Delegate属性。正常情况下，这两个属性都是同一个对象，即MasterViewController。
选择Table View，打开Connections面板，在Outlets一项下找到delegate和data source。
点击delegate右边的小圆圈，拖到Objects面板中的“File’s Owner”上。
这将吧Table View 的delegate 属性设置为MasterViewController。重复同样的动作，设置Data Source属性。
最终如下图所示：打开MasterViewController.swift将下列代码放在文件最后：
// MARK: - NSTableViewDataSource extension MasterViewController: NSTableViewDataSource { func numberOfRowsInTableView(aTableView: NSTableView!) -> Int { return self.bugs.count } func tableView(tableView: NSTableView!,viewForTableColumn tableColumn: NSTableColumn!,row: Int) -> NSView! { // 1 var cellView: NSTableCellView = tableView.makeViewWithIdentifier(tableColumn.identifier,owner: self) as NSTableCellView // 2 if tableColumn.identifier == "BugColumn" { // 3 let bugDoc = self.bugs[row] cellView.imageView!.image = bugDoc.thumbImage cellView.textField!.stringValue = bugDoc.data.title return cellView } return cellView } } // MARK: - NSTableViewDelegate extension MasterViewController: NSTableViewDelegate { } |
我们通过扩展让MasterViewController采用NSTableViewDelegate和NSTableViewDataSource协议。
要让列表渲染数据至少需要实现两个数据源方法。
首先是numberOfRowsInTableView方法，OS通过这个方法获取要渲染的表格行数。
其次是tableView(_:viewForTableColumn:row:)方法。OS通过这个方法知道如何去渲染每行中的每个单元格。在这个方法中，我们需要用数据对单元格进行填充。
运行程序，如果一切正常，我们将在表格中看到昆虫列表。
下载资源
为了完成本教程，你可能需要下载这些压缩包，并解压缩。
注意:为了将昆虫分成 “一点也不可怕” 到 “极度恐怖”几个级别，你还需要用到一个开源的分级组件EDStarRating，这也被包含在压缩包中。
在本教程中，我们不会解释如何实现这个组件，而只是演示如何在项目中使用它。压缩包中还包括了一个NSImage类别，可以从一张大图片生成缩略图。 此外，还包括3张怪脸图片，分别用于显示昆虫的不同级别。
关于 EDStarRating组件，你可以参考它的github主页.
首先，在项目导航窗口中创建一个名为Art的文件夹，并将3个怪脸图片拖到这个文件夹中——确保“Copy items if needed” 已勾选,以及Add to targets中的“ScaryBugsMac” 已选上。
再创建一个名为“Views” 的文件夹,将EDStarRating.h和EDStarRating.m拖到该文件夹。 再次确保“Copy items if needed” 已勾选以及Add to targets中的“ScaryBugsMac” 已选上。
点击Finish. 在下一窗口当被问到 “Would you like to configure an Objective-C bridgingheader?” 时选择Yes。这将创建一个Objective-C 类到Swift 代码的桥接头文件。
对于NSImage+Extras.h和NSImage+Extras.m,重复上述步骤，只不过这次将它们拖进的是“Helpers”文件夹。
打开ScaryBugsMac-Bridging-Header.h加入以下import语句：
#import "EDStarRating.h" #import "NSImage+Extras.h" |
