显示昆虫列表@H_403_3@

在 OS X中，Table View使用NSTableView@H_403_3@类，它等同于iOS的UITableView@H_403_3@类，但有一个最大的不同是：NSTableView@H_403_3@的每一行有多个列或多个单元格。

·在@H_403_3@OS X 10.7Lion@H_403_3@之前@H_403_3@,table view cell继承于NSCell类。而后者并非NSView类，因此开发者需要自己处理绘图和鼠标事件。

·从@H_403_3@ OS X 10.7@H_403_3@开始@H_403_3@,table view从 NSView继承。这样就和UITableView差不多了。cell也有相应的View类型，因此也和iOS中的类似——这样我们就轻松得多了!

在本教程中，使用的是基于View的TableView。如果你想了解NSTableView的用法，你可以阅读这里,它对 table views 的用法进行了详细的说明。

打开MasterViewController.xib@H_403_3@，选中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@H_403_3@。

选择Table View，打开Connections面板，在Outlets一项下找到delegate和data source。

点击delegate右边的小圆圈，拖到Objects面板中的“File’s Owner”上。

这将吧Table View 的delegate 属性设置为MasterViewController@H_403_3@。重复同样的动作，设置Data Source属性。

打开MasterViewController.swift@H_403_3@将下列代码放在文件最后：

我们通过扩展让MasterViewController@H_403_3@采用NSTableViewDelegate@H_403_3@和NSTableViewDataSource@H_403_3@协议。

要让列表渲染数据至少需要实现两个数据源方法。

首先是numberOfRowsInTableView@H_403_3@方法，OS通过这个方法获取要渲染的表格行数。

其次是tableView(_:viewForTableColumn:row:)方法。OS通过这个方法知道如何去渲染每行中的每个单元格。在这个方法中，我们需要用数据对单元格进行填充。

运行程序，如果一切正常，我们将在表格中看到昆虫列表。

下载资源@H_403_3@

为了完成本教程，你可能需要下载这些压缩包，并解压缩。

注意@H_403_3@:@H_403_3@为了将昆虫分成 “一点也不可怕” 到 “极度恐怖”几个级别，你还需要用到一个开源的分级组件EDStarRating，这也被包含在压缩包中。

在本教程中，我们不会解释如何实现这个组件，而只是演示如何在项目中使用它。压缩包中还包括了一个NSImage类别，可以从一张大图片生成缩略图。 此外，还包括3张怪脸图片，分别用于显示昆虫的不同级别。

关于 EDStarRating组件，你可以参考它的github主页.

首先，在项目导航窗口中创建一个名为Art的文件夹，并将3个怪脸图片拖到这个文件夹中——确保“Copy items if needed” 已勾选,以及Add to targets中的“ScaryBugsMac” 已选上。

再创建一个名为“Views” 的文件夹,将EDStarRating.h@H_403_3@和EDStarRating.m@H_403_3@拖到该文件夹。 再次确保“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@H_403_3@和NSImage+Extras.m@H_403_3@,重复上述步骤，只不过这次将它们拖进的是“Helpers”文件夹。

打开ScaryBugsMac-Bridging-Header.h@H_403_3@加入以下import语句：

以下为最终效果，其中桥接头文件已经被我们移到 Supporting Files 文件夹中: