[ruby-gnome2-doc-cvs] [Hiki] update - ボックス

Back to archive index

ruby-****@lists***** ruby-****@lists*****
2003年 5月 26日 (月) 22:48:17 JST


-------------------------
REMOTE_ADDR = 210.249.193.205
REMOTE_HOST = 
        URL = http://ruby-gnome2.sourceforge.jp/?%A5%DC%A5%C3%A5%AF%A5%B9
-------------------------
= ボックス
Gtk::Boxは、複数の子ウィジェットを持つことのできるコンテナウィジェットの1つです。単純に水平方向、あるいは垂直方向に子ウィジェットを並べていきます。
Gtk::Box自身は抽象クラスで、それ自身をインスタンスにすることはできません。代わりに、水平方向の場合はGtk::HBoxを、垂直方向の場合はGtk::VBoxを使います。
単純ですが、きわめて強力なコンテナです。

※)ここでは、主にGtk::HBoxを使いますが、それをそのままGtk::VBoxに置き換えることができますのでそちらも試してみてください。

== 基本的な使い方
まずはボタンを3つ並べます。(1)の2行を入れ替えると水平方向が垂直方向になります。

 require 'gtk'

 box = Gtk::HBox.new(true, 10)     #(1)
 # box = Gtk::VBox.new(true, 10)    #(1)
 
 button1 = Gtk::Button.new("ABCDEFGHIJKLMN")
 button2 = Gtk::Button.new("1")

 box.pack_start(button1, true, true, 30)
 box.pack_start(button2, true, true, 50)

 Gtk::Window.new.add(box).show_all
 Gtk.main


--- Gtk::HBox.new(homogeneous = false, spacing = 0)
--- Gtk::VBox.new(homogeneous = false, spacing = 0)
    それぞれ水平方向、垂直方向のボックスウィジェットを生成します。 
    * homogeneous - 「均一」フラグ。trueの場合は、このボックスに配置される各ウィジェット(子ウィジェット)が同じサイズになり(Gtk::HBoxでは同じ幅、Gtk::VBoxでは同じ高さ)、falseの場合は子ウィジェット自身が持つサイズになります。
    * spacing - 子ウィジェット間の隙間の大きさ(ピクセル値)です。

--- Gtk::Box#pack_start(child_widget, expand = true, fill = true, padding = 0)
    boxの中にchild_widgetを配置します。呼び出した順に、Gtk::HBoxの場合は左から右へ、Gtk::VBoxの場合は上から下に配置します。
    * child_widget - 変更対象の子ウィジェットです。
    * expand - trueの場合、子ウィジェットが広がれるだけ広がります。falseの場合、子ウィジェットは内側のウィジェットにちょうどフィットするように縮みます。
    * fill - trueの場合、内側のウィジェットの周囲に隙間があればウィジェットがそこを埋めるように広がります。falseの場合、その部分は広がりません。expandがtrueの場合のみ効果を持ちます。
    * padding - それぞれの子ウィジェットの周囲に確保されるスペースの大きさ(ピクセル値)を指定します。

上記の部分、ちょっとわかりづらいので図を用いて説明します。
((<例|"IMG:center:gtk_hbox1.jpg">))
* まず、homegenous = trueで、spacing = 10ですので、2つの子ウィジェット(button1, button2)を均一に並べ、子ウィジェット間のスペースを10だけあけます。(A)がbutton1の範囲、(B)がbutton2の範囲です。
* 次に、button1をexpand = true, fill = true, padding = 30でパックしています。これは子ウィジェットを広げるだけ広げ、かつ(1)の範囲いっぱいに子ウィジェットを広げようとしているのですが、親ウィジェットとの隙間(この場合は水平方向)を30だけpaddingとして空けてます。
* (B)のbutton2の方も同様ですが、これはpadding = 50ですので、その分、(A)よりも子ウィジェットが小さくなります。

イメージがあってもわかりづらいですね(^^;)。次の章以降でもうちょっと説明します。

