1. About BoxLayout
In Java Swing, the API offers a new layout called BoxLayout. This layout will help in forming the controls either vertically or horizontally. Unlike FlowLayout, this Layout grows in a distinct direction. Say, for example, we have a box layout to lay out controls vertically. For each newly added control, the layout grows vertically. While creating the BoxLayout, we can fix the direction is vertical and horizontal.
Have a look at the below picture:
Here, one can see two sets of JButton controls. One is packed in a single column and our example packs the other one in a single row. The Gray border is the BoxLayout, and the layout grows when a new control comes into the layout. In a vertical pack, the layout grows vertically and in the horizontal pack; the layout grows width-wise.
2. About BoxLayout Example
The below picture shows the example we will make here below:
In our example, we have a JFrame window. A FlowLayout Manager takes care of laying out the controls. We have three JPanels. JFrame’s FlowLayout Manager packs the JPanels and in our above screenshot, we have ample space to layout all three JPanels in a single row. First JPanel on the left and third JPanel on the Right, both are taken over by two BoxLayout managers. Both these panel pack the controls vertically. The Layout in the middle packs two JTextArea controls and this panel packs the TextArea horizontally. Note, there is JSeparator which divides both these JTextArea, and the separator run vertical.
The below video explains the basics of BoxLayout & the example we will create in the coming sections:
3. Vertical BoxLayout
First, we create two JPanel objects. At line 3 and 13, we set
BoxLayout for both JPanel controls by calling its
setLayout method. We pass a instance to this method. Constructor is taking the JPanel instance as the first Param. In both the code snippets, the Box Layout was informed to arrange the controls vertically. By looking at the code, you can see each of the JPanels are taking three JButton objects and the BoxLayout will arrange the JButton controls on top of each other as we pass the constant
Y_AXIS.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
//Sample 02: Left Panel Vertical JPanel LeftPanelY = new JPanel(); LeftPanelY.setLayout(new BoxLayout(LeftPanelY, BoxLayout.Y_AXIS)); JButton btn1 = new JButton("Button 1"); JButton btn2 = new JButton("Button 2"); JButton btn3 = new JButton("Button 3"); LeftPanelY.add(btn1); LeftPanelY.add(btn2); LeftPanelY.add(btn3); //Sample 03: Right Panel Vertical JPanel RightPanelY = new JPanel(); RightPanelY.setLayout(new BoxLayout(RightPanelY, BoxLayout.Y_AXIS)); JButton btn4 = new JButton("Button 4"); JButton btn5 = new JButton("Button 5"); JButton btn6 = new JButton("Button 6"); RightPanelY.add(btn4); RightPanelY.add(btn5); RightPanelY.add(btn6); |
4. Horizontal BoxLayout
Here, we create our JTextArea controls. The text area control must run side-by-side and hence we create a Box Layout with X-axis orientation at line no 3. To provide scrolling support for the JTextArea, we use the JScrollPane instance. Also note the usage of the JSeparator which we house in between the two JTextArea objects. Finally, the code below adds all three components to this BoxLayout managed middle panel.
|
1 2 3 4 5 6 7 8 9 10 11 |
//Sample 04: MidPanel Horizontal JPanel MidPanelX = new JPanel(); MidPanelX.setLayout(new BoxLayout(MidPanelX, BoxLayout.X_AXIS)); JTextArea jta1 = new JTextArea(10, 10); JScrollPane Jta1Scroll = new JScrollPane(jta1); JSeparator jsp = new JSeparator(JSeparator.VERTICAL); JTextArea jta2 = new JTextArea(10, 10); JScrollPane Jta2Scroll = new JScrollPane(jta2); MidPanelX.add(Jta1Scroll); MidPanelX.add(jsp); MidPanelX.add(Jta2Scroll); |
5. Add all JPanels to JFrame
Now, we have three BoxLayout Managed JPanels in hand. It is time to add these to the JFrame Window. Recall, the JFrame is using a FlowLayout manager, and the FlowLayout treats all these 3 JPanels as a component and packs them in a row. When there is no room for a JPanel, the FlowLayout will move JPanel to the next line, but the BoxLayout keeps together the controls inside the JPanel. Note the order in which we add our JPanels. Below is the code:
|
1 2 3 4 5 |
//Sample 05: Add All three Boxed Panels to Frame Window //Managed by Flow Layout ControlHost.add(LeftPanelY); ControlHost.add(MidPanelX); ControlHost.add(RightPanelY); |
The below picture shows how the FlowLayout of JFrame packs the JPanel and how the BoxLayout keeps the controls together in X-Axis/Y-Axis while user resizing the JFrame:
6. Youtube – Code Implementation and Demo
7. Code Reference
7.1 MainEntry.java
|
1 2 3 4 5 6 7 8 9 |
package tube.coding.examples; public class MainEntry { public static void main(String[] args) { //Sample 06: Create Instance of JFrameDemo BoxLayoutExample frame = new BoxLayoutExample("Boxlayout Example"); frame.setVisible(true); } } |
7.2 BoxLayoutExample.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 63 64 |
package tube.coding.examples; import java.awt.Container; import java.awt.FlowLayout; import java.awt.HeadlessException; import javax.swing.BoxLayout; import javax.swing.JButton; import javax.swing.JFrame; import javax.swing.JPanel; import javax.swing.JScrollPane; import javax.swing.JSeparator; import javax.swing.JTextArea; public class BoxLayoutExample extends JFrame { public BoxLayoutExample(String title) throws HeadlessException { //Sample 01: Set Size and Position super(title); setBounds(100, 100, 450, 250); Container ControlHost = getContentPane(); ControlHost.setLayout(new FlowLayout()); //Sample 02: Left Panel Vertical JPanel LeftPanelY = new JPanel(); LeftPanelY.setLayout(new BoxLayout(LeftPanelY, BoxLayout.Y_AXIS)); JButton btn1 = new JButton("Button 1"); JButton btn2 = new JButton("Button 2"); JButton btn3 = new JButton("Button 3"); LeftPanelY.add(btn1); LeftPanelY.add(btn2); LeftPanelY.add(btn3); //Sample 03: Right Panel Vertical JPanel RightPanelY = new JPanel(); RightPanelY.setLayout(new BoxLayout(RightPanelY, BoxLayout.Y_AXIS)); JButton btn4 = new JButton("Button 4"); JButton btn5 = new JButton("Button 5"); JButton btn6 = new JButton("Button 6"); RightPanelY.add(btn4); RightPanelY.add(btn5); RightPanelY.add(btn6); //Sample 04: MidPanel Horizontal JPanel MidPanelX = new JPanel(); MidPanelX.setLayout(new BoxLayout(MidPanelX, BoxLayout.X_AXIS)); JTextArea jta1 = new JTextArea(10, 10); JScrollPane Jta1Scroll = new JScrollPane(jta1); JSeparator jsp = new JSeparator(JSeparator.VERTICAL); JTextArea jta2 = new JTextArea(10, 10); JScrollPane Jta2Scroll = new JScrollPane(jta2); MidPanelX.add(Jta1Scroll); MidPanelX.add(jsp); MidPanelX.add(Jta2Scroll); //Sample 05: Add All three Boxed Panels to Frame Window //Managed by Flow Layout ControlHost.add(LeftPanelY); ControlHost.add(MidPanelX); ControlHost.add(RightPanelY); } } |
Categories: Swing
Tags: add method, BoxLayout.X_AXIS, BoxLayout.Y_AXIS, setLayout
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.