GTK3   レイアウト

ホーム   C/C++チュートリアル
目次


レイアウト


ウィンドウ

window.c 

#include <gtk/gtk.h>

void activate();

int main(int argc, char **argv)
{
    GtkApplication  *app;
    int             status;
    app     =   gtk_application_new ("jp.vivacocoa.window",     0   );
    g_signal_connect                (app,       "activate", 
                                     G_CALLBACK(activate ),     NULL);
    status  =   g_application_run   (G_APPLICATION(app), argc, argv );
    g_object_unref                  (app);
    return      status;
}

void activate(GtkApplication *app, gpointer data)
{
    GtkWidget   *window;
    GtkWidget   *button;
    
    window  =
    gtk_application_window_new      (app);
    gtk_window_set_title            (GTK_WINDOW(window), "Window"   );
    gtk_window_set_default_size     (GTK_WINDOW(window), 300, 200   );
    gtk_window_set_position         (GTK_WINDOW(window),        1   );
    gtk_container_set_border_width  (GTK_CONTAINER(window),    15   );
    
    button  =
    gtk_button_new_with_label       ("Button");
    gtk_container_add               (GTK_CONTAINER(window), button  );
    
    gtk_widget_show_all             (window);
}

実行結果


GTKでは、macOS のボタンも、縦に拡大します。
ウィンドウの大きさを変えて表示がどうなるかみてください。

コード説明

  1. GtkWidget *button;
    ボタンも、GtKWidget型でポインターを作ります。
  2. gtk_container_set_border_width(GTK_CONTAINER(window), 15);
    gtk_container_set_border_width( )関数で コンテナーの周りの枠の幅を設定します。引数は次のとおりです。
    1. 第1引数にGTK_CONTAINER( )マクロで囲んでコンテナーを指定します
    2. 第2引数に枠の幅を指定します
  3. button = gtk_button_new_with_label("Button");
    ボタンはgtk_button_new_with_label( )関数で作ります。 引数にボタンに表示させる文字列を渡します。
  4. gtk_container_add(GTK_CONTAINER(window), button);
    gtk_container_add( )関数でコンテナーにウィジェットを配置します。 引数は次のとおりです。
    1. 第1引数にGTK_CONTAINER( )マクロで囲んでコンテナーを指定します
    2. 第3引数にコンテナーに配置するウィジェットを指定します


アライン

アライン(align)を使うと、コンテナーに配置するウィジェットの位置を、 左にするか右にするか、上にするか下にするかを、左右の中央にするか、 上下の中央にするかを設定できます。

align.c


#include <gtk/gtk.h>

void activate();

int main(int argc, char **argv)
{
    GtkApplication  *app;
    int             status;
    app     =   gtk_application_new ("jp.vivacocoa.align" ,     0   );
    g_signal_connect                (app,       "activate",
                                     G_CALLBACK(activate ),     NULL);
    status  =   g_application_run   (G_APPLICATION(app), argc,  argv);
    g_object_unref                  (app);
    return      status;
}

void activate(GtkApplication *app, gpointer data)
{
    GtkWidget   *window;
    GtkWidget   *button;
    
    window  =
    gtk_application_window_new      (app);
    gtk_window_set_title            (GTK_WINDOW(window),    "Align" );
    gtk_window_set_default_size     (GTK_WINDOW(window), 300, 200   );
    gtk_window_set_position         (GTK_WINDOW(window),        1   );
    gtk_container_set_border_width  (GTK_CONTAINER(window),    15   );
    
    button  =
    gtk_button_new_with_label       ("Button");
    gtk_widget_set_size_request     (button,        100,    25      );
    gtk_widget_set_halign           (button,        GTK_ALIGN_END   );
    gtk_widget_set_valign           (button,        GTK_ALIGN_END   );
    gtk_container_add               (GTK_CONTAINER(window), button  );
    
    gtk_widget_show_all             (window);
}

実行結果

指定位置 GTK_ALIGN_END の場合
ウィンドウの大きさを変えて表示がどうなるかみてください。
指定位置 GTK_ALIGN_CENTER の場合
ウィンドウの大きさを変えて表示がどうなるかみてください。