== 基本的な使い方(Gtk::Box.newの説明)
基本例だけだと各パラメータがどのように関係してくるのかイマイチわかりづらいので、いくつか例をあげて説明してみます。まずは、Gtk::Box.new(homogeneous, spacing)から。

 require 'gtk'

 box = Gtk::HBox.new(true)

 button1 = Gtk::Button.new("ABCDEFGHIJKLMN")
 button2 = Gtk::Button.new("1")

 box.pack_start(button1)
 box.pack_start(button2)

 Gtk::Window.new.add(box).show_all
 Gtk.main

=== Gtk::HBox.new(true)の場合
子ウィジェットは均一な大きさになります。
((<例1|"IMG:center:gtk_hbox2.jpg">))

=== Gtk::HBox.new(false)の場合
子ウィジェットはそれ自身の持つ大きさになります。これはデフォルトの動作です。
((<例2|"IMG:center:gtk_hbox3.jpg">))

=== Gtk::HBox.new(true, 50)の場合
子ウィジェット間にスペースを空けます。
((<例3|"IMG:center:gtk_hbox4.jpg">))


== 基本的な使い方(Gtk::Box#pack_startの説明)
今度はGtk::Box#pack_start(child_widget, expand = true, fill = true, padding = 0)について説明します。わかりやすく説明するためにGtk::Windowのサイズを(300,50)にしています。

 require 'gtk'

 box = Gtk::HBox.new(true)

 button1 = Gtk::Button.new("ABCDEFGHIJKLMN")

 box.pack_start(button1, true, true, 10)

 Gtk::Window.new.add(box).set_usize(300,50).show_all
 Gtk.main

=== Gtk::Box#pack_start(button1, true, true, 10)の場合
両端のpadding = 10の部分を除いた部分一杯にbutton1の領域を広げ、かつ、広げた分だけbutton1を大きくします。
((<例1|"IMG:center:gtk_hbox5.jpg">))

=== Gtk::Box#pack_start(button1, true, false, 10)の場合
両端のpadding = 10の部分を除いた部分一杯にbutton1の領域を広げるのですがbutton1自体はそれ自身の大きさにします。したがって、見た目としては中央にbutton1が表示されいるイメージになります。
((<例2|"IMG:center:gtk_hbox6.jpg">))

=== Gtk::Box#pack_start(button1, false, false, 10)の場合
両端のpadding = 10の部分はきちんと取るのですが、button1は領域を広げることもなくそれ自身の大きさを使うので、イメージ画面のように左側に寄っていきます。
((<例3|"IMG:center:gtk_hbox7.jpg">))

== おしりから子ウィジェットを配置する
Gtk::HBox#pack_startは左から右へ、Gtk::VBox#pack_startは上から下へ子ウィジェットを配置していくのですが、Gtk::Box#pack_endはその逆の方向に子ウィジェットを配置していきます。

 require 'gtk'

 box = Gtk::HBox.new(true)

 button1 = Gtk::Button.new("ABCDEFGHIJKLMN")

 box.pack_end(button1, false)

 Gtk::Window.new.add(box).set_usize(300,50).show_all
 Gtk.main

--- Gtk::Box#pack_end(child_widget, expand = true, fill = true, padding = 0)
    boxの中にchild_widgetをGtk::Box#pack_startとは逆方向に配置します。つまり、呼び出した順にGtk::HBoxの場合は右から左へ、Gtk::VBoxの場合は下から上に配置します。
    * child_widget - 変更対象の子ウィジェットです。
    * expand - trueの場合、子ウィジェットが広がれるだけ広がります。falseの場合、子ウィジェットは内側のウィジェットにちょうどフィットするように縮みます。
    * fill - trueの場合、内側のウィジェットの周囲に隙間があればウィジェットがそこを埋めるように広がります。falseの場合、その部分は広がりません。expandがtrueの場合のみ効果を持ちます。
    * padding - それぞれの子ウィジェットの周囲に確保されるスペースの大きさ(ピクセル値)を指定します。

== ウィジェットの配置を移動する
button1をクリックするとボックスの2番目(真ん中)にbutton1を移動します。

 require 'gtk'

 box = Gtk::HBox.new

 button1 = Gtk::Button.new("111")
 button1.signal_connect(Gtk::Button::SIGNAL_CLICKED) do
   box.reorder_child(button1, 1)
 end
 button2 = Gtk::Button.new("222")
 button3 = Gtk::Button.new("333")

 box.pack_start(button1, false)
 box.pack_start(button2, false)
 box.pack_start(button3, false)

 Gtk::Window.new.add(box).show_all
 Gtk.main

--- Gtk::Box#reorder_child(child_widget, position)
    すでにGtk::Box上に配置されている子ウィジェットを移動します。
    * child_widget - 移動する子ウィジェット
    * position - 移動する位置(0〜)

== 子ウィジェットがどのように配置されているのかを知る
子ウィジェットがどのように配置されているのか表示してみます。

 require 'gtk'

 box = Gtk::HBox.new(true, 10)

 button1 = Gtk::Button.new("AAA")
 button2 = Gtk::Button.new("BBB")

 box.pack_start(button1, true, false, 10)
 box.pack_end(button2, false, true, 5)

 p box.query_child_packing(button1)
 p box.query_child_packing(button2)

 Gtk::Window.new.add(box).show_all
 Gtk.main

--- Gtk::Box#query_child_packing(child_widget)
    子ウィジェットがどのように配置されているのかという情報を返します。返り値は、expand, fill, padding, packtypeの配列です。
    packtypeは、Gtk::PACK_START(= 0), Gtk::PACK_END(= 1)が返ります。

== 各設定値をあとから設定する
今まで設定してきた値をボタンをクリックすることで変更してみます。

 require 'gtk'

 box = Gtk::HBox.new

 button1 = Gtk::Button.new("homogeneous")
 button1.signal_connect(Gtk::Button::SIGNAL_CLICKED) do
   box.set_homogeneous(true)
 end
 button2 = Gtk::Button.new("spacing")
 button2.signal_connect(Gtk::Button::SIGNAL_CLICKED) do
   box.set_spacing(20)
 end
 button3 = Gtk::Button.new("child_packing")
 button3.signal_connect(Gtk::Button::SIGNAL_CLICKED) do
   box.set_child_packing(button3, true, true, 10, Gtk::PACK_END)
 end

 box.pack_start(button1)
 box.pack_start(button2)
 box.pack_start(button3)

 Gtk::Window.new.add(box).show_all
 Gtk.main

--- Gtk::Box#set_homogeneous(homogeneous)
    子ウィジェットを均一に配置するかどうかを指定します。Gtk::Box.new(homogeneous, spacing)のhomogeneousと同じです。
    * homogeneous - 「均一」フラグ。trueの場合は、このボックスに配置される各ウィジェットが同じサイズになり(Gtk::HBoxでは同じ幅、Gtk::VBoxでは同じ高さ)、falseの場合はウィジェット自身が持つサイズになります。

--- Gtk::Box#set_spacing(spacing)
    子ウィジェット間のスペースを指定します。Gtk::Box.new(homogeneous, spacing)のspacingと同じです。
    * spacing - 子ウィジェット間の隙間の大きさ(ピクセル値)です。

--- Gtk::Box#set_child_packing(child_widget, expand, fill, padding, packtype)
    Gtk::Box#pack_start/endと同様です。
    * child_widget - 変更対象の子ウィジェットです。
    * expand - trueの場合、子ウィジェットが広がれるだけ広がります。falseの場合、子ウィジェットは内側のウィジェットにちょうどフィットするように縮みます。
    * fill - trueの場合、内側のウィジェットの周囲に隙間があればウィジェットがそこを埋めるように広がります。falseの場合、その部分は広がりません。expandがtrueの場合のみ効果を持ちます。
    * padding - それぞれの子ウィジェットの周囲に確保されるスペースの大きさ(ピクセル値)を指定します。
    * packtype - Gtk::PACK_START, Gtk::PACK_ENDを指定します。
-------------------------
= ボックス
((*これはRuby/GTK(1)用です*))

Gtk::Boxは、複数の子ウィジェットを持つことのできるコンテナウィジェットの1つです。単純に水平方向、あるいは垂直方向に子ウィジェットを並べていきます。
Gtk::Box自身は抽象クラスで、それ自身をインスタンスにすることはできません。代わりに、水平方向の場合はGtk::HBoxを、垂直方向の場合はGtk::VBoxを使います。
単純ですが、きわめて強力なコンテナです。

※)ここでは、主にGtk::HBoxを使いますが、それをそのままGtk::VBoxに置き換えることができますのでそちらも試してみてください。

