Question

In this part of the Ruby Qt programming tutorial, we will introduce layout managers.

When we design the GUI of our application, we decide what components we will use and how we will organise those components in the application. To organise our components, we use specialised non visible objects called layout managers. There are several options in Qt. We can use absolute positioning, built-in layout managers or create a custom layout manager. We can also visually build the layouts using the Qt Designer.

Qt has some important built-in layout managers. The Qt::VBoxLayout class lines up widgets vertically. Qt::HBoxLayout lines up widgets horizontally. The Qt::GridLayout class lays out widgets in a grid. The grid layout is the most flexible layout manager. The box layouts can be nested into one another to create complex layouts.

Absolute positioning

In most cases, programmers should use layout managers. There are a few situations, where we can use absolute positioning. In absolute positioning, the programmer specifies the position and the size of each widget in pixels. The size and the position of a widget do not change if we resize a window. Applications look different on various platforms, and what looks OK on Linux, might not look OK on Mac OS. Changing fonts in our application might spoil the layout. If we translate our application into another language, we must redo our layout. For all these issues, we use the absolute positioning only when we have a reason to do so.

#!/usr/bin/ruby

# ZetCode Ruby Qt tutorial
#
# In this program, we lay out widgets
# using absolute positioning.
#
# author: Jan Bodnar
# website: www.zetcode.com
# last modified: September 2012


require 'Qt'


class QtApp < Qt::Widget

  def initialize
    super
    
    setWindowTitle "Absolute"
    
    init_ui
    
    resize 300, 280
    move 300, 300

    show
  end
  
  def init_ui
  
    setStyleSheet "QWidget { background-color: #414141 }"

    bardejov = Qt::Pixmap.new "bardejov.jpg"
    rotunda = Qt::Pixmap.new "rotunda.jpg"
    mincol = Qt::Pixmap.new "mincol.jpg"

    barLabel = Qt::Label.new self
    barLabel.setPixmap bardejov
    barLabel.move 20, 20

    rotLabel = Qt::Label.new self
    rotLabel.setPixmap rotunda
    rotLabel.move 40, 160

    minLabel = Qt::Label.new self
    minLabel.setPixmap mincol
    minLabel.move 170, 50
  
  end
end

app = Qt::Application.new ARGV
QtApp.new
app.exec

In this example, we show three images using the absolute positioning.

barLabel = Qt::Label.new self
barLabel.setPixmap bardejov

The Qt::Label widget is used to hold the image.

barLabel.move 20, 20

We use the move method to position the label on the window at x=20, y=20.

When we resize the window, the labels retain their initial size.

Figure: Absolute positioning

Buttons example

In the following example, we will position two buttons in the bottom right corner of the window.

#!/usr/bin/ruby

# ZetCode Ruby Qt tutorial
#
# In this program, we use box layouts
# to position two buttons in the
# bottom right corner of the window.
#
# author: Jan Bodnar
# website: www.zetcode.com
# last modified: September 2012

require 'Qt'


class QtApp < Qt::Widget

  def initialize
    super
    
    setWindowTitle "Buttons"
    
    init_ui
    
    resize 330, 170
    move 300, 300

    show
  end
  
  def init_ui
    vbox = Qt::VBoxLayout.new self
    hbox = Qt::HBoxLayout.new

    ok = Qt::PushButton.new "OK", self
    apply = Qt::PushButton.new "Apply", self

    hbox.addWidget ok, 1, Qt::AlignRight
    hbox.addWidget apply

    vbox.addStretch 1
    vbox.addLayout hbox
  end
  
end

app = Qt::Application.new ARGV
QtApp.new
app.exec

We use nested box layouts to get our intended layout.

vbox = Qt::VBoxLayout.new self
hbox = Qt::HBoxLayout.new

We use one vertical and one horizontal box.

ok = Qt::PushButton.new "OK", self
apply = Qt::PushButton.new "Apply", self

These are the two buttons that will go into the bottom right corner of the window.

hbox.addWidget ok, 1, Qt::AlignRight

We put the ok button into the horizontal box. The second parameter is the stretch factor. It expands the area allotted to the ok button. It takes all available space left. The alignment of the windget inside this area is controlled by the third parameter. The Qt::AlignRight will align the button to the right.

vbox.addStretch 1

This line creates a vertically expanded white space, which will push the horizontal box with the buttons to the bottom.

vbox.addLayout hbox

The horizontal box is nested into the vertical box.

Figure: Buttons example

Windows example

The following is a more complicated example with nested box layouts.

