用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的用法，你可以閱讀
開啟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 資料夾中:
