素人の独学GTK+3.0 26章：ツリービュー

簡単なリスト

９章で扱ったリストの復習をしてみる。

#include <gtk/gtk.h>

enum
{
  COLUMN_ID,
  COLUMN_NAME,
  N_COLUMNS
};

typedef struct _ListData
{
  guint id;
  gchar *name;
} ListData;

//リストのIDとデータ

static ListData data[] = { {0, "Zero"}, {1, "One"}, {2, "Two"} };

static void add_data(GtkTreeView *treeview)
{
  GtkListStore *store;
  GtkTreeIter iter;
  int i;

  store = GTK_LIST_STORE(gtk_tree_view_get_model(treeview));

  for( i = 0; i < sizeof(data) / sizeof(data[0]); i++ ){

//行の追加

gtk_list_store_append(store, &iter);

//追加した行へのデータ登録

    gtk_list_store_set(store, &iter, COLUMN_ID, data[i].id, COLUMN_NAME, data[i].name, -1);
  }
}

static GtkWidget* create_list_model(void)
{
  GtkWidget *treeview;
  GtkListStore *liststore;
  GtkCellRenderer *renderer;
  GtkTreeViewColumn *column;

//モデルの作成

  liststore = gtk_list_store_new(N_COLUMNS, G_TYPE_UINT, G_TYPE_STRING);
  treeview = gtk_tree_view_new_with_model(GTK_TREE_MODEL(liststore));
  g_object_unref(liststore);

//数値や文字列を表示する

renderer = gtk_cell_renderer_text_new();

//列の作成と属性の設定

column = gtk_tree_view_column_new();

//列のタイトル設定

gtk_tree_view_column_set_title(column, "ID");

//GtkTreeViewColumnへのGtkCellRendererの登録

gtk_tree_view_column_pack_start(column, renderer, FALSE);

//列属性の割り当て

gtk_tree_view_column_set_attributes(column, renderer, "text", COLUMN_ID, NULL);

//列のツリービューへの追加

  gtk_tree_view_append_column(GTK_TREE_VIEW(treeview), column);

  renderer = gtk_cell_renderer_text_new();
  column = gtk_tree_view_column_new_with_attributes("Name", renderer, "text", COLUMN_NAME, NULL);
  gtk_tree_view_append_column(GTK_TREE_VIEW(treeview), column);

  return treeview;
}

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

  gtk_init(&argc, &argv);

  window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
  gtk_window_set_title(GTK_WINDOW(window), "ListStore");
  gtk_container_set_border_width(GTK_CONTAINER(window), 5);
  g_signal_connect(G_OBJECT(window), "destroy", G_CALLBACK(gtk_main_quit), NULL);
  gtk_widget_set_size_request(window, 300, 100);

  treeview = create_list_model();
  gtk_container_add(GTK_CONTAINER(window), treeview);

  add_data(GTK_TREE_VIEW(treeview));

  gtk_widget_show_all(window);
  gtk_main();

  return 0;
}

IDとNameという属性を持った３行のデータがリスト表示された。

列属性の設定

列属性に、backgroundとunderlineを加えてみる。

#include <gtk/gtk.h>

enum
{
  COLUMN_ID,
  COLUMN_NAME,
  COLUMN_NAME_COLOR,
  COLUMN_NAME_LINE,
  N_COLUMNS
};

typedef struct _ListData
{
  guint id;
  gchar *name;
  gchar *color;
  PangoUnderline linestyle;
} ListData;

static ListData data[] = {
  {0, "Zero", "Red", PANGO_UNDERLINE_SINGLE},
  {1, "One", "Green", PANGO_UNDERLINE_NONE},
  {2, "Two", "Blue", PANGO_UNDERLINE_SINGLE}
};

static void add_data(GtkTreeView *treeview)
{
  GtkListStore *store;
  GtkTreeIter iter;
  int i;

  store = GTK_LIST_STORE(gtk_tree_view_get_model(treeview));

  for( i = 0; i < sizeof(data) / sizeof(data[0]); i++ ){
    gtk_list_store_append(store, &iter);
    gtk_list_store_set(store, &iter,
      COLUMN_ID, data[i].id,
      COLUMN_NAME, data[i].name,
      COLUMN_NAME_COLOR, data[i].color,
      COLUMN_NAME_LINE, data[i].linestyle, -1);
  }
}