== 基本的な使い方
まずはボタンを3つ並べます。(1)の2行を入れ替えると水平方向が垂直方向になります。

 require 'gtk'

 box = Gtk::HBox.new(true, 10)     #(1)
 # box = Gtk::VBox.new(true, 10)    #(1)
 
 button1 = Gtk::Button.new("ABCDEFGHIJKLMN")
 button2 = Gtk::Button.new("1")

 box.pack_start(button1, true, true, 30)
 box.pack_start(button2, true, true, 50)

 Gtk::Window.new.add(box).show_all
 Gtk.main


--- Gtk::HBox.new(homogeneous = false, spacing = 0)
--- Gtk::VBox.new(homogeneous = false, spacing = 0)
    それぞれ水平方向、垂直方向のボックスウィジェットを生成します。 
    * homogeneous - 「均一」フラグ。trueの場合は、このボックスに配置される各ウィジェット(子ウィジェット)が同じサイズになり(Gtk::HBoxでは同じ幅、Gtk::VBoxでは同じ高さ)、falseの場合は子ウィジェット自身が持つサイズになります。
    * spacing - 子ウィジェット間の隙間の大きさ(ピクセル値)です。

--- Gtk::Box#pack_start(child_widget, expand = true, fill = true, padding = 0)
    boxの中にchild_widgetを配置します。呼び出した順に、Gtk::HBoxの場合は左から右へ、Gtk::VBoxの場合は上から下に配置します。
    * child_widget - 変更対象の子ウィジェットです。
    * expand - trueの場合、子ウィジェットが広がれるだけ広がります。falseの場合、子ウィジェットは内側のウィジェットにちょうどフィットするように縮みます。
    * fill - trueの場合、内側のウィジェットの周囲に隙間があればウィジェットがそこを埋めるように広がります。falseの場合、その部分は広がりません。expandがtrueの場合のみ効果を持ちます。
    * padding - それぞれの子ウィジェットの周囲に確保されるスペースの大きさ(ピクセル値)を指定します。

上記の部分、ちょっとわかりづらいので図を用いて説明します。
((<例|"IMG:center:gtk_hbox1.jpg">))
* まず、homegenous = trueで、spacing = 10ですので、2つの子ウィジェット(button1, button2)を均一に並べ、子ウィジェット間のスペースを10だけあけます。(A)がbutton1の範囲、(B)がbutton2の範囲です。
* 次に、button1をexpand = true, fill = true, padding = 30でパックしています。これは子ウィジェットを広げるだけ広げ、かつ(1)の範囲いっぱいに子ウィジェットを広げようとしているのですが、親ウィジェットとの隙間(この場合は水平方向)を30だけpaddingとして空けてます。
* (B)のbutton2の方も同様ですが、これはpadding = 50ですので、その分、(A)よりも子ウィジェットが小さくなります。

イメージがあってもわかりづらいですね(^^;)。次の章以降でもうちょっと説明します。

== 基本的な使い方(Gtk::Box.newの説明)
基本例だけだと各パラメータがどのように関係してくるのかイマイチわかりづらいので、いくつか例をあげて説明してみます。まずは、Gtk::Box.new(homogeneous, spacing)から。

 require 'gtk'

 box = Gtk::HBox.new(true)

 button1 = Gtk::Button.new("ABCDEFGHIJKLMN")
 button2 = Gtk::Button.new("1")

 box.pack_start(button1)
 box.pack_start(button2)

 Gtk::Window.new.add(box).show_all
 Gtk.main