#!/usr/bin/ruby

# ZetCode Ruby Qt tutorial
#
# In this program, use box layouts
# to create a Windows example
#
# author: Jan Bodnar
# website: www.zetcode.com
# last modified: September 2012

require 'Qt'


class QtApp < Qt::Widget

  def initialize
    super
    
    setWindowTitle "Windows"
    
    init_ui
    
    resize 350, 300
    move 300, 300

    show
  end
  
  def init_ui
    vbox = Qt::VBoxLayout.new self

    vbox1 = Qt::VBoxLayout.new
    hbox1 = Qt::HBoxLayout.new
    hbox2 = Qt::HBoxLayout.new

    windLabel = Qt::Label.new "Windows", self
    edit = Qt::TextEdit.new self
    edit.setEnabled false

    activate = Qt::PushButton.new "Activate", self
    close = Qt::PushButton.new "Close", self
    help = Qt::PushButton.new "Help", self
    ok = Qt::PushButton.new "OK", self

    vbox.addWidget windLabel

    vbox1.addWidget activate
    vbox1.addWidget close, 0, Qt::AlignTop
    hbox1.addWidget edit
    hbox1.addLayout vbox1

    vbox.addLayout hbox1

    hbox2.addWidget help
    hbox2.addStretch 1
    hbox2.addWidget ok
    
    vbox.addLayout hbox2, 1
    setLayout vbox

  end  
end

app = Qt::Application.new ARGV
QtApp.new
app.exec

In this layout, we use two vertical and horizontal boxes.

box = Qt::VBoxLayout.new self

This is the base layout of the example.

windLabel = Qt::Label.new "Windows", self

First goes the label widget. It goes simply to the top of the vertical box.

vbox1.addWidget activate
vbox1.addWidget close, 0, Qt::AlignTop
hbox1.addWidget edit
hbox1.addLayout vbox1

vbox.addLayout hbox1

In the center part of the window we have a text edit widget and two vertically lined up buttons. The buttons go into a vertical box. The buttons are aligned to the top within this vertical box. The vertical box and the text edit go into a horizontal box. This horizontal box goes to the base vertical box, just below the label widget.

hbox2.addWidget help
hbox2.addStretch 1
hbox2.addWidget ok

vbox.addLayout hbox2, 1

The help and the ok button go into another horizontal box. There is an expanded white space between these two buttons. Again, the horizontal box goes to the base vertical box.

setLayout vbox

The base vertical box is set to be the main layout of the window.

Figure: Windows example

New Folder example

In the last example, we use the Qt::GridLayout manager to create a New Folder layout example.

#!/usr/bin/ruby

# ZetCode Ruby Qt tutorial
#
# In this program, use the GridLayout
# to create a New Folder example.
#
# author: Jan Bodnar
# website: www.zetcode.com
# last modified: September 2012

require 'Qt'


class QtApp < Qt::Widget

  def initialize
    super
    
    setWindowTitle "New Folder"
    
    init_ui
    
    resize 300, 300
    move 300, 300

    show
  end
  
  def init_ui
  
    grid = Qt::GridLayout.new self

    nameLabel = Qt::Label.new "Name", self
    nameEdit = Qt::LineEdit.new self
    text = Qt::TextEdit.new self
    okButton = Qt::PushButton.new "OK", self
    closeButton = Qt::PushButton.new "Close", self

    grid.addWidget nameLabel, 0, 0
    grid.addWidget nameEdit, 0, 1, 1, 3
    grid.addWidget text, 1, 0, 2, 4
    grid.setColumnStretch 1, 1
    grid.addWidget okButton, 4, 2
    grid.addWidget closeButton, 4, 3

  end  
end

app = Qt::Application.new(ARGV)
QtApp.new
app.exec

In our example, we have one label, one line edit, one text edit, and two buttons.

grid = Qt::GridLayout.new self

We create an instance of the Qt::GridLayout manager.

grid.addWidget nameLabel, 0, 0

We place the label widget in the first cell of the grid. The cells count from 0. The last two parameters are the row and column number.

grid.addWidget nameEdit, 0, 1, 1, 3

The line edit widget is placed at the first row, second column. The last two parameters are the row span and the column span. Horizontally, the widget will span three columns.

grid.setColumnStretch 1, 1

The parameters of the method are the column number and the stretch factor. Here we set stretch factor 1 to the second column. This means that this column will take all remaining space. This was set, because we wanted our buttons to retain their initial size.

Figure: New Folder example

In this part of the Ruby Qt tutorial, we mentioned layout management of widgets.