CS 1713: Layout Managers

Layout Managers

• BorderLayout - has five areas (North, South, East, West and Center)
• BoxLayout - single row or column
• CardLayout - only one component is visible at a time
• FlowLayout - components displayed left to right, starting a new row if necessary (default)
• GridLayout - components displayed in a grid of rows and columns
• GridBagLayout - components organized in a grid, but can span more than one cell

The most useful simple layouts are the BorderLayout, the BoxLayout and the GridLayout. The gridBagLayout is the most flexible, but also very complicated to use.

The BorderLayout is most useful when you have a large central area with items on the top and/or bottom. The code below sets a panel to have a BorderLayout with a label on top and a button on the bottom:

   JPanel panel = new JPanel();
   panel.setLayout(new BorderLayout());
   JLabel topLabel = new JLabel("this is the top");
   JButton bottomButton = new JButton("bottom button");
   JPanel centerPanel = makeCentralPanel();
   panel.add(topLabel,BorderLayout.NORTH);
   panel.add(bottomButton,BorderLayout.SOUTH);
   panel.add(ceterPanel,BorderLayout.CENTER);

The BoxLayout is useful for items in a single row or column. You can add as many as you like and they are inserted left to right or top to bottom. When you make a BoxLayout you specify whether it is vertical or horizontal using BoxLayout.X_AXIS or BoxLayout.Y_AXIS. The constructor also has an extra parameter which is usually the container that the layout applies to. For example:

   panel.setLayout(new BoxLayout(panel, BoxLayout.X_AXIS);

You can add stretchable empoty space in a BoxLayout by use what is called glue. For example, in the panel above we can do:

   panel.add(new JButton("button 1"));
   panel.add(Box.createHorizontalGlue());
   panel.add(new JButton("button 2"));

The GridLayout is used to place components in a two-dimension grid. Each component in the grid will have the same size. You specify the number of rows and columns you want and then start adding item. The first row will be filled left to right followed by the second row, etc.

You can see a sample of the various layouts here.
These come from Case Study 17 which is available here.

Example 1: The TelephoneKeypadPanel displays the buttons on a telephone keypad using the GridLayout.

public class TelephoneKeypadPanel extends JPanel {
   public TelephoneKeypadPanel() {
      setLayout(new GridLayout(4, 3));
      makeButton("1");
      makeButton("2 - abc");
      makeButton("3 - def");
      makeButton("4 - ghi");
      makeButton("5 - jkl");
      makeButton("6 - mno");
      makeButton("7 - pqrs");
      makeButton("8 - tuv");
      makeButton("9 - wxyz");
      makeButton("*");
      makeButton("O - oper");
      makeButton("#");
   }

   private void makeButton(String label) {
      JButton button = new JButton(label);
      add(button);
   }
} 

public class TelephoneKeypadApplication {
   public static void main(String[] args) {
      JFrame telephone = new JFrame("Telephone keypad");
      telephone.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
      telephone.getContentPane().add(new TelephoneKeypadPanel());
      telephone.pack();
      telephone.setVisible(true);
   }
}