Java GridBagConstraints

Question

I have 5 components in a JPanel. Everything is looking smooth with the first 4 component's I've added. However, when I try adding a 5th component to the JPanel, the spacing between the components change for whatever reason!

Without 5th component:

First Name: [..............]

Last Name: [..............]

With:

First Name:---------------- [.............]

Last Name:----------------- [.............]

What is your favorite sport:

Pretend the dashes above between label and textfield is space

The spacing between the labels and textfield change! Here is my code, please help me!

    public static void main(String[] args)
{
    JFrame frame = new JFrame("Survey");
    frame.setSize(800, 600);
    frame.setLayout(new FlowLayout(FlowLayout.CENTER));
    frame.setVisible(true);
    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

    JPanel p1 = new JPanel(new GridBagLayout());
    //LINE.START = Top Left Corner
    frame.add(p1);

    GridBagConstraints gbc = new GridBagConstraints();
    gbc.insets = new Insets(5, 5, 10, 10);

    JLabel lblFirstN = new JLabel("First Name:");
    JLabel lblLastN = new JLabel("Last Name:");
    JLabel lblFavSport = new JLabel("What is your favorite sport:");

    JTextField txtFirstN = new JTextField();
    txtFirstN.setPreferredSize(new Dimension(100, 20));

    JTextField txtLastN = new JTextField();
    txtLastN.setPreferredSize(new Dimension(100, 20));

    gbc.gridx = 0;
    gbc.gridy = 0;
    p1.add(lblFirstN, gbc);

    gbc.gridx = 1;
    gbc.gridy = 0;
    p1.add(txtFirstN, gbc);

    gbc.gridx = 0;
    gbc.gridy = 1;
    p1.add(lblLastN, gbc);

    gbc.gridx = 1;
    gbc.gridy = 1;
    p1.add(txtLastN, gbc);

    //this block of code is what is screwing me
    gbc.gridx = 0;
    gbc.gridy = 2;
    p1.add(lblFavSport, gbc);
}

Answer 1

The reason your getting this output is because, that's the way the layout manager is designed.

GridBagLayout is a (virtual) extension of the GridLayout. In the fact that it lays it's components out in a grid, but is far more flexible then the GridLayout. It is the closes you will get to something like a HTML table in the included layout managers.

Lets take closer look. The following code...

GridBagConstraints gbc = new GridBagConstraints();
gbc.gridx = 0;
gbc.gridy = 0;
gbc.anchor = GridBagConstraints.WEST;
add(new JLabel("First Name"), gbc);
gbc.gridy++;
add(new JLabel("Last Name"), gbc);

gbc.gridx = 1;
gbc.gridy = 0;
add(new JTextField(15), gbc);
gbc.gridy++;
add(new JTextField(15), gbc);

Generates

Clearly, you can see the rows and columns. Each row has the same height and each column has the same width...

Now, if we add the next label and field...

GridBagConstraints gbc = new GridBagConstraints();
gbc.gridx = 0;
gbc.gridy = 0;
gbc.anchor = GridBagConstraints.WEST;
add(new JLabel("First Name"), gbc);
gbc.gridy++;
add(new JLabel("Last Name"), gbc);
gbc.gridy++;
add(new JLabel("What is your favorite sport:"), gbc);

gbc.gridx = 1;
gbc.gridy = 0;
add(new JTextField(15), gbc);
gbc.gridy++;
add(new JTextField(15), gbc);
gbc.gridy++;
add(new JTextField(15), gbc);

And here is your current problem...

You can see that the first column's width has increased to accommodate the new label...

Now we can fix this by using gridWidth...

GridBagConstraints gbc = new GridBagConstraints();
gbc.gridx = 0;
gbc.gridy = 0;
gbc.anchor = GridBagConstraints.WEST;
add(new JLabel("First Name"), gbc);
gbc.gridy++;
add(new JLabel("Last Name"), gbc);
gbc.gridy++;
gbc.gridwidth = 2;
add(new JLabel("What is your favorite sport:"), gbc);

gbc.gridwidth = 1;
gbc.gridx = 1;
gbc.gridy = 0;
add(new JTextField(15), gbc);
gbc.gridy++;
add(new JTextField(15), gbc);
gbc.gridx = 2;
gbc.gridy++;
add(new JTextField(15), gbc);

nb: The last fields gridx position has had to be increased, other wise it would actually sit over the label!

Now, that's better, but, I don't think that's quite what you want :P

We need to adjust the first two fields to span into the next cell as well...

GridBagConstraints gbc = new GridBagConstraints();
gbc.gridx = 0;
gbc.gridy = 0;
gbc.anchor = GridBagConstraints.WEST;
add(new JLabel("First Name"), gbc);
gbc.gridy++;
add(new JLabel("Last Name"), gbc);
gbc.gridy++;
gbc.gridwidth = 2;
add(new JLabel("What is your favorite sport:"), gbc);

gbc.gridwidth = 2;
gbc.gridx = 1;
gbc.gridy = 0;
add(new JTextField(15), gbc);
gbc.gridy++;
add(new JTextField(15), gbc);
gbc.gridx = 2;
gbc.gridy++;
add(new JTextField(15), gbc);

Finally :P - Simple as pie :D

You may want to take a closer look at How to use GridBagLayout for more details...

Answer 2

The reason that the last JLabel is not aligned with the previous 2 is that all labels are center aligned and appear in the same column. When there are only 2 labels, they appear aligned due to the happy coincidence that their FontMetric widths are equal. Add a third and the labels appear staggered.

To fix, you can anchor the labels to counter this effect by anchoring the components to GridBagConstraints.WEST and set the weight along the x axis:

gbc.weightx = 1;
gbc.anchor = GridBagConstraints.WEST;

This has the effect of left aligning component within their GridBagLayout "cells".