Layout manager

Last updated

Layout managers are software components used in widget toolkits which have the ability to lay out graphical control elements by their relative positions without using distance units. It is often more natural to define component layouts in this manner than to define their position in pixels or common distance units, so a number of popular widget toolkits include this ability by default. Widget toolkits that provide this function can generally be classified into two groups:

Contents

Examples

Android have the ConstraintLayout. [1]

GTK have the Box [2] and Grid [3] classes.

XUL

In XUL, like the vbox container to stack components on top of each other.

<?xml version="1.0"?><?xml-stylesheet href="chrome://global/skin/" type="text/css"?><windowid="vbox example"title="Example"xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"><vbox><buttonid="yes"label="Yes"/><buttonid="no"label="No"/><buttonid="maybe"label="Maybe"/></vbox></window>

This piece of code shows 3 buttons stacked on top of each other in a vertical box.

XAML

The DockPanel container lays out children components according to their Dock properties.

<Pagexmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"WindowTitle="myDock Panel"><DockPanel><TextBlockDockPanel.Dock="Top">Top1</TextBlock><TextBlockDockPanel.Dock="Top">Top2</TextBlock><TextBlockDockPanel.Dock="Top">Top3</TextBlock><TextBlockDockPanel.Dock="Top">Top4</TextBlock></DockPanel></Page>

This code shows 4 text blocks on top of each other.

Java

The FlowLayout layout manager arranges components in a directional flow, much like lines of text in a paragraph. It arranges components horizontally until no more components fit on the same line, then it places them on another line. Other layout managers are GridLayout managers which arrange the components in grid form and BorderLayout managers which also arranges the component in five parts of the frame, thus: south, north, west, east and center.

importjavax.swing.JFrame;importjavax.swing.JButton;importjava.awt.FlowLayout;importjava.awt.Container;publicclassExample{privateJFrameframe;publicExample(){frame=newJFrame("FlowLayout Demo");frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);frame.setLayout(newFlowLayout());frame.add((newJButton("Button 1")));frame.add((newJButton("Button 2")));frame.add((newJButton("Button 3")));frame.add((newJButton("Long-Named Button 4")));frame.add((newJButton("5")));frame.pack();frame.setVisible(true);}publicstaticvoidmain(String[]args){Exampleex=newExample();}}

This code shows 5 buttons alongside each other on the same line:

FlowLayoutDemo.gif

References

  1. ↑ "Build a responsive UI with ConstraintLayout | Views". Android Developers. Google. Retrieved 17 December 2024.
  2. ↑ "Gtk.Box". docs.gtk.org. Retrieved 17 December 2024.
  3. ↑ "Gtk.Grid". docs.gtk.org. Retrieved 17 December 2024.
This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.