Skip to content

Overview of layout methods

Almar Klein edited this page Feb 13, 2015 · 12 revisions

This page provides an overview of existing layout methods, used by a variety of layout systems.

Intro

Examples layout systems

Widget or not

A layout could be a container widget. Or just something that is associated with a widget ... Layouts should allow other layouts as elements.

Element size

Some layouts allow elements to determine their own size. Others layouts try to take over the sizing, but generally allow for a minimum width/height to be set.

Layout methods in widget toolkits

Free layout (wx, Qt)

Absolute positioning. Positions and sizes could still be expressed in percentage so they scale with the parent size.

Constrained layout (ENAML)

Using a complex syntax (at least on first view) one has a great flexibility to define layouts. ENAML also has vbox and hbox layout for convenience.

Flow layout (Java)

Places elements horizontally until it no longer fits, in which case it goes to the next "line".

Border layout (Java)

Has 5 spaces: 1 center and the 4 borders. The center element gets as much space as possible, reducing the borders to their minimal size. A bit like a DockWidgetlayout but less powerful.

Box layout (Java, Qt, xul)

Place elements either vertically or horizontally, dividing the available space equally among the elements, subject to elements that need more space. May also use an alignment property of elements instead of making each element take up the full width/height. This is only done if the maximum width is too small. And in some implementation also if the alignments are not all equal.

Can also add empty space (Filler in Java, spacing in Qt).

On Qt, there is also the stretch parameter (flex in xul), used to influence the relative space of each element. In xul, the pack parameter defines alignment of the batch when the container is larger than the combined max sizes. Xul also has the align parameter for the opposite dimension.

Java also has GroupLayout, which seems to do something similar.

Grid layout (Java, Qt, xul, etc.)

Very flexible layout in a grid. Elements can occupy one cell, or multiple. Java has a simple GridLayout and a more complex/flexible GridBagLayout. The latter seems mostly different from an API viewpoint, since it allows putting elements in arbitrary locations.

Form layout (Qt)

A 2xN grid layout that has labels left and an arbitrary widget on the right. Basically a special case of the Grid layout, for convenience.

Spring layout (Java)

Defines relationships (constraints). It seems similar to Qt's FormLayout, but more flexible. It also seems to do what Qt's BoxLayout can do wit stretch.

Anchor layout (Qt)

In a free-form layout, elements can be placed relative to each-other via an anchor.

Visvis method

Each element has a pos and a size, relative to the parent element. If either is smaller than 1, it represents that value * width/height of the parent element. If a value is smaller than 0, it is the position from the end, or the width/height minus that amount.

Is in fact similar to the absolute positioning (with percentage positioning and sizing, and negative sizes to have special meaning).

Splitter

Be able to grab the divider between two (or more) widgets.

Dock widgets (Qt)

Like Qt's mainwindow has. Fancy! Also https://github.com/phosphorjs/phosphor-ui/tree/master/examples/dockarea

Not really layouts

Group box (Qt)

To group widgets in a box with a title. Really just a container widget; the box needs a layout to organize the children elements.

Button group (Qt)

To turn all buttons off if one is turned on (for radio buttons).

Tabs

Tabs can be seen as sort of layout (in z-dimension, sort if). Java has CardLayout. QStackedLayout in Qt. Called deck in xul.