コード説明

  1. gtk_widget_set_size_request(button, 100, 25);
    gtk_widget_set_size_request( )関数でウィジェットのサイズを設定できます。 引数は次のとおりです。
    1. 第1引数にウィジェットを指定します
    2. 第2引数にウィジェットの横のサイズを指定します
    3. 第3引数にウィジェットの縦のサイズを指定します
  2. gtk_widget_set_halign(button, GTK_ALIGN_END);
    gtk_widget_set_halign関数でウィジェットの左右の配置位置を設定できます。 引数は次のとおりです。
    1. 第1引数にウィジェットを指定します
    2. 第2引数にウィジェットの配置位置を次の定数のどれかで指定します
      GTK_ALIGN_FILL左右に拡大(デフォルト) 値は 0
      GTK_ALIGN_START左に配置値は 1
      GTK_ALIGN_END右に配置値は 2
      GTK_ALIGN_CENTER左右の中央に配置値は 3
      GTK_ALIGN_BASELINEベースラインに配置値は 4
  3. gtk_widget_set_valign(button, GTK_ALIGN_END);
    gtk_widget_set_valign関数でウィジェットの上下の配置位置を設定できます。 引数は次のとおりです。
    1. 第1引数にウィジェットを指定します
    2. 第2引数にウィジェットの配置位置を次の定数のどれかで指定します
      GTK_ALIGN_FILL上下に拡大(デフォルト) 値は 0
      GTK_ALIGN_START上に配置値は 1
      GTK_ALIGN_END下に配置値は 2
      GTK_ALIGN_CENTER上下の中央に配置値は 3
      GTK_ALIGN_BASELINEベースラインに配置値は 4
  4. ウィジェットはデフォルトでhalignもvalignもGTK_ALIGN_FILLに設定されています。 そのために、先ほどのサンプルでは、ウィンドウ一杯にボタンが拡大していたのです。


フィクスド

fixed.c


#include <gtk/gtk.h>

void activate();

int main(int argc, char **argv)
{
    GtkApplication  *app;
    int             status;
    app     =   gtk_application_new ("jp.vivacocoa.fixed" ,     0   );
    g_signal_connect                (app,       "activate",
                                     G_CALLBACK( activate),     NULL);
    status  =   g_application_run   (G_APPLICATION(app),  argc, argv);
    g_object_unref                  (app);
    return      status;
}

void activate(GtkApplication *app, gpointer data)
{
    GtkWidget   *window;
    GtkWidget   *fixed;
    GtkWidget   *button1;
    GtkWidget   *button2;
    GtkWidget   *button3;
    
    window  =
    gtk_application_window_new      (app);
    gtk_window_set_title            (GTK_WINDOW(window),    "Fixed" );
    gtk_window_set_default_size     (GTK_WINDOW(window),    300, 200);
    gtk_window_set_position         (GTK_WINDOW(window),    1       );
    
    fixed   =   gtk_fixed_new       ();
    gtk_container_add               (GTK_CONTAINER(window), fixed   );
    
    button1 =
    gtk_button_new_with_label       ("Button 1");
    button2 =
    gtk_button_new_with_label       ("Button 2");
    button3 =
    gtk_button_new_with_label       ("Button 3");
    gtk_widget_set_size_request     (button1,   100,    25  );
    gtk_widget_set_size_request     (button2,   100,    25  );
    gtk_widget_set_size_request     (button3,   100,    25  );
    gtk_fixed_put                   (GTK_FIXED(fixed),  button1,
                                      20,    20             );
    gtk_fixed_put                   (GTK_FIXED(fixed),  button2,
                                     100,    85             );
    gtk_fixed_put                   (GTK_FIXED(fixed),  button3,
                                     180,   150             );
    
    gtk_widget_show_all             (window);
}

実行結果


ウィンドウの大きさを変えて表示がどうなるかみてください。

コード説明

  1. GtkWidget *fixed;
    フィクスドもGtkWidget型でポインターを作ります。
  2. fixed = gtk_fixed_new();
    gtk_fixed_new( )関数でフィクスドを作ります。引数はありません。
  3. gtk_fixed_put(GTK_FIXED(fixed), button1, 20, 20);
    gtk_fixed_put( )関数でフィクスドにウィジェットを配置します。 引数は次のとおりです。
    1. 第1引数にGTK_FIXED( )マクロで囲んでフィクスドを指定します
    2. 第2引数にフィクスドに配置するウィジェットを指定します
    3. 第3引数に配置する横位置を指定します
    4. 第4引数に配置する縦位置を指定します
    横位置と縦位置は、ウィンドウのコンテンツが表示される部分の、左上からの ピクセル数になります。


ボックス


47762 visits
Posted: Jan. 05, 2020
Update: Jan. 06, 2020

ホーム   C/C++チュートリアル   目次