素人の独学GTK+3.0 ５章：ウィジェットを上下左右に配置

hboxウィジェット

前章の
gtk_box_pack_start(GtkBox *box, GtkWidget *child, gboolean expand, gboolean fill, guint padding);
で説明したexpandとfillを、hboxを使って可視的に確認する。

#include <gtk/gtk.h>

int main(int argc, char** argv)
{
  GtkWidget *window;
  GtkWidget *vbox;
  GtkWidget *hbox;
  GtkWidget *button;

  gtk_init(&argc, &argv);

  window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
  gtk_widget_set_size_request(window,300,200);

//ウィンドウにタイトルを設定する

  gtk_window_set_title(GTK_WINDOW(window), "Expand and Fill");

  gtk_container_set_border_width(GTK_CONTAINER(window), 10);
  g_signal_connect(G_OBJECT(window), "destroy", G_CALLBACK(gtk_main_quit), NULL);

  vbox = gtk_box_new(GTK_ORIENTATION_VERTICAL, 5);
  gtk_container_add(GTK_CONTAINER(window), vbox);

//第１引数を変えてhboxを作成（第２引数は同じでピクセル間隔）

hbox = gtk_box_new(GTK_ORIENTATION_HORIZONTAL, 0);
gtk_box_pack_start(GTK_BOX(vbox), hbox, TRUE, TRUE, 0);

//expand:TRUE fill:TRUE

  button = gtk_button_new_with_label("expand:TRUE");
  gtk_box_pack_start(GTK_BOX(hbox), button, TRUE, TRUE, 0);
  button = gtk_button_new_with_label("fill:TRUE");
  gtk_box_pack_start(GTK_BOX(hbox), button, TRUE, TRUE, 0);

  hbox = gtk_box_new(GTK_ORIENTATION_HORIZONTAL, 0);
  gtk_box_pack_start(GTK_BOX(vbox), hbox, TRUE, TRUE, 0);

//expand:TRUE fill:FALSE

  button = gtk_button_new_with_label("expand:TRUE");
  gtk_box_pack_start(GTK_BOX(hbox), button, TRUE, FALSE, 0);
  button = gtk_button_new_with_label("fill:FALSE");
  gtk_box_pack_start(GTK_BOX(hbox), button, TRUE, FALSE, 0);

  hbox = gtk_box_new(GTK_ORIENTATION_HORIZONTAL, 0);
  gtk_box_pack_start(GTK_BOX(vbox), hbox, TRUE, TRUE, 0);

//expand:FALSE fill:FALSE

  button = gtk_button_new_with_label("expand:TRUE");
  gtk_box_pack_start(GTK_BOX(hbox), button, FALSE, FALSE, 0);
  button = gtk_button_new_with_label("fill:FALSE");
  gtk_box_pack_start(GTK_BOX(hbox), button, FALSE, FALSE, 0);

  gtk_widget_show_all(window);
  gtk_main();

  return 0;
}

今さらながら、ウィンドウのタイトル設定に触れてみた。
本題のexpandとfillは、Vertical（垂直）とHorizontal（水平）の両方向を指定しないと解りにくいと思うので、 vboxとhboxの両方を使って、見てみたいと思う。
expandとfillの両方をTRUEに設定すると、使用可能領域いっぱいに表示される。（１段目）
そしてfillをFALSEに設定すると、vboxにパッキングされたhbox下において、ボタンのウィジェット領域が最大幅ではなくなる。（２段目）
さらにexpandもFALSEに設定すると、hboxの領域が最大幅ではなくなり（３段目）、上図の結果になる。
vboxとhboxの作成に
vbox = gtk_vbox_new(TRUE, 5);
hbox = gtk_hbox_new(TRUE, 0);
のように書く例を見かけるが、この表記方法は英文マニュアルによると、バージョン3.2で廃止されたとの事。

gridウィジェット

続いてテーブル・ウィジェットを使ってみようとしたら、バージョン3.4で廃止されていた。代替の物はグリッド・ウィジェット。新しい物だけに、日本語のサンプルが見当たらない。英語のサンプルを頑張って読み、ようやくコンパイルに成功した。例を挙げてみる。

#include <gtk/gtk.h>

int main(int argc, char** argv)
{
  GtkWidget *window;
  GtkWidget *button1;
  GtkWidget *button2;
  GtkWidget *button3;
  GtkWidget *button4;
  GtkWidget *button5;
  GtkWidget *button6;
  GtkWidget *button7;
  GtkWidget *button8;
  GtkWidget *button9;
  GtkWidget *button10;
  GtkWidget *button11;
  GtkWidget *grid;

  gtk_init(&argc, &argv);

  window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
  gtk_window_set_title(GTK_WINDOW(window), "Grid");
  gtk_widget_set_size_request(window, 300, 200);
  gtk_container_set_border_width(GTK_CONTAINER(window), 10);
  g_signal_connect(G_OBJECT(window), "destroy", G_CALLBACK(gtk_main_quit), NULL);

//gridを作成

grid = gtk_grid_new();

//gridをウィンドウに配置

gtk_container_add(GTK_CONTAINER(window), grid);

//11個のボタンをグリッドに配置

  button1 = gtk_button_new_with_label("aa");
  gtk_grid_attach(GTK_GRID(grid), button1, 0, 0, 2, 2);
  button2 = gtk_button_new_with_label("b");
  gtk_grid_attach(GTK_GRID(grid), button2, 2, 0, 1, 1);
  button3 = gtk_button_new_with_label("cc");
  gtk_grid_attach(GTK_GRID(grid), button3, 3, 0, 2, 2);
  button4 = gtk_button_new_with_label("d");
  gtk_grid_attach(GTK_GRID(grid), button4, 5, 0, 1, 2);
  button5 = gtk_button_new_with_label("e");
  gtk_grid_attach(GTK_GRID(grid), button5, 2, 1, 1, 1);
  button6 = gtk_button_new_with_label("f");
  gtk_grid_attach(GTK_GRID(grid), button6, 0, 2, 1, 2);
  button7 = gtk_button_new_with_label("ggg");
  gtk_grid_attach(GTK_GRID(grid), button7, 1, 2, 3, 1);
  button8 = gtk_button_new_with_label("hh");
  gtk_grid_attach(GTK_GRID(grid), button8, 4, 2, 2, 1);
  button9 = gtk_button_new_with_label("ii");
  gtk_grid_attach(GTK_GRID(grid), button9, 1, 3, 2, 1);
  button10 = gtk_button_new_with_label("jj");
  gtk_grid_attach(GTK_GRID(grid), button10, 3, 3, 2, 1);
  button11 = gtk_button_new_with_label("k");
  gtk_grid_attach(GTK_GRID(grid), button11, 5, 3, 1, 1);

  gtk_widget_show_all(window);

  gtk_main();

  return 0;
}

gtk_grid_attach(GtkGrid *grid, GtkWidget *child, gint left, gint top, gint width, gint height);
引数を説明すると、leftとtopは左上を起点に0から始まり、１マスごとに値を増やして行く。 widthとheightはそれぞれ横と縦のマス目の長さである。
例えばボタン"aa"はleft = 0、top = 0、width = 2、height = 2である。
また、ボタン"e"はleft = 2、top = 1、width = 1、height = 1、
ボタン"ggg"はleft = 1、top = 2、width = 3、height = 1となる。
ウィジェットの配置ができるようになって来た所で、次はいよいよデータを扱ってみたいと思う。

前章　｜　目次　｜　次章

トップ