Table Viewで表を表示する

2015年2月26日：OS X

　CocoaにはTable Viewという表を表示させる機能がついています。ここでは、Table Viewの使い方について解説します。使用する言語はSwiftです。

UIの作成

　はじめに、Cocoaアプリケーションのプロジェクトを作成します。そして、画像にTable Viewをドラッグ＆ドロップで貼り付けます。

userinterface

画面にいっぱいにTable Viewがなるように設定します。設置が完了して、UI画面の左下にある電池のようなボタンを押します。すると、UI部品一覧が表示されます。一覧を見るとTable Viewが追加されていることがわかります。

tableview

今回は、表の列を３つにします。そのために、Table Viewを選択して、Columnsを3にします。

edit

次に表のヘッダの名前を変更します。今回は

  1. 名前(テキスト型データ)
  2. 年齢(数値データ)
  3. アレルギ(Boolデータ)

とします。３つあるTable Cell Viewを順に選択してTitleを名前、年齢、アレルギとします。

Title

また、Identifierをそれぞれ、Name、Age、Allergyとします。

Main_storyboard

また、Widthをすべて100にしておいてください。

width

アレルギはチェックボックス型にしたいので、Text CellをCheck Box Cellへ変更します。ツールボックスから、Check Box Cellを選び、ドラッグ＆ドロップでアレルギのText Cellを置き換えます。

Main_storyboard_—_Edited

Table Viewからのイベントを取得するために、Table ViewのdataSourceとdelegateをドラッグ＆ドロップでView Controllerへつなげます。

View Controllerへつなげる

動作をコーディングする

ViewController.swiftへ移動して、以下のようにコーディングします。

class ViewController: NSViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
    }

    override var representedObject: AnyObject? {
        didSet {
        // Update the view, if already loaded.
        }
    }

    var dataArray:[NSMutableDictionary] = [["Name": "太郎", "Age": "25", "Allergy": 0],["Name": "二郎", "Age": "55", "Allergy": 1]];

    func numberOfRowsInTableView(aTableView: NSTableView!) -> Int
    {
        let numberOfRows:Int = dataArray.count
        return numberOfRows
    }

    func tableView(tableView: NSTableView!, objectValueForTableColumn tableColumn: NSTableColumn!, row: Int) -> AnyObject!
    {
        let object = dataArray[row] as NSMutableDictionary
        if ((tableColumn.identifier)=="Allergy")
        {
            return object[tableColumn.identifier] as? Int!
        }else if((tableColumn.identifier)=="Age"){
            var tmp:String?=object[tableColumn.identifier] as? String!
            if tmp != nil{
                return atof(tmp!)
            }else{
                return 0
            }
        }
        else
        {
            return object[tableColumn.identifier] as? String!
        }
    }

    func tableView(tableView: NSTableView, setObjectValue object: AnyObject?, forTableColumn tableColumn: NSTableColumn?, row: Int)
    {
        dataArray[row].setObject(object!, forKey: (tableColumn?.identifier)!)
    }

}

そして、実行すると以下のようになります。

result

著者：安井 真人(やすい　まさと)

TOP