Layout Managers
October 2nd, 2008
One of the most confusing aspects of working with Java’s UI package, Swing, is the use of layout managers. This is especially confusing for developers who have worked with other UI frameworks, such as in Visual Basic, where components are placed according to an X/Y axis.
In short, a layout manager is used to determine the size and position of components in a container. Each different layout manager implementation enforces a different set of rules as to the behavior of how components will be laid out.
Keep in mind that the layout manager controls both the position and the size of the components. Each component will indicate its preferred size based on its own internal calculations based on its contents. For instance, a JButton will indicate its preferred size based on the font and text of the button (e.g. an OK button will have a shorter width than a Cancel button, however both will have the same height).
However, the layout manager may decide to completely ignore part or all of the component’s preferred size, choosing instead to set the size based on the rules of the layout. This is often a source of confusion when dealing with the different layout managers.
Additionally, since the size and position are calculated based on the size of the container, these calculations may need to be redone if the container size changes. For instance, if a window is resized and made smaller, the layout manager may recalculate the size and position of its components.
There are a number of layout managers provided by default with Swing, and the rules they enforce are extensive. The following is a summary of the most popular ones and their basic rules.
Flow Layout
Summary: The flow layout is a simple layout that places components from left to right in a row. When there is no more space left on the current row for the next item, a new row is started. The amount of space between each component on a row and between each row are both configurable.
Preferred Size: Flow layout honors the preferred sizes of its components.
Resize Policy: The number of items in each row will be recalculated when the container is resized, potentially creating or removing rows as necessary.
Box Layout
Summary: Box layout aligns all of the components either horizontally in a single row (X-axis) or vertically in a single column (Y-axis), where the axis is chosen at instantiation time of the layout instance. Spacing between the components is done manually by the developer through the use of struts (specific length of whitespace between components) or glue (remaining space is divided up across all of the glue elements).
Preferred Size: Box layout honors the preferred sizes of its components.
Resize Policy: The components will always be laid out in a single line across the specified axis. If there isn’t enough room in the container, the components continue along the axis and are simply not visible.
Grid Layout
Summary: Grid layout divides the container into a table, where the number of rows and columns are specified by the caller at the time of the layout instantiation. Each component added to the container is then placed in an individual cell of the grid from left to right, then top to bottom (in other words, the first component added will be the first row, first column while the second component is in the first row, second column). The grid will fill the container, where each cell is of equal size.
Preferred Size: Grid layout completely ignores the component’s preferred size. Each component is expanded to fill the cell.
Resize Policy: When the container is resized, the size of each cell is recalculated to retain the properties that the grid fills the container and each cell is of equal size. Each component within the cell is consequently resized as well.
Border Layout
Summary Border layout has 5 areas for components: top, bottom, left, right, and center (referred to as north, south, west, east, and center respectively). The outside ones are optional; the center component will stretch to fill the remaining area.
Preferred Size: The north and south areas will honor the preferred height of the component and stretch the width to fill the width of the container. The east and west areas will honor the preferred width of the component and stretch the height to fill the height of the container (minus the height of the north and south elements). The center area will stretch the component’s width and height to fill its area.
Resize Policy: All of the stretch components listed above (width for north/south, height for east/west, both for center) are recalculated to fill the container as it is resized.
There is another popular layout called the Grid Bag Layout. It is, however, much more complicated to use than any of the aforementioned layouts. The trade off is that with that complication comes a great degree of power. I will try to post an entry dedicated to this layout in the future.
