GridBagLayout为列提供了额外的余量

Question

i've been working with Swing for quite some time and i finally found the self confidence to learn GridBadLayout.

I'm still learning it, and in this case i can't understand why the following code is not responding as expected: in particular i can't understand why the layout is displaying the columns this way.

By running the snippet, you will se that the panels representing the italian flag are not positioned correctly: the last column(red part of the flag) is detached from the rest of the flag(white part of the flag). So, what am i doing wrong and what can i fix in order to represent correclty the flag?

import java.awt.Color;
import java.awt.Dimension;
import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;
import javax.swing.JFrame;
import javax.swing.JPanel;

public class test extends JPanel {

    private GridBagConstraints gbc;
    private final int CELL_WIDTH = 90;
    private final int CELL_HEIGHT = 110;

    public test() {
        setLayout(new GridBagLayout());

        putBanner(0);

        putFlagRow(1);
        putFlagRow(2);
        putFlagRow(3);
        putFlagRow(4);
    }

    public JPanel getUserPanel(Color c) {
        JPanel ol = new JPanel();
        ol.setPreferredSize(new Dimension(CELL_WIDTH * 10, CELL_HEIGHT));
        ol.setBackground(c);
        return ol;
    }

    public JPanel gettestPanel() {
        JPanel ol = new JPanel();
        ol.setPreferredSize(new Dimension(CELL_WIDTH, CELL_HEIGHT));
        ol.setBackground(Color.white);
        return ol;
    }

    private void putFlagRow(int gridy) {
        gbc = new GridBagConstraints();
        gbc.gridx = 0;
        gbc.gridy = gridy;
        JPanel p1=gettestPanel();
        p1.setBackground(Color.green);
        add(p1, gbc);

        gbc = new GridBagConstraints();
        gbc.gridx = 1;
        gbc.gridy = gridy;
        add(gettestPanel(), gbc);

        gbc = new GridBagConstraints();
        gbc.gridx = 2;
        gbc.gridy = gridy;
        add(gettestPanel(), gbc);

        gbc = new GridBagConstraints();
        gbc.gridx = 3;
        gbc.gridy = gridy;
        add(gettestPanel(), gbc);

        gbc = new GridBagConstraints();
        gbc.gridx = 4;
        gbc.gridy = gridy;
        add(gettestPanel(), gbc);

        gbc = new GridBagConstraints();
        gbc.gridx = 5;
        gbc.gridy = gridy;
        add(gettestPanel(), gbc);

        gbc = new GridBagConstraints();
        gbc.gridx = 6;
        gbc.gridy = gridy;
        add(gettestPanel(), gbc);

        gbc = new GridBagConstraints();
        gbc.gridx = 7;
        gbc.gridy = gridy;
        add(gettestPanel(), gbc);

        gbc = new GridBagConstraints();
        gbc.gridx = 8;
        gbc.gridy = gridy;
        add(gettestPanel(), gbc);

        gbc = new GridBagConstraints();
        gbc.gridx = 9;
        gbc.gridy = gridy;
        JPanel p=gettestPanel();
        p.setBackground(Color.red);
        add(p, gbc);

        gbc = new GridBagConstraints();
        gbc.gridx = 10;
        gbc.gridy = gridy;
        add(gettestPanel(), gbc);
    }

    private void putBanner(int gridy) {
        gbc = new GridBagConstraints();
        gbc.gridx = 0;
        gbc.gridy = gridy;
        gbc.gridwidth = 1;
        add(gettestPanel(), gbc);

        gbc = new GridBagConstraints();
        gbc.gridx = 1;
        gbc.gridy = gridy;
        gbc.gridwidth = 9;
        add(getUserPanel(Color.black), gbc);
    }

    public static void main(String[] args) {
        JFrame frame = new JFrame("GridBagLayoutTest");
        frame.add(new test());
        frame.pack();
        frame.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
        frame.setLocationRelativeTo(null);
        frame.setVisible(true);
    }
}

Besides understanding this particular issue and its cause, i wish to understand this, wich comes directly from GridBagLayout Oracle docs:

weightx, weighty Specifying weights is an art that can have a significant impact on the appearance of the components a GridBagLayout controls. Weights are used to determine how to distribute space among columns (weightx) and among rows (weighty); this is important for specifying resizing behavior. Unless you specify at least one non-zero value for weightx or weighty, all the components clump together in the center of their container. This is because when the weight is 0.0 (the default), the GridBagLayout puts any extra space between its grid of cells and the edges of the container. Generally weights are specified with 0.0 and 1.0 as the extremes: the numbers in between are used as necessary. Larger numbers indicate that the component's row or column should get more space. For each column, the weight is related to the highest weightx specified for a component within that column, with each multicolumn component's weight being split somehow between the columns the component is in. Similarly, each row's weight is related to the highest weighty specified for a component within that row. Extra space tends to go toward the rightmost column and bottom row.

Expressions like

is an art

and

the numbers in between are used as necessary

really gives me the impression that not even the doc writer thought it was possible to teach the usage of such constraint. And that is no good

Answer 1

weightX and weighty are quite easy to use, but the tutorial doesn't help... Let's say that when you make a dialog and you pack() it, the components take a position and size and everything is ok (or not). What happens if you resize the dialog and make it bigger? Suddenly there's more space and the components must grow, and that's the moment when Swing looks the weight* parameters.

If a component has weightx=1.0 and the rest weightx=0.0 means that the first component gets all the new space and the second keeps its size. If the components have weightx=0.5 means that the two components share the new size, 50% each one. If the components have values for weightx that united are bigger than 1.0 means that the components want more than the 100% of the new space, so... well, something magic...

Imagine you are doing a web browser. you want that the top panels with the tabs, buttons and menus keep alwais the same size while the center panel for the web page get all the new extra size, so you give to the center panel weight*=1.0 and weight*=0.0 for the top panel.

Try to don't assign more than 1.0 weight in any row or column and everything will be ok.

Answer 2

the last column(red part of the flag) is detached from the rest of the flag(white part of the flag).

One thing to do when debugging a GridBagLayout is to add a Border to the components so you can see how each cell is sized. I added the following to your getTestPanel() method:

ol.setBorder( new LineBorder(Color.BLUE) );

You can see the panel is sized properly but there is extra space around the panel.

Then you look at your user panel:

ol.setPreferredSize(new Dimension(CELL_WIDTH * 10, CELL_HEIGHT));

And you will see the size is set to 10 cells even though you only set the gridwidth to 9 cells. So now the 9 cells must fit into the space of the user panel and it looks like the extra space is given to the last column of the 9 columns.

The code should be:

//ol.setPreferredSize(new Dimension(CELL_WIDTH * 10, CELL_HEIGHT));
ol.setPreferredSize(new Dimension(CELL_WIDTH * 9, CELL_HEIGHT));

Another option would be to NOT give a preferred size to the user panel, but then use the "fill" constraint so the user panel will now take up the same space as the nine columns.

weightx, weighty Specifying weights is an art...

This is not related to your problem. To see this effect, drag the frame larger. Now all the entire panel will be positioned in the center of the frame since none of your component use the weightx/weighty constraints. This means none of the components will grow to fill the empty space if the frame.

If one of the components has a weightx constraint of 1.0 then that column will expand and fill the extra space as the frame is resized.

Answer 3

I think what you are trying to achieve, is something like this:

import java.awt.Color;
import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;

import javax.swing.JFrame;
import javax.swing.JPanel;

public class Test extends JPanel {

    private static final long serialVersionUID = 1L;

    public Test() {
        setLayout(new GridBagLayout());
        putBanner(0);
        putFlagRow(1);
    }

    public JPanel getUserPanel(Color c) {
        JPanel panel = new JPanel();
        panel.setBackground(c);
        return panel;
    }

    private void putFlagRow(int gridy) {
        GridBagConstraints gbc = new GridBagConstraints();
        gbc.gridx = 0;
        gbc.gridy = gridy;
        gbc.fill = GridBagConstraints.BOTH;
        gbc.weightx = 0.5;
        gbc.weighty = 1;
        add(getUserPanel(Color.green), gbc);

        gbc = new GridBagConstraints();
        gbc.gridx = 1;
        gbc.gridy = gridy;
        gbc.fill = GridBagConstraints.BOTH;
        gbc.weightx = 1;
        gbc.weighty = 1;
        add(getUserPanel(Color.white), gbc);

        gbc = new GridBagConstraints();
        gbc.gridx = 2;
        gbc.gridy = gridy;
        gbc.fill = GridBagConstraints.BOTH;
        gbc.weightx = 0.5;
        gbc.weighty = 1;
        add(getUserPanel(Color.red), gbc);
    }

    private void putBanner(int gridy) {
        GridBagConstraints gbc = new GridBagConstraints();
        gbc.gridx = 0;
        gbc.gridy = gridy;
        gbc.ipady = 50;
        gbc.fill = GridBagConstraints.BOTH;
        add(getUserPanel(Color.white), gbc);

        gbc = new GridBagConstraints();
        gbc.gridx = 1;
        gbc.gridy = gridy;
        gbc.gridwidth = 2;
        gbc.fill = GridBagConstraints.BOTH;
        gbc.weightx = 1;
        add(getUserPanel(Color.black), gbc);
    }

    public static void main(String[] args) {
        JFrame frame = new JFrame("GridBagLayoutTest");
        frame.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
        frame.setContentPane(new Test());
        frame.setSize(450, 300);
        frame.setLocationRelativeTo(null);
        frame.setVisible(true);
    }
}

The GridBagLayout is a very complex and powerful way to align your content, its not that easy to explain it in two sentences, so the easiest way, I think, is to play around or watch some Tutorials, but I'll try:
You have to think like you are editing an Excel table. If you resize one cells width, the whole column will have this width, same for the rows/height. So now you do not have to add tones of white planes, you only need one and resize it properly.
Next thing is not to set fixed sizes, the layouts will do it for you, that's what they are for or use absolute coordinates (no layout: setLayout(null) ).
So now you have to tell the GridBagLayout how to align the components. There are different variables for different alignments. First of all (you should already know) gridx and gridy hold the position of the component (in Excel something like A1 or C12). Than you can 'combine cells' with gridwidth and gridheight .
So now your component is positioned, but it would not change its size with the window's size. Until know the cell has only the size of its component's getPreferredSize() . weightx and weighty are the next variables to look at. Those define how much of the leftover space should be used. For example you have two components (horizontally side by side) and their preferred width summed is 300px, but the window has a width of 1000px, 700px wouldn't be used. So if you now set both weightx to 1, they trying to use hundred percent of leftover pixels, but they can not have both 700px additionally, so everyone receives 350px. If you now set one weightx to 0 and the other one to 1, the first gets no additionally pixels and the other all 700px.
If you tried it until now, you will see much empty spaces between the panels, thats because only the cells are resized, but not their content. Now you can set were the component should be displayed in its cell with anchor (for example GridBagConstraints.NORTH / SOUTH / SOUTHEAST ), but then you still have those empty spaces and no flag has an empty space, what your looking for is fill .
fill lets you chose, what to do with the empty space in the cell. With GridBagConstraints.NONE the component would not be resized, HORIZONTAL only resizes the width to the width of the cell ( VERTICAL only the height) and BOTH resize the component to fit the cells size.
The variable insets adds empty insets, for example you chose to set fill to BOTH , but sill want to have empty space above the component (the inset is fixed, if you want a dynamic inset, you have to workaround by adding empty components with the specific GridBagConstraints to align the inset you want to display).
ipadx and ipady are fixed values to be added to the size of the cell, for example ipadx is set to 5, the cell will have at least the width of the component's minimum width plus ipadx 's 5px. In other words the width of the cell will always be at least 5px bigger than the component's width (if fill is set to BOTH or HORIZONTAL the component would afterwards be resized to the new width).