Mac Cocoa NSTableView 程式與綁定

經過這兩篇「NSOutlineView 使用程式呈現樹狀資料」、「Mac Cocoa NSOutlineView 資料綁定」的練習,這次直接處理 NSTableView,果然駕輕就熟,稍為查一些資料,很快就做出成果了,畢竟它比 NSOutlineView 簡單,基本架構都差不多。

這篇就不談太多細節,只把重點記錄下來。

資料綁定

先由資料綁定做起。

準備資料

TableView 是表格狀的資料,所以就用藏經目錄的結構來處理,底下只有三個欄位,ID、經名與作譯者。

image

宣告 catalog 變數,它是 Catalog 物件的陣列,底下建立了三筆資料。

image

綁定元件

處理 NSOutlineView 時,要先拉取 Tree Controller 來當成綁定的控制器,處理 NSTableView 我就拉取 Array Controller 來測試。

因為資料有三個欄位,所以 Table View 也要改成三欄,在屬性中就可以找到。

image

Array Controller 同樣 Bind to 選擇 View Controller,Model Key Path 則填入 self.catalog。

image

接著綁定 Table View,Bind to 選 Array Controller,Controller Key 保留 arrangedObjects。Model Key Path 則不填,我依然不了解這裡的意思。

image

第一個 Table View Cell (別選錯了) Bind to 選 Table Cell View,Model Key Path 填入 objectValue.id。

image

第二個與第三個 Table View Cell 則分別綁定 objectValue.name 和 objectValue.byline,如此三欄就綁定完成了。

執行結果

執行結果成功。

image

處理 Click 事件

把 Table View 拉一個 Outlet 到 ViewController,命名為 tableView。

由 Storyboard 的 Table View 拉 Action 到 ViewController,程式碼如下:

image

結果如下,右邊是依順序點選的結果。

image

程式處理

再來用程式來處理 TableView。

設定元件

再拉一個 Table View 元件,資料還是用同樣的內容。

image

第二個 Table View 拉一個 Outlet 到 ViewController,命名為 tableView2。

image

回到 Storyboard,選第一個 Column,Identifier 命名為 column1。

第二、第三 Column 同樣命名為 column2, column3。

image

再選第一個 Table Cell View,將 Identifier 命令為 MyView,這個在程式會用到。

image

撰寫程式

先設定 tableView2 的資料來源和代理。

image

接著撰寫相關程式。

NSOutlineView 有四組程式要處理,NSTableView 比較少,只有二組,分別是 numberOfRows(tableView) 和 tableView(tableView:viewFortableColumn:row:)。

程式和說明如下。

 

extension ViewController: NSTableViewDelegate, NSTableViewDataSource {

    

    // 傳回有多少資料

    func numberOfRows(in tableView: NSTableView) -> Int {

        return catalog.count

    }

    

    // 傳回資料

    func tableView(_ tableView: NSTableView, viewFor tableColumn: NSTableColumn?, row: Int) -> NSView? {

 

        // 由 MyView 產生新的 NSView (NSTableCellView)

        let view = tableView2.makeView(withIdentifier: NSUserInterfaceItemIdentifier(rawValue: "MyView") , owner: self) as! NSTableCellView

        

        // 呈現的文字

        var text = ""

 

        // 判斷目前在哪一個欄位,呈現的內容會不同

        switch tableColumn!.identifier.rawValue {

            case "column1":

                text = catalog[row].id

            case "column2":

                text = catalog[row].name

            case "column3":

                text = catalog[row].byline

            default:

                break

        }

 

        // 將文字填入 View 中

        view.textField?.stringValue = text

        

        return view

    }

}

執行結果

執行結果成功。

image

 
重要度:
文章分類:

發表新回應