static GtkWidget* create_list_model(void)
{
  GtkWidget *treeview;
  GtkListStore *liststore;
  GtkCellRenderer *renderer;
  GtkTreeViewColumn *column;

//IDと名前の他に、列の背景色、アンダーラインのモデルを作成

  liststore = gtk_list_store_new(N_COLUMNS, G_TYPE_UINT, G_TYPE_STRING, G_TYPE_STRING, G_TYPE_UINT);
  treeview = gtk_tree_view_new_with_model(GTK_TREE_MODEL(liststore));
  g_object_unref(liststore);

  renderer = gtk_cell_renderer_text_new();
  column = gtk_tree_view_column_new_with_attributes("ID", renderer, "text", COLUMN_ID, NULL);
  gtk_tree_view_append_column(GTK_TREE_VIEW(treeview), column);

  renderer = gtk_cell_renderer_text_new();
  column = gtk_tree_view_column_new_with_attributes("Name", renderer, "text", COLUMN_NAME, NULL);

//backgroud属性を追加

gtk_tree_view_column_add_attribute(column, renderer, "background", COLUMN_NAME_COLOR);

//underline属性を追加

  gtk_tree_view_column_add_attribute(column, renderer, "underline", COLUMN_NAME_LINE);

  gtk_tree_view_append_column(GTK_TREE_VIEW(treeview), column);

  return treeview;
}

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

  gtk_init(&argc, &argv);

  window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
  gtk_window_set_title(GTK_WINDOW(window), "ColumnListStore");
  gtk_container_set_border_width(GTK_CONTAINER(window), 5);
  g_signal_connect(G_OBJECT(window), "destroy", G_CALLBACK(gtk_main_quit), NULL);
  gtk_widget_set_size_request(window, 300, 100);

  treeview = create_list_model();
  gtk_container_add(GTK_CONTAINER(window), treeview);

  add_data(GTK_TREE_VIEW(treeview));

  gtk_widget_show_all(window);
  gtk_main();

  return 0;
}

背景色とアンダーラインが追加された。

ツリーデータの表示

ツリーデータの階層を、folder.pngとfile.pngを使って表示してみる。ちなみにFolder 1にはfile 1-1とfile 2-2、Foldr 2にはfile 2-1とfile 2-2が有るものとする。

#include <gtk/gtk.h>

enum
{
  COLUMN_ICON,
  COLUMN_LABEL,
  N_COLUMNS
};

typedef struct _TreeData TreeData;
struct _TreeData
{
  gchar *iconname;
  gchar *label;
  TreeData *child;
};

static TreeData sublevel1[] =
{
  {"file.png", "file 1-1", NULL},
  {"file.png", "file 1-2", NULL},
  NULL
};

static TreeData sublevel2[] =
{
  {"file.png", "file 2-1", NULL},
  {"file.png", "file 2-2", NULL},
  NULL
};

static TreeData toplevel[] =
{
  {"folder.png", "Folder 1", sublevel1},
  {"folder.png", "Folder 2", sublevel2},
  NULL
};

static void add_data(GtkTreeView *treeview)
{
  GtkTreeStore *store;
  TreeData *top;

  store = GTK_TREE_STORE(gtk_tree_view_get_model(treeview));

  top = toplevel;
  while( top->iconname ){
    TreeData *child;
    GdkPixbuf *pixbuf;
    GtkTreeIter iter;

    child = top->child;
    pixbuf = gdk_pixbuf_new_from_file(top->iconname, NULL);

//行の追加

gtk_tree_store_append(store, &iter, NULL);

//追加した行へのデータ登録

    gtk_tree_store_set(store, &iter, COLUMN_ICON, pixbuf, COLUMN_LABEL, top->label, -1);
    while( child->iconname ){
      GtkTreeIter child_iter;

      pixbuf = gdk_pixbuf_new_from_file(child->iconname, NULL);
      gtk_tree_store_append(store, &child_iter, &iter);
      gtk_tree_store_set(store, &child_iter, COLUMN_ICON, pixbuf, COLUMN_LABEL, child->label, -1);
      child++;
    }
    top++;
  }
}

static GtkWidget* create_tree_model(void)
{
  GtkWidget *treeview;
  GtkTreeStore *treestore;
  GtkCellRenderer *renderer;
  GtkTreeViewColumn *column;

//ツリーモデルの作成

  treestore = gtk_tree_store_new(N_COLUMNS, GDK_TYPE_PIXBUF, G_TYPE_STRING);
  treeview = gtk_tree_view_new_with_model(GTK_TREE_MODEL(treestore));
  g_object_unref(treestore);

  column = gtk_tree_view_column_new();

//アイコンセルの作成

  renderer = gtk_cell_renderer_pixbuf_new();
  gtk_tree_view_column_set_title(column, "Folder");
  gtk_tree_view_column_pack_start(column, renderer, FALSE);
  gtk_tree_view_column_add_attribute(column, renderer, "pixbuf", COLUMN_ICON);

  renderer = gtk_cell_renderer_text_new();
  gtk_tree_view_column_pack_start(column, renderer, TRUE);
  gtk_tree_view_column_add_attribute(column, renderer, "text", COLUMN_LABEL);

  gtk_tree_view_append_column(GTK_TREE_VIEW(treeview), column);

  return treeview;
}

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

  gtk_init(&argc, &argv);

  window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
  gtk_window_set_title(GTK_WINDOW(window), "TreeStore");
  gtk_container_set_border_width(GTK_CONTAINER(window), 5);
  g_signal_connect(G_OBJECT(window), "destroy", G_CALLBACK(gtk_main_quit), NULL);
  gtk_widget_set_size_request(window, 300, 240);

  treeview = create_tree_model();

//ヘッダの表示設定

  gtk_tree_view_set_headers_visible(GTK_TREE_VIEW(treeview), FALSE);
  gtk_container_add(GTK_CONTAINER(window), treeview);

  add_data(GTK_TREE_VIEW(treeview));

  gtk_widget_show_all(window);
  gtk_main();

  return 0;
}

リストに親データと子データができた。

前章　｜　目次　｜　次章

トップ