1. Introduction to GridBagLayout & GridBagConstraints
We had seen many Layouts in past examples on Java AWT. The GridBagLayout is the most flexible layout in the Java AWT packages. But this comes with the cost of complexity held in the setup of GridBagLayout. You can imagine GridBagLayout as GridLayout with change in cell sizes. Here, we can add controls in relation with the existing one.
The GridBagLayout makes use of the specific settings for each controls which can be set using the GridBagConstraints class. Before adding the controls to the GridBagLayout class, we need to set these component specific setup rules. The bag layout will make use of these setup factors to arrange the components in the parent container.
2. Default Behavior of GridBagLayout
Let us see the default behaviour of the GridBagLayout manager:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
//Sample 01: Create Five Buttons & Give it to GridBagLayout Button b1 = new Button("B1"); Button b2 = new Button("B2"); Button b3 = new Button("B3"); Button b4 = new Button("B4"); Button b5 = new Button("B5"); setLayout(new GridBagLayout()); add(b1); add(b2); add(b3); add(b4); add(b5); |
At Line 7, we set GridBagLayout to our Frame Window. Then we add five buttons to it. The below picture shows how this layout arranges these five buttons. You can see GridBagLayout Manager packed all the five buttons towards the center of the AWT Frame.
3. Horizontal Relative Size via GridBagConstraints weightx
The
weightx property tells how components need to be placed in the container. In the above screenshot, you can see the layout manager is packing the buttons tightly in a single row. There is no gap between the buttons as all buttons are having the default weightx. In the below code, we use
GridBagConstraints to set weightx for each component.
After setting the Java AWT Frame with
GridBagLayout, we create
GridBagConstraints instance at Line 11 and store its reference in gcon. Note, we pass the same instance of this constraint while adding the components to the container and change only the required properties. Before adding button 1, we set its
weightx to 1. Then for button 2, we give
weightx of 2. Then; we reset the
weightx to 1 again and give it to button 3, button 4 and button 5. The net result is: All buttons have weightx of 1 except button2, which has weightx of 2. Below is the code:
|
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 |
//Sample 01: Create 5 Buttons and Set Grid bag Layout Button b1 = new Button("B1"); Button b2 = new Button("B2"); Button b3 = new Button("B3"); Button b4 = new Button("B4"); Button b5 = new Button("B5"); GridBagLayout gbl = new GridBagLayout(); setLayout(gbl); //Sample 02: Set Grid bag Constraints GridBagConstraints gcon = new GridBagConstraints(); gcon.weightx = 1; gbl.setConstraints(b1, gcon); add(b1); gcon.weightx = 2; gbl.setConstraints(b2, gcon); add(b2); gcon.weightx = 1; gbl.setConstraints(b3, gcon); add(b3); gbl.setConstraints(b4, gcon); add(b4); gbl.setConstraints(b5, gcon); add(b5); |
Below is the picture which shows how the GridBagLayout manager arranges all five buttons now:
When we specify the weightx, the buttons are not packed tightly. There is some gap between the buttons and Layout Manger while placing the buttons uses the full width of the AWT frame. Also notice the gap marked in the above screen. The gaps for button2 on both sides are higher than the other buttons, as it is having weightx=2 compared with other buttons which are having weightx of 1.
4 Fill Horizontal and weightx of GridBagConstraints
Now let us change the code from the previous section. In the below code, we specified the Fill method as GridBagConstraints.HORIZONTAL. The code is below:
|
1 2 3 4 |
//Sample 02: Set Grid bag Constraints GridBagConstraints gcon = new GridBagConstraints(); gcon.fill = GridBagConstraints.HORIZONTAL; gcon.weightx = 1; |
The
GridBagLayout now arranges the controls as in the below picture. Since we specified
fill as horizontal, the GridBagLayout manager resized all buttons to occupy the entire width of the container and it is in our case is an AWT Frame. Also, we can observe button 2 is two times bigger than other buttons because it has weightx of 2 while other buttons have 1.
5. GridBagConstraint.gridwidth – REMINDER
We can set gridwidth to GridBagConstraints.REMAINDER to ask the layout manager to end the current row and start a new one. The component which has this attribute will occupy the remaining empty space in the current row. In the above screen, all five buttons are in the same row. Now will use the gridwidth to arrange these five buttons in three rows. Have a look at the below code:
|
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 |
//Example 03: Multiple rows //Sample 3.1: Create 5 Buttons and Set Grid bag Layout Button b1 = new Button("B1"); Button b2 = new Button("B2"); Button b3 = new Button("B3"); Button b4 = new Button("B4"); Button b5 = new Button("B5"); GridBagLayout gbl = new GridBagLayout(); setLayout(gbl); //Sample 3.2: Add Button 1 GridBagConstraints gcon = new GridBagConstraints(); gcon.fill = GridBagConstraints.HORIZONTAL; gcon.weightx = 1; gbl.setConstraints(b1, gcon); add(b1); //Sample 3.3: Set Button 2 ends the Row gcon.gridwidth = GridBagConstraints.REMAINDER; gbl.setConstraints(b2, gcon); add(b2); //Sample 3.3: Add Button 3 & 4 in one row gcon.gridwidth = 1; gbl.setConstraints(b3, gcon); add(b3); gcon.gridwidth = GridBagConstraints.REMAINDER; gbl.setConstraints(b4, gcon); add(b4); //Sample 3.4: Add Button5 in a Separate Row gbl.setConstraints(b5, gcon); add(b5); |
After adding button 1, we set gridwidth with a constant
GridBagConstraints.REMAINDER for button 2. This tells the GridBagLayout manager to end the current row by consuming rest of the space in the current row for button 2. Since, button 2 and button 1 both has same weight set (weightx=1), they take up same space in the first row. The layout manager will add the next component in the next row.
The same way, we keep button 3 and button 4 in the second row using the gridwidth REMINDER. Note, we reset gridwidth as 1 at line 24 to avoid button 3 spawning the entire second row. Moreover, before adding button 4, we end the row by setting gridwidth to REMINDER. Since we add button 5 also with the gridwidth REMINDER; it occupies entire third row. Running the above code snippet produces following result:
6. GridBagConstraints – weightx, weighty & fill Combination
Till now, we have looked at the horizontal fill. The below picture shows the combination weightx, weighty and Fill:
7. GridBagLayout & GridBagConstraints – Watch as YouTube
Categories: AWT
Tags: GridBagConstraints, GridBagConstraints.fill, GridBagConstraints.gridwidth, GridBagConstraints.weightx, GridBagConstraints.weighty, GridBagLayout
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.