ここでは、TableView の使い方について説明します。TableView を使用するとデータをテーブル状に表示できます。この TableView はさまざまな Mac アプリケーションで見かけることができます。

TableView を配置する

それでは、新規プロジェクトを作成し Table View を配置してみましょう。

データソースを接続する

TableView はデータソースという仕組みを用いて、データをテーブルに表示します。データソースは、UI 部品で表示する内容が変更したというイベントが発生すると、プログラム側からデータを提供してあげるという処理が行われます。アクションメソッドを接続したと同じように、どこから提供されるかを TableView に接続してあげる必要がります。

以下の図のように、control キーを押しながら TableView から App Delegate へドラッグします。

一覧に表示されている [dataSource] を選択して接続します。

AppDelegate クラスからデータを提供するために、NSTableViewDataSource プロトコルの以下のメソッドを実装します。

1
2

- (NSInteger)numberOfRowsInTableView:(NSTableView *)aTableView
- (id)tableView:(NSTableView *)aTableView objectValueForTableColumn:(NSTableColumn *)aTableColumn row:(NSInteger)rowIndex

最初に numberOfRowsInTableView: メソッドが呼び出され、データが何行分あるのかを返します。 tableView:objectValueForTableColumn:row: メソッドが行数と列数に応じて呼び出されるので、テーブルに表示するデータを返してあげます。

1
2
3
4
5
6
7
8
9
10
11
12
13

class AppDelegate
  attr_accessor :window

  def numberOfRowsInTableView(aTableView)
    # データが何行あるかを返す
    2
  end

  def tableView(aTableView, objectValueForTableColumn: aTableColumn, row: rowIndex)
    # テーブルに表示するデータを返す
    "foo"
  end
end

実行すると、以下のように表示されます。

セルごとに表示する内容を変える

上記のプログラムでは全てのセルで foo としか表示されないので、セルごとに表示するデータを変更してみましょう。

以下の図のように 1 列目の Table カラムを選択し、Identifier に name を設定します。

同じように、今度は 2 列目の Table カラムを選択し、Identifier に age を設定します。

tableView:objectValueForTableColumn:row: メソッドを以下のように変更してみましょう。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

  def tableView(aTableView, objectValueForTableColumn: aTableColumn, row: rowIndex)
    # テーブルに表示するデータを返す
    # 2行 x 2列 = 4回、このメソッドが呼び出される
    if rowIndex == 0
      # 1行目のデータ
      case aTableColumn.identifier
      when 'name' # 1列目のデータ
        str = "Steven Paul Jobs"
      when 'age'  # 2列目のデータ
        str = "56"
      end
    end

    if rowIndex == 1
      # 2行目のデータ
      case aTableColumn.identifier
      when 'name' # 1列目のデータ
        str = "Stephen Gary Wozniak"
      when 'age'  # 2列目のデータ
        str = "61"
      end
    end

    return str
  end

rowIndex の値でどの行のデータが必要とされているのか判別できます。列は、aTableColumn.identifier の値によって判別できます。

列を追加する

TableView は初期状態で 2 列分のデータを表示します。以下の図のように、[Table View] を選択した状態で [Show the attributes inspector] をクリックします。[Columns] に表示する列数を指定すると、TableView に列を追加することができます。

セルに画像を表示する

今度は TableView のセルに画像を表示してみましょう。初期状態で TableView のセルには「Text Field Cell」という部品が使われています。

この Text Field Cell は名前の通りに Text しか表示できません。画像を表示するためには、「Image Cell」という部品を使います。次の図のように、Object Library から Image Cell を画像を表示するセルの Text Field Cell へドロップして置き換えます。

Image Cell へ置き換えると、Window に配置した TableView は以下のように表示されます。

Image Cell の Identifier を image と設定します。tableView:objectValueForTableColumn:row: メソッドで、Image Cell のデータに NSImage のオブジェクトを返すようにするとセルに画像が表示されます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

  def tableView(aTableView, objectValueForTableColumn: aTableColumn, row: rowIndex)
    # テーブルに表示するデータを返す
    if rowIndex == 0
      # 1行目のデータ
      case aTableColumn.identifier
      when 'image'
        nsurl = NSURL.URLWithString("http://images.apple.com/apple-events/images/overview_march2011_20110302_20110301.jpg")
        data = NSImage.alloc.initWithContentsOfURL(nsurl)
      when 'name'
        data = "Steven Paul Jobs"
      when 'age'
        data = "56"
      end
    end

    return data
  end