Swing Layout’s Unveiled

18 April 2007

A layout manager is used to automatically define how different elements are placed within a window. Layout managers use some algorithm for doing this. Although, one can position the controls manually in Java like in any other GUI programming environments, it can become very tedious to define the position of a large number of components in case of an application having a very large number of GUI elements and if the positions of all the elements are fixed than if the window is resized, the application can end-up having a bizarre look. Layout managers automatically resize and place the elements every time the window is resized.

To set the layout for a container window, the “ setLayout() ” method is used. If no call to this method is made then the default layout manager is used.

These are the five layout managers in Java:

Flow Layout
Border Layout
Grid Layout
Card Layout
Grid-Bag Layout

Flow Layout

This is the default layout manager in Java and and if no call to the “ setLayout ” method is made, then this layout manager is used. It implements a simple layout style which is, in some ways, similar to the flow of words in a text editor. By default, elements are laid out starting from the top left corner of the screen till the end of the line after which the next line is used and so on.

Flow layout manage has four constructors

FlowLayout().
FlowLayout(int align).
FlowLayout(int align, int h-space, int v-space).

The 1st constructor places the elements in the default locations.The 2nd one places them according to the alignment chosen by the designer which can be left, right or center and as their names imply, position the elements accordingly.
The 3rd constructor places the elements according to the alignment chosen by the designer and also let the designer define the spacing between the different components placed on the same line and the spacing between the rows, by default there is a spacing of 5 pixels between the elements.

 
import javax.swing.*;
import java.awt.*;
 
public class flowlayout extends JFrame
{
	public static void main(String[] args)
	{
		flowlayout fl = new flowlayout();
	}
 
	public flowlayout()
	{
		JFrame jf1=new JFrame("FlowLayout 1");
 
		jf1.setSize(250, 150);
 
		jf1.setLayout(new FlowLayout());
 
		JButton b1 = new JButton("Button1");
		JButton b2 = new JButton("Button2");
		JButton b3 = new JButton("Button3");
		JButton b4 = new JButton("Button4");
		JButton b5 = new JButton("Button5");
 
		jf1.add(b1);
		jf1.add(b2);
		jf1.add(b3);
		jf1.add(b4);
		jf1.add(b5);
 
		jf1.setVisible(true);
	}
}

The output of this program is:

If we replace the statement

jf1.setLayout(new FlowLayout());

with

 
jf1.setLayout(new FlowLayout(FlowLayout.LEFT)));

the output becomes

and if it is replaced by

 
jf1.setLayout(new FlowLayout(FlowLayout.LEFT,20,10));
then the output becomes

Border Layout

In border-layout, all the elements are placed at 5 pre-defined positions, these positions are top, left, center, right and bottom and are referred to by the constants BorderLayout.NORTH, BorderLayout.EAST, BorderLayout.CENTER, BorderLayout.WEST and BorderLayout.SOUTH respectively. These constants are used when placing components on the screen.

Border layout manager has two constructors which are

BorderLayout().
BorderLayout(int h-space, v-space).

The first one places the elements at a distance of five pixels from each other while the second one places them at a distance specified by the programmer.

Here is some sample code demonstrating the border layout manager

 
import javax.swing.*;
import java.awt.*;
 
public class borderlayout extends JFrame
{
	public static void main(String[] args)
	{
		borderlayout bl = new borderlayout();
	}
 
	public flowlayout()
	{
		JFrame jf1=new Jframe("BorderLayout");
 
		jf1.setSize(250, 150);
 
		jf1.setLayout(new BorderLayout());
 
		JButton b1 = new JButton("Button1");
		JButton b2 = new JButton("Button2");
		JButton b3 = new JButton("Button3");
		JButton b4 = new JButton("Button4");
		JButton b5 = new JButton("Button5");
 
		jf1.add(b1, BorderLayout.NORTH);
		jf1.add(b2, BorderLayout.EAST);
		jf1.add(b3, BorderLayout.CENTER);
		jf1.add(b4, BorderLayout.WEST);
		jf1.add(b5, BorderLayout.SOUTH);
 
		jf1.setVisible(true);
	}
}

This program produces this output

Replacing the statement

 
jf1.setLayout(new BorderLayout());

with

 
jf1.setLayout(new BorderLayout(5,10));

gives us

Grid Layout

The grid-layout divides the screen in a grid. The number of rows and columns in this grid are defined by the programmer in the constructor.
Grid layout has three forms of its constructor

