[Xamarin.Mac] テーブルビューを表示してみました

1 はじめに

CX事業本部の平内（SIN）です。

Xamarin.Macを使用すると、C#でネイティブなMacのアプリが作成可能です。 ここでは、私自身がXamarin.Macに入門して学習した事項を覚書として書かせて頂いています。

今回は、テーブルビューを確認してみました。

2 TableViewの配置

Interface Builderで、メインとなるビューTableViewを配置し、ウインドウいっぱいに表示されるように制約を追加します。

また、AssistantエディタでViewController.hを開いてOutletを接続します。 ※接続するコントロールがNSTableViewになっていることに注意が必要です。

各カラムのタイトルや、デフォルトの幅は、プロパティで設定できます。

この状態で実行すると、下記のような表示になります。

3 データクラス

表示するデータの構造を定義するため、「ファイル」-「新しいファイル」-「General」-「空のクラス」で新規にクラス(Person)を作成します。

クラスPersonは、超簡単な個人の情報で、名前(Name)と年齢(Age)だけを保持します。

public class Person {

    public string Name { get; set; } = "";
    public int Age { get; set; } = 0;

    public Person(string name, int age) {
        this.Name = name;
        this.Age = age;
    }
}

4　DataSourceとDelegate

TableViewにデータを表示するには、DataSourceとDelegateの仕組みが必要です。

(1) DataSource

NSTableViewDataSourceを継承したクラス(TableViewDataSource)を追加し、先のデータ(Person)のリストを保持します。

また、NSTableViewDataSourceのGetRowCountをオーバーライドし、データの個数を返すようにします。

using System;
using System.Collections.Generic;
using AppKit;

namespace Sample001 {
    public class TableViewDataSource : NSTableViewDataSource {

        public List<Person> Persons = new List<Person>();

        public TableViewDataSource(){
        }

        public override nint GetRowCount(NSTableView tableView) {
            return Persons.Count;
        }
    }
}

(2) Delegate

NSTableViewDelegateを継承したクラス(TableViewDelegate)を追加し、変数でDataSourceを定義しコンストラクタで初期化します。

また、NSTableViewDelegateのGetViewForItemをオーバーライドし、セルの生成と値の設定を行います。

GetViewForItemは、１つのセルを描画する度に呼ばれますが、返すデータは、rowで行、タイトルでカラムを識別しています。

using System;
using AppKit;

namespace Sample001 {
    public class TableViewDelegate : NSTableViewDelegate {

        private string identifier = "cell";
        private TableViewDataSource DataSource;

        public TableViewDelegate(TableViewDataSource dataSource) {
            this.DataSource = dataSource;
        }

        public override NSView GetViewForItem(NSTableView tableView, NSTableColumn tableColumn, nint row) {

            NSTextField view = (NSTextField)tableView.MakeView(identifier, this);
            if(view == null) {
                view = new NSTextField();
                view.Identifier = identifier;
                view.BackgroundColor = NSColor.Clear;
                view.Bordered = false;
                view.Selectable = false;
                view.Editable = false;
            }

            switch(tableColumn.Title) {
                case "Name":
                    view.StringValue = DataSource.Persons[(int)row].Name;
                    break;
                case "Age":
                    view.StringValue = DataSource.Persons[(int)row].Age.ToString();
                    break;
            }

            return view;
        }
    }
}

5 TreeViewの初期化

ViewControllerでAwakeFromNibをオーバーライドし、DataSourceの初期化と、コントロールへの紐付けを行います。

public partial class ViewController : NSViewController {

    //・・・・・・・略・・・・・・

    public override void AwakeFromNib() {
        base.AwakeFromNib();

        var DataSource = new TableViewDataSource();
        DataSource.Persons.Add(new Person("Taro", 20));
        DataSource.Persons.Add(new Person("Jiro", 18));
        DataSource.Persons.Add(new Person("Hanako", 14));

        TableView.DataSource = DataSource;
        TableView.Delegate = new TableViewDelegate(DataSource);
    }
}

ここまでの作業で、表示は以下のようになりました。

6 最後に

今回は、テーブルビューについて確認してみました。

見た目の表現は、インターフェースビルダーのプロパティで、殆ど設定可能です。

また、TableViewの各セルは、DelegateのGetViewForItem()で返すことで構成されています。今回は、NSTextFieldを返してテキストを表示していますが、要求される型はNSViewですので、自由に表現が可能でしょう。