[GTK+] GtkTreeView を使う - えがわたにっき

GtkTreeView とは？

http://library.gnome.org/devel/gtk/stable/GtkTreeView.html
ツリー構造やリストを表示するためのウィジェット。
GtkTreeView というからにはツリー構造、つまり階層を持つデータ構造を表示するのが唯一の用途のようにも見える。しかし階層構造の有無を問わず、行と列を使って2次元的に表示したいのであれば、GtkTreeView での表示に適している。

GtkTreeView の構造

GtkTreeView はいわゆる MVC(Model-View-Controller)構造をとっていて、データを保持する Model、表示方法を決める View、そしてそれらを利用しながら全体をコントロールする Controller が分離されている。
Model と View については、専用のクラスが用意されている (Modelであれば、GtkListStore, GtkTreeStore など、View であれば GtkTreeViewColumn など)。これらのクラスを用途に応じて選び、大本の GtkTreeView に関連付けて使うことになる。

GtkTreeView の生成

(サンプルコードのソース)

生成自体は gtk_tree_view_new() でできる。

#include <gtk/gtk.h>

int main(int argc, char **argv)
{
    GtkWidget *window, *treeview;

    gtk_init(&argc, &argv);

    window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
    gtk_window_set_title(GTK_WINDOW(window), "明日の天気");
    g_signal_connect(G_OBJECT(window), "destroy",
                     G_CALLBACK(gtk_main_quit), NULL);

    /*  GtkTreeView の生成  */
    treeview = gtk_tree_view_new();

    gtk_container_add(GTK_CONTAINER(window), treeview);
    gtk_widget_show_all(window);

    gtk_main();
    return 0;
}

もちろん中のデータもその表示方法も定義していない状態では、真っ白のウィンドウが表示されるだけで、面白いことは何も起きない。それでも、一応ウィンドウ上に GtkTreeView ウィジェットは存在しているはず(多分)。

Model について(GtkListStore)

というわけで、この上に何か意味のあるものを表示させていこうと思う。まずはデータを格納するための Model = GtkTreeModel の準備から。

GtkTreeModel は、データを保持して GtkTreeView にデータを提供するための仕組みを備えている。といっても GtkTreeModel 自身はインタフェースにすぎず、実際には GtkTreeModel を実装したクラスを使用する。ビルトインで用意されているものとして

があるので、このどちらかを使っていればよい。

GtkListStore と GtkTreeStore の異なる点は、扱うことのできるデータ構造。GtkListStore は、階層構造を持たない、線形リストのみ扱うことができる。対して GtkTreeStore は、階層構造を含んだデータを扱うことができる。一見 GtkTreeStore のほうが優秀で、こちらだけあれば良いようにも見えるが、GtkListStore は構造が単純な分処理が高速なため、階層構造が特に必要なければ GtkListStore を使ったほうがよいだろう。(使い方もやや単純)

というわけで、まずは GtkListStore を使ってみる。

まずは今回作るものを決めよう。今回は、各地の天気予報データを表示するサンプルアプリを作ることにした。都市名と、天気、最高・最低気温を表示していくことにする。データ自体は Livedoor の Weather Hacks から、2010年12月4日時点での明日の天気を取得させていただいた。

場所	天気	最高気温	最低気温
東京	晴のち曇	17	9
群馬	晴時々曇	18	5
大阪	晴れ	16	7

最初にデータの格納先について定義する。

/* 
 *  Model の定義
 */
void create_model(GtkWidget *treeview)
{
    GtkListStore *store;

    /*  GtkListStore の生成、および列定義  */
    store = gtk_list_store_new(
                4,              //  要素の個数
                G_TYPE_STRING,  //  場所
                G_TYPE_STRING,  //  天気
                G_TYPE_INT,     //  最高気温
                G_TYPE_INT      //  最低気温
            );

    /*  treeview に結びつける  */
    gtk_tree_view_set_model(GTK_TREE_VIEW(treeview), GTK_TREE_MODEL(store));

    /*  一旦結びつけたら store 自体は開放してよい */
    g_object_unref(store);
}

gtk_list_store_new() の引数を使って、格納データの形式を定義する。RDBでいうDDLのようなものだと思うとイメージつかみやすいかも。まず列の数を指定し、その後にそれぞれの型を順番に指定していく。型の指定はここの冒頭にある #define 文あたりを参考にすれば大抵の用途には充分かと。

指定が終わったら、大元の GtkTreeView に関連付ける。これでこの GtkListStore が treeview 上で使用可能になる。

/*
 * Model に実データ追加
 */
