このエントリーをはてなブックマークに追加

XcodeでCocoa, Swiftを勉強 Cell BasedのNSTableViewを作る

NSTableView、表ですね。
これには二つタイプがあるみたいです。Cell BasedとView Based。
詳しくはよく知らんのですが、後者がより複雑なことができるらしいです。
ただしそれだけ扱うのが難しいようですが。

今回はCell BasedのNSTableViewを使ってテキストを追加するだけの簡単ものを作ります。

まずはTableView、Text Field、Push Buttonをポンポンと置いていく




Table ViewのContent ModeがCell Basedになっているのを確認


Table ColumnのIdentifierを設定



キーボードのcontrolキーを押しながら、こんな風にマウスドラッグして、
Table ViewのdelegateとdataSourceをdelegateする


NSTableViewDelegate, NSTableViewDataSourceを追加
Table View, Text Field, Push Buttonを接続


で、コーディングしていく。最終的には次のようなものになった。

import Cocoa

@NSApplicationMain

class AppDelegate: NSObject, NSApplicationDelegate, NSTableViewDelegate, NSTableViewDataSource  {

    @IBOutlet weak var window: NSWindow!
    @IBOutlet weak var tableView: NSTableView!
    @IBOutlet weak var txtCell1: NSTextField!
    @IBOutlet weak var txtCell2: NSTextField!
    @IBOutlet weak var btnPost: NSButton!
    
    //TableViewで扱う値が入った配列
    var tableArray:[NSDictionary] = []
    
    //初期に呼び出される 配列の数(行数)を返す
    func numberOfRowsInTableView(tableView: NSTableView) -> Int
    {
        return self.tableArray.count
    }

    //配列更新時に呼び出される 配列とカラムをidentifierで紐付け
    func tableView(tableView: NSTableView, objectValueForTableColumn tableColumn: NSTableColumn?, row: Int) -> AnyObject?
    {
        return self.tableArray[row][(tableColumn?.identifier)!]
    }

    @IBAction func btnPost(sender: NSButton) {
        self.tableArray.append(["tableColumn1": self.txtCell1.stringValue, "tableColumn2": self.txtCell2.stringValue])
        self.tableView.reloadData()
    }
    
    func applicationWillTerminate(aNotification: NSNotification) {
        // Insert code here to tear down your application
    }
    
    func applicationDidFinishLaunching(aNotification: NSNotification) {
        // Insert code here to initialize your application
    }

}

numberOfRowsInTableView と objectValueForTableColumn は NSTableView(Cell Based)では必須メソッドらしい。
numberOfRowsInTableViewで行数を返す。
objectValueForTableColumnで配列の値とカラムを紐付けるみたいな?(適当)
Table ColumnのIdentifierで設定した名前と配列(辞書)のキー名を同じにする。した方が楽。
次回はView Basedで同じようなことをしたいと思います。