Building with a Layout Manager

Now that we’ve looked at some basic Layout Manager options, lets dive into building one.

We’re going to work in the GUI that we’ve been building, first in Extending the JFrame Class, and then when we added JComboBoxes and JList to our project.

Here we’re going to combine and use a couple of different layouts to get the desired effect, partially by placing panels and applying them.

We’re going to use the GridBagLayout. This layout offers some advantages over the GridLayout, namely that each element doesn’t have to be the same size. However, it is a little more difficult to use, as we have to control how many elements, and where they go.

Setting Up the GridBagLayout and GridBagConstraint

We’re going to first remove the null from our layout manager, and add GridBagLayout, along with adding a GridBagConstraints object to help us position our elements.

        this.setLayout(new GridBagLayout());
        GridBagConstraints c = new GridBagConstraints();
        c.fill = GridBagConstraints.HORIZONTAL;

Now I’ve put this code toward the top, right after where I configure other elements for my form, such as the title.

The fill property tells Java to fill in which direction if the field is too small for the grid section. In this case, we want all of the elements to be the same width;

The constraints object, c, is going to have many direct members we can set. So for example, if I want to put something in row 1, column 1, (remember Java is a zero based language) I’m going to need to set the current position, and then pass that constraint object to the add method.

        c.gridx = 0;
        c.gridy = 0;
        this.add(firstLabel,c);

        c.gridx = 1;
        c.gridy = 0;
        this.add(first,c);

When I want to move to row two,

        c.gridx = 0;
        c.gridy = 1;
        this.add(lastLabel,c);

        c.gridx = 1;
        c.gridy = 1;
        this.add(last,c);

I’ll continue doing this down until I get to my allStudents object, which is my JList object. A Label and the Data Component back and forth.

For the allStudents JList, we didn’t have a label, but that’s OK. I do have to warn however, if you treat it like another element, Java will do just. However, the element on the row next to you, will have a lot of space around it. So instead, we need to set another constraints variable, the gridheight. Since we’re going to have three buttons next to it, we’re going to give gridheight a value of 3.

        c.gridx = 0;
        c.gridy = 3;
        c.gridheight = 3;
        this.add(allStudents,c);

Reset the gridheight down to 1, and add the buttons.

If you run the code, you can see how well it looks. Everything is well positioned, and you can resize the window, and things stay in the same relative position.

Removing Old Code

The GridBag Layout will automatically position and size our elements, along with some help from the Constraints object. Therefore we can remove any of the setBounds and setSize code, as it will be ignored and overriden by the layout and constraints.

Configuring GridBagConstraints

We can configure out constraint object to make the UI a little nice.

First we’re going to add some spacing between each of the grid cells. This will limit the chances of the elements being accidentally clicked incorrectly.

c.insets = new Insets(5,5,5,5);

I just gave it a little bit of spacing to make it easier to use, 5 pixels on each side.

You can all apply internal padding if you’d like.

        c.ipady = 5;
        c.ipadx = 5;

This is inside of the elements, so you are not so close to the border. I find a small amount of internal padding goes a long way.

While I choose to keep these consistent on all elements, you can also modify them for each element before you add them to the main panel.

Adding Panes

Additionally, you can always add panes of content using a JPanel, and position those as you might need. This would give you more and finer control over the layout and positioning if you were to need it, especially since you can define where on the main panel you want to place elements, such as centered, to a side, or along the top or bottom, even if there isn’t extra content.

Of course, using a Border Layout may also work if you want to have headers and footers, and then put an internal pane for the regular content.

Building with a Layout Manager was originally found on Access 2 Learn