GridLayout().
GridLayout(int rows, int cols).
GridLayout(int rows, int cols, int h-space, int v-space).

The first constructor defines a grid with a single row and column, in the second one the programmer defines the number of rows and columns in the grid while in the third one the programmer defines the number of rows and columns and the distance between the elements.

Here is a program demonstrating the grid layout manager:

 
import javax.swing.*;
import java.awt.*;
 
public class gridlayout extends JFrame
{
	public static void main(String[] args)
	{
		gridlayout fl = new gridlayout();
	}
 
	public flowlayout()
	{
		JFrame jf1=new JFrame("GridLayout 1");
 
		jf1.setSize(250, 150);
 
		jf1.setLayout(new GridLayout());
 
		JButton b1 = new JButton("Button1");
		JButton b2 = new JButton("Button2");
		JButton b3 = new JButton("Button3");
 
		jf1.add(b1);
		jf1.add(b2);
		jf1.add(b3);
 
		jf1.setVisible(true);
	}
}

The output produced by this program is:

If we replace the statement:

jf1.setLayout(new GridLayout());

with

jf1.setLayout(new GridLayout(3,1));

we get:

and if we replace it with

jf1.setLayout(new GridLayout(2,2,10,10));

we get

Card Layout

Card layout is useful when user interfaces have optional components which can be dynamically enabled and disabled based on user input as it can have several different layouts each on a separate card.

This layout manager requires slightly more work than the other layout managers.

In the card lay-out manager, components can not be placed directly. We need to first place components in a panel and these panels can have their own layout managers and are then placed in the card layout manager. You can think of an application having card-layout manager as having several different tabs and each tab has its own components laid out according to its own layout managers style.

Grid-Bag Layout

Grid-bag layout is the most powerful method for managing GUI components. It not only creates a row and column grid like the grid layout manager, the programmer can actually control the span of individual cells, the proportion between the rows and columns and the arrangement of individual elements inside the grid (one could say that the grid-bag layout provides fine grained control over the elements of the GUI).

Here is a list of all the constraints and their respective functions:

gridx and gridy.

These are used to specify the row and column at the upper left of the element to be added. The top row is referred to as gridy=0 and the left-most column as gridx=0.

gridwidth and gridheight.

These are used to specify the number of columns and rows in the grid. By default both have a value of one.

weightx and weighty.
These are used to specify the proportions of the rows and columns, how wide and how deep they would be.
fill.
1. NONE If the component is not to be resized and is to maintain its original size.
2. HORIZONTAL If the component is to be resized horizontally to make it fit the cell width-wise.
3. VERTICAL If the component is to be resized vertically to make it fit the cell width-wise.
4. BOTH If the component is to be resized both vertically and horizontally.

This constraint comes into play if the size of the component placed in a particular cell is smaller than the cell. This constraint specifies if and how the component is to be resized.
Here is a list of the constant values for this constraint:

anchor

This constraint also comes into play when the size of the component is smaller than the size of the cell. It specifies where in the cell is the component supposed to go.
Here is a list of the constant values used for this constraint:NORTHEAST, NORTH, NORTHWEST, EAST, CENTER, WEST, SOUTHEAST, SOUTH and SOUTHWEST.

Related Posts:

Top Of Page | Trackback

If you found this page useful, consider linking to it. Simply copy and paste the code below into your web site.

It will look like this: Swing Layout's Unveiled

2 Responses to “Swing Layout’s Unveiled”

On April 18th, 2007 at 9:27 pm, Mikael Grev Says:

The built in layout managers are just horribly inflexible and GridBagLayout is complex and hard to maintain, if you ever get it right.

There’s a good sum up of free third party layout managers here: http://wiki.java.net/bin/view/Javadesktop/LayoutManagerShowdown

The best one is (of course, since it’s ours www.miglayout.com.
On November 26th, 2007 at 7:53 pm, Darryl Burke Says:

Why do your sample classes extend JFrame and then use a JFrame local to the constructor? They would work the same without being subclassed to JFrame.

I sincerely hope the criticism is taken in the best spirit and the codes are improved for the benefit of all who visit here.

Darryl

Java Tips Blog

Weblog of Java-Tips.org

Swing Layout’s Unveiled

2 Responses to “Swing Layout’s Unveiled”

Leave a Reply

Categories

Subscribe

Favorite Links

Archive

Meta