用Swift开发Mac App(3)

显示昆虫列表

在 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"

 

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