1. Introduction to Flow Layout Manager
In Java, Layout Managers regulates how Controls are laid out in a Container. In this example, we will study about AWT FlowLayout.
The Flow Layout Manager arranges the controls in a row. When there is no room in a row, it moves remaining controls to the next row. Simply speaking, it works like a notepad. The note pad accommodates the words in a line and when there is no room in the current line, it moves the next word to next line.
2. Horizontal Gap and Vertical Gap of FlowLayout
The Horizontal and Vertical gap between the components are represented as hgap and vgap. This also applies to container edge and the component which lives in the container. Have a look at the below picture:
The above picture shows vgap and hgap between the components. The FlowLayout class provides get and set methods which deals with these horizontal and vertical gaps. In addition to these set and get methods, one can set these gaps through the constructor also.
3. FlowLayout Component Alignment
Flow Layout supports five types of alignments. They are listed below:
- RIGHT
- LEFT
- CENTER
- LEADING
- TRAILING
The alignment tells the container how it should align the components regarding its edge. For example, in LEFT alignment the container places the components towards its left edge. The LEADING and TRAILING alignment types are useful when orientation of the container comes into a picture. However, these two alignments are not frequently used. The below depiction shows the component alignments:
Note, in the above picture, we see three components in three rows. The Flow Layout will try to accommodate the components in a single row. When there is no room in the current row, it will move the next control to next row based on the alignment.
4. FlowLayout Code Example
Now let us add three label and three text fields to AWT Frame Window and see how FlowLayout arranges them.
1) First let us import required classes to our example.
|
1 2 3 |
//Sample 08: Declare Three Label and Three Text boxes Label Label1, Label2, Label3; TextField Text1, Text2, Text3; |
2) Next, we create three labels and three text fields and then add it to the Frame Window. Note, in the text field constructor, we set a 15 character length so that the text field occupies a considerable amount of space in the Frame Window.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
//Sample 03: Create Label and Text Fields Label1 = new Label("Sample Label 01"); Text1 = new TextField(15); Label2 = new Label("Sample Label 02"); Text2 = new TextField(15); Label3 = new Label("Sample Label 03"); Text3 = new TextField(15); //Sample 04: Add the controls to window add(Label1); add(Text1); add(Label2); add(Text2); add(Label3); add(Text3); |
3) Finally, we create FlowLayout manager and then hand over it to the Frame Window by calling the setLayout() method. In the first parameter, we set right alignment. In the second and third parameter we pass horizontal and vertical gap between components.
|
1 2 3 |
//Sample 07: Set the Layout Manager FlowLayout layout = new FlowLayout(FlowLayout.RIGHT, 3, 3); setLayout(layout); |
The below screen-shot shows output of executing the example:
The below video shows how flow layout works when we resize the Frame Window.
5. Complete Source Code
AwtFlowLayoutExample.java
|
1 2 3 4 5 6 7 |
public class AwtFlowLayoutExample { public static void main(String[] args) { //Sample 08: Create Frame and Display it FrameWin fw = new FrameWin("Flow Layout Example"); fw.setVisible(true); } } |
FrameWin.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
import java.awt.FlowLayout; import java.awt.Frame; import java.awt.event.WindowEvent; import java.awt.event.WindowListener; //Sample 07: Required Imports for this Example import java.awt.Label; import java.awt.TextField; import java.awt.FlowLayout; public class FrameWin extends Frame implements WindowListener { //Sample 08: Declare Three Label and Three Text boxes Label Label1, Label2, Label3; TextField Text1, Text2, Text3; //Sample 01: Constructor public FrameWin(String FrameTitle){ //Sample 02: Set Layout and Title super(FrameTitle); //Sample 03: Create Label and Text Fields Label1 = new Label("Sample Label 01"); Text1 = new TextField(15); Label2 = new Label("Sample Label 02"); Text2 = new TextField(15); Label3 = new Label("Sample Label 03"); Text3 = new TextField(15); //Sample 04: Add the controls to window add(Label1); add(Text1); add(Label2); add(Text2); add(Label3); add(Text3); //Sample 05: Set Size of the Frame setSize(350, 150); setLocation(100,100); //Sample 06: Register with the Listener addWindowListener(this); //Sample 07: Set the Layout Manager FlowLayout layout = new FlowLayout(FlowLayout.RIGHT, 3, 3); setLayout(layout); } //Sample 05: Implement the Listeners public void windowOpened(WindowEvent e) {} public void windowClosing(WindowEvent e) { this.dispose(); } public void windowClosed(WindowEvent e) {} public void windowIconified(WindowEvent e) {} public void windowDeiconified(WindowEvent e) {} public void windowActivated(WindowEvent e) {} public void windowDeactivated(WindowEvent e) {} } |
Tags: AWT, FlowLayout, hgap, SetAlignment, vgap
Do you like this Example? Please comment about it for others!!
This site uses Akismet to reduce spam. Learn how your comment data is processed.