Lab8: Visual Layout

Most of the codes and activities source: Introduction to Programming Using Java, Sixth Edition

What is laying out componnets on the screen?

  • Deciding where they are.
  • Deciding how big they are.
So "lay out" means setting the size and the position of a component.

FlowLayout

A FlowLayout simply lines up components in a row across the container. The size of each component is equal to that component's "preferred size." After laying out as many items as will fit in a row across the container, the layout manager will move on to the next row. The components in a given row can be either left-aligned, right-aligned, or centered within that row, and there can be horizontal and vertical gaps between components. If the default constructor, "new FlowLayout()", is used, then the components on each row will be centered and both the horizontal and the vertical gaps will be five pixels. The constructor: 
public FlowLayout(int align, int hgap, int vgap)
can be used to specify alternative alignment and gaps. The possible values of align are: 
  FlowLayout.LEFT, FlowLayout.RIGHT, and FlowLayout.CENTER.

Example

content.setLayout(new FlowLayout(FlowLayout.LEFT,12,5));

BorderLayout

A BorderLayout layout manager is designed to display one large, central component, with up to four smaller components arranged along the edges of the central component. Tthe 
 content.add( comp, borderLayoutPosition );
A BorderLayout
selects the sizes of its components as follows:
  • The NORTH and SOUTH components (if present) are shown at their preferred heights, but their width is set equal to the full width of the container.
  • The EAST and WEST components are shown at their preferred widths, but their height is set to the height of the container, minus the space occupied by the NORTH and SOUTH components.
  • The CENTER component takes up any remaining space. The preferred size of the CENTER component is ignored when the layout is done, but it is taken into account when the preferred size of the container is computed.

GridLayout

A grid layout lays out components in a grid containing rows and columns of equal sized rectangles. Tthe Components are added to the grid in the order shown; that is, each row is filled from left to right before going on the next row. 
new GridLayout(number of Rows, number of Columns)
Example: 
content.setLayout(new GridLayout(0,2));
In fact, as long as you specify a non-zero value for the number of rows, then the number of columns is essentially ignored. The system will use just as many columns as are necessary to hold all the components that you add to the container. If you want to depend on this behavior, you should probably specify zero as the number of columns. You can also specify the number of rows as zero. In that case, you must give a non-zero number of columns. The system will use the specified number of columns, with just as many rows as necessary to hold the components that are added to the container. Horizontal grids, with a single row, and vertical grids, with a single column, are very common. For example: 
content.setLayout(new GridLayout(0,1));
If I want to add some gaps in between the components: 
content.setLayout(new GridLayout(0,1,5,5));

Combining Layouts in a Tabbed Pane area

Tabbaed Pane is a class that manages two or more components (usually JPanel instances) that share the same display space. 
JTabbedPane tabbedPane = new JTabbedPane();

JPanel tab1 = new JPanel();
tab1.setLayout(new GridLayout(1,0,10,10));
....// add your components here

JPanel tab2 = new JPanel();
tab2.setLayout(new FlowLayout());
....// add your components here

tabbedPane.add("GridLayout", tab1);
tabbedPane.add("FlowLayout",tab2);

JPanel mainContent= new JPanel();
mainContent.add(tabbedPane);

Combining Layouts in a Tabbed Pane area and layout inside layout

The First tab in the example below uses FlowLayout. Then inside one JPanel it used BorderLayout inside one panel.
To see more layout managers: A Visual Guide to Layout Managers