void set_data(GtkWidget *treeview)
{
    GtkListStore *store;
    GtkTreeIter iter;

    //  treeview に結びつけられている Model を取得する。
    //  一旦、中のデータをすべて消去する。
    store = GTK_LIST_STORE( gtk_tree_view_get_model( GTK_TREE_VIEW(treeview) ) );
    gtk_list_store_clear(store);

    /*  新しいレコードを生成する(3レコード) */
    gtk_list_store_append(store, &iter);
    gtk_list_store_set(store, &iter,    //  格納先レコード
                        0, "東京",      //  0番めの値
                        1, "晴のち曇",   //  1番めの値
                        2, 17,         //  2番めの値
                        3, 9,          //  3番めの値
                        -1              //  終端
    );

    gtk_list_store_append(store, &iter);
    gtk_list_store_set(store, &iter, 0, "群馬", 1, "晴時々曇", 2, 18, 3, 5, -1);

    gtk_list_store_append(store, &iter);
    gtk_list_store_set(store, &iter, 0, "大阪", 1, "晴れ", 2, 16, 3, 7, -1);
}

次に、この GtkListStore に対して、実際のデータをセットする。データをセットするには、まずレコード格納用の領域を生成する必要がある。それを行っているのが gtk_list_store_append()。レコードが生成されると、変数 iter に新規レコードへの参照が格納される。
そして新規レコードに対して値をセットする。1番目のレコードのみ見やすいようコメントを入れたが、格納先レコードを指定したあと、第3引数以降で、データの位置-値のセットを指定していく。

そしてこれらを main()関数から呼び出す。

    /*  Model の定義  */
    create_model(treeview);

    /*  Model に実データ追加  */
    set_data(treeview);

もちろんこの時点で実行しても何も表示されない。最後に、データの表示を行うための view を追加しよう。

View について

View の定義は「列」単位で行われる。列を定義するために使用されるクラスは GtkTreeViewColumn。このインスタンスを、必要な列の数だけ TreeView に追加していく。

GtkTreeViewColumn 自体は、列の「枠」を用意するにすぎない。実際、GtkTreeViewColumn の properties を見てみると、列幅やヘッダ行に表示されるタイトルなどの外形的なものを定義できるだけで、その中に表示される具体的なデータには何ら関心を持っていないことが分かる。

データを表示するためには、その「枠」の中に、表示機能を司る「何か」を入れてやらなければならない。その「何か」というのがGtkCellRenderer。GtkTreeViewColumn に含めることのできる、具体的なデータを扱うためのオブジェクトだ。GtkCellRendererのサブクラスとして、以下の4つがビルトインで用意されている。

GtkCellRendererText
GtkCellRendererPixbuf
GtkCellRendererProgress
GtkCellRendererToggle

例えば GtkCellRendererText を GtkTreeViewColumn に追加すれば、その列にテキストを表示することが可能になる。その他のクラスを選べば、画像やプログレスバー、トグルスイッチを表示させることもできる。追加可能な GtkCellRenderer は1つとは限らないので、例えば1つの列にアイコン (GtkCellRendererPixbuf) とテキスト(GtkCellRendererText) を並べて表示させるということも可能だ。

また、GtkCellRenderer はデータの表示に関する一切のことを請け負っているため、データ表示そのものだけでなく、その表示のされ方についても設定することができる。例えばテキストであれば、表示色やフォントについても GtkCellRenderer(Text) に対して指定することになる。

まぁ今回はシンプルに、テキストのみを扱うことにする。

/*
 * treeview に列を1つ追加
 */
void append_column_to_treeview(GtkWidget *treeview, const char *title, const int order)
{
    GtkTreeViewColumn   *column;
    GtkCellRenderer *renderer;

    /*   CellRenderer の作成  */
    renderer = gtk_cell_renderer_text_new();

    /*
     *  列を作成し、CellRenderer を追加する。 
     *   さらに Model との関連を定義する
     */
    column = gtk_tree_view_column_new_with_attributes(
                title,          //  ヘッダ行に表示するタイトル
                renderer,       //  CellRenderer
                "text",  order, //  Model の order 番めのデータを、renderer の属性 "text" に結びつける
                NULL            //  終端
             );

    /*   今生成した列を、大元の treeview に追加する  */
    gtk_tree_view_append_column(GTK_TREE_VIEW(treeview), column);
}


/*
 * treeview に View を定義する
 */
void create_view(GtkWidget *treeview)
{
    append_column_to_treeview(treeview, "場所", 0);
    append_column_to_treeview(treeview, "天気", 1);
    append_column_to_treeview(treeview, "最高気温", 2);
    append_column_to_treeview(treeview, "最低気温", 3);    
}

gtk_tree_view_column_new_with_attributes()について補足しておく。renderer の "text" 属性に、Model の order 番めのデータを結びつけているが、ここでは Model と View のマッピングを行っている。例えば一番最初に作成した列であれば order = 0 なので、Model に設定した 0 番目の情報、つまり場所情報(データでいうと「東京」「群馬」「大阪」)が、この列の GtkCellRenderer の属性 "text"、つまり表示される文字列そのものとしてセットされる。

ちなみに設定可能な GtkCellRenderer の属性は、text だけに限らない。例えば foreground に Model の値をセットするようにすれば、色の指定も可能となる。

GtkTreeView とは？

GtkTreeView の構造

GtkTreeView の生成

Model について(GtkListStore)

View について

実行結果