=== Gtk::HBox.new(true)の場合
子ウィジェットは均一な大きさになります。
((<例1|"IMG:center:gtk_hbox2.jpg">))

=== Gtk::HBox.new(false)の場合
子ウィジェットはそれ自身の持つ大きさになります。これはデフォルトの動作です。
((<例2|"IMG:center:gtk_hbox3.jpg">))

=== Gtk::HBox.new(true, 50)の場合
子ウィジェット間にスペースを空けます。
((<例3|"IMG:center:gtk_hbox4.jpg">))


== 基本的な使い方(Gtk::Box#pack_startの説明)
今度はGtk::Box#pack_start(child_widget, expand = true, fill = true, padding = 0)について説明します。わかりやすく説明するためにGtk::Windowのサイズを(300,50)にしています。

 require 'gtk'

 box = Gtk::HBox.new(true)

 button1 = Gtk::Button.new("ABCDEFGHIJKLMN")

 box.pack_start(button1, true, true, 10)

 Gtk::Window.new.add(box).set_usize(300,50).show_all
 Gtk.main

=== Gtk::Box#pack_start(button1, true, true, 10)の場合
両端のpadding = 10の部分を除いた部分一杯にbutton1の領域を広げ、かつ、広げた分だけbutton1を大きくします。
((<例1|"IMG:center:gtk_hbox5.jpg">))

=== Gtk::Box#pack_start(button1, true, false, 10)の場合
両端のpadding = 10の部分を除いた部分一杯にbutton1の領域を広げるのですがbutton1自体はそれ自身の大きさにします。したがって、見た目としては中央にbutton1が表示されいるイメージになります。
((<例2|"IMG:center:gtk_hbox6.jpg">))

=== Gtk::Box#pack_start(button1, false, false, 10)の場合
両端のpadding = 10の部分はきちんと取るのですが、button1は領域を広げることもなくそれ自身の大きさを使うので、イメージ画面のように左側に寄っていきます。
((<例3|"IMG:center:gtk_hbox7.jpg">))

== おしりから子ウィジェットを配置する
Gtk::HBox#pack_startは左から右へ、Gtk::VBox#pack_startは上から下へ子ウィジェットを配置していくのですが、Gtk::Box#pack_endはその逆の方向に子ウィジェットを配置していきます。

 require 'gtk'

 box = Gtk::HBox.new(true)

 button1 = Gtk::Button.new("ABCDEFGHIJKLMN")

 box.pack_end(button1, false)

 Gtk::Window.new.add(box).set_usize(300,50).show_all
 Gtk.main

--- Gtk::Box#pack_end(child_widget, expand = true, fill = true, padding = 0)
    boxの中にchild_widgetをGtk::Box#pack_startとは逆方向に配置します。つまり、呼び出した順にGtk::HBoxの場合は右から左へ、Gtk::VBoxの場合は下から上に配置します。
    * child_widget - 変更対象の子ウィジェットです。
    * expand - trueの場合、子ウィジェットが広がれるだけ広がります。falseの場合、子ウィジェットは内側のウィジェットにちょうどフィットするように縮みます。
    * fill - trueの場合、内側のウィジェットの周囲に隙間があればウィジェットがそこを埋めるように広がります。falseの場合、その部分は広がりません。expandがtrueの場合のみ効果を持ちます。
    * padding - それぞれの子ウィジェットの周囲に確保されるスペースの大きさ(ピクセル値)を指定します。

== ウィジェットの配置を移動する
button1をクリックするとボックスの2番目(真ん中)にbutton1を移動します。

 require 'gtk'

 box = Gtk::HBox.new

 button1 = Gtk::Button.new("111")
 button1.signal_connect(Gtk::Button::SIGNAL_CLICKED) do
   box.reorder_child(button1, 1)
 end
 button2 = Gtk::Button.new("222")
 button3 = Gtk::Button.new("333")

 box.pack_start(button1, false)
 box.pack_start(button2, false)
 box.pack_start(button3, false)

 Gtk::Window.new.add(box).show_all
 Gtk.main

--- Gtk::Box#reorder_child(child_widget, position)
    すでにGtk::Box上に配置されている子ウィジェットを移動します。
    * child_widget - 移動する子ウィジェット
    * position - 移動する位置(0〜)

== 子ウィジェットがどのように配置されているのかを知る
子ウィジェットがどのように配置されているのか表示してみます。

 require 'gtk'

 box = Gtk::HBox.new(true, 10)

 button1 = Gtk::Button.new("AAA")
 button2 = Gtk::Button.new("BBB")

 box.pack_start(button1, true, false, 10)
 box.pack_end(button2, false, true, 5)

 p box.query_child_packing(button1)
 p box.query_child_packing(button2)

 Gtk::Window.new.add(box).show_all
 Gtk.main

--- Gtk::Box#query_child_packing(child_widget)
    子ウィジェットがどのように配置されているのかという情報を返します。返り値は、expand, fill, padding, packtypeの配列です。
    packtypeは、Gtk::PACK_START(= 0), Gtk::PACK_END(= 1)が返ります。

== 各設定値をあとから設定する
今まで設定してきた値をボタンをクリックすることで変更してみます。

 require 'gtk'

 box = Gtk::HBox.new

 button1 = Gtk::Button.new("homogeneous")
 button1.signal_connect(Gtk::Button::SIGNAL_CLICKED) do
   box.set_homogeneous(true)
 end
 button2 = Gtk::Button.new("spacing")
 button2.signal_connect(Gtk::Button::SIGNAL_CLICKED) do
   box.set_spacing(20)
 end
 button3 = Gtk::Button.new("child_packing")
 button3.signal_connect(Gtk::Button::SIGNAL_CLICKED) do
   box.set_child_packing(button3, true, true, 10, Gtk::PACK_END)
 end

 box.pack_start(button1)
 box.pack_start(button2)
 box.pack_start(button3)

 Gtk::Window.new.add(box).show_all
 Gtk.main

--- Gtk::Box#set_homogeneous(homogeneous)
    子ウィジェットを均一に配置するかどうかを指定します。Gtk::Box.new(homogeneous, spacing)のhomogeneousと同じです。
    * homogeneous - 「均一」フラグ。trueの場合は、このボックスに配置される各ウィジェットが同じサイズになり(Gtk::HBoxでは同じ幅、Gtk::VBoxでは同じ高さ)、falseの場合はウィジェット自身が持つサイズになります。

--- Gtk::Box#set_spacing(spacing)
    子ウィジェット間のスペースを指定します。Gtk::Box.new(homogeneous, spacing)のspacingと同じです。
    * spacing - 子ウィジェット間の隙間の大きさ(ピクセル値)です。

--- Gtk::Box#set_child_packing(child_widget, expand, fill, padding, packtype)
    Gtk::Box#pack_start/endと同様です。
    * child_widget - 変更対象の子ウィジェットです。
    * expand - trueの場合、子ウィジェットが広がれるだけ広がります。falseの場合、子ウィジェットは内側のウィジェットにちょうどフィットするように縮みます。
    * fill - trueの場合、内側のウィジェットの周囲に隙間があればウィジェットがそこを埋めるように広がります。falseの場合、その部分は広がりません。expandがtrueの場合のみ効果を持ちます。
    * padding - それぞれの子ウィジェットの周囲に確保されるスペースの大きさ(ピクセル値)を指定します。
    * packtype - Gtk::PACK_START, Gtk::PACK_ENDを指定します。




ruby-gnome2-cvs メーリングリストの案内
Back to archive index