4. Layout Containers

Gtk+ uses containers to arrange position of items. Commonly used containers are Gtk.Box, Gtk.Table and Gtk.Grid. In general, containers are invisible for end user. We put items into containers and adjust position.

4.1 Boxes

Boxes provide to adjust widgets horizontally or vertically which are specified with :horizontal and :vertical respectively in initialization of the objects. Boxes are invisible in the interface and place widgets according to our specification.

require "gtk3"

win = Gtk::Window.new
# define horizontal box
hbox = Gtk::Box.new(:horizontal, 3)
hello_button = Gtk::Button.new(:label => "Hello World")
goobye_button = Gtk::Button.new(:label => "Goodbye")

# add defined box to main window
win.add(hbox)
# specify positions of items in the box
hbox.pack_start(hello_button, :expand => true, :fill => false, :padding =>2)
hbox.pack_start(goobye_button, :expand => true, :fill => false, :padding =>2)

# print hello world to terminal
hello_button.signal_connect("clicked") {puts "Hello World"}
goobye_button.signal_connect("clicked") {puts "Goodbye"}

win.signal_connect("destroy"){Gtk.main_quit}
win.show_all
Gtk.main 

We have initialized a horizontal box like that: Gtk::Box.new(:horizontal, 3). After we should put other widgets into the box, pack_start puts widgets from left to right for horizontal box. It has attributes, :expand means widget location can change when main window size changed. :fill means widget should fill its space as far as possible. :padding specifies spaces between widgets in the box.

We also could use pack_end, it places child items from right to left.

4.2 Grid

Grid is used to specify more certain locations of child widgets. You should specify location of coloumn and row.

You can specify positions using attach(), also possible to specify next to an existed widget using attach_next_to.

#!/usr/bin/ruby
require "gtk3"

win = Gtk::Window.new
grid = Gtk::Grid.new
win.set_title("Grid Example")

button1 = Gtk::Button.new(:label => "Button 1")
button2 = Gtk::Button.new(:label => "Button 2")
button3 = Gtk::Button.new(:label => "Button 3")
button4 = Gtk::Button.new(:label => "Button 4")
button5 = Gtk::Button.new(:label => "Button 5")
button6 = Gt
k::Button.new(:label => "Button 6")

grid.add(button1)
grid.attach(button2, 1, 0, 2, 1)
grid.attach_next_to(button3, button1, Gtk::PositionType::BOTTOM, 1, 2)
grid.attach_next_to(button4, button3, Gtk::PositionType::RIGHT, 2, 1)
grid.attach(button5, 1, 2, 1, 1)
grid.attach_next_to(button6, button5, Gtk::PositionType::RIGHT, 1, 1)

win.add(grid)
win.signal_connect("destroy"){Gtk.main_quit}
win.show_all
Gtk.main

4.3 Table

Table is similar to grid. You have to specify row and coloumn.

#!/usr/bin/ruby
require "gtk3"

win = Gtk::Window.new
table = Gtk::Table.new(3, 3, true)
win.set_title("Table Example")

button1 = Gtk::Button.new(:label => "Button 1")
button2 = Gtk::Button.new(:label => "Button 2")
button3 = Gtk::Button.new(:label => "Button 3")
button4 = Gtk::Button.new(:label => "Button 4")
button5 = Gtk::Button.new(:label => "Button 5")
button6 = Gtk::Button.new(:label => "Button 6")

table.attach(button1, 0, 1, 0, 1)
table.attach(button2, 1, 3, 0, 1)
table.attach(button3, 0, 1, 1, 3)
table.attach(button4, 1, 3, 1, 2)
table.attach(button5, 1, 2, 2, 3)
table.attach(button6, 2, 3, 2, 3)

win.add(table)
win.signal_connect("destroy"){Gtk.main_quit}
win.show_all
Gtk.main

Gtk::Table.new(row, coloumn, homogenous) initialized and specified how many row and coloumn we use. If homogenous is true that means all cells are sized with largest cell.