Layouts swing java

Question

I want to create a layout like this

i want like this

This was my code (does not work):

outer.setLayout(new BorderLayout());

panel1 = new JPanel();
...
outer.add(panel1, BorderLayout.PAGE_START);
outer.add(panel2, BorderLayout.LINE_START); 
outer.add(panel3, BorderLayout.CENTER); 
outer.add(panel4, BorderLayout.LINE_END); 
outer.add(panel5, BorderLayout.PAGE_END);

note: panel5 above should contain 2 more panels inside it

In the above code, I can get them on the correct places but the center one (panel3) is very big so that all others are squashed to the side.

How can i get some ratio of size in these eg 2:10:2 etc?

Should i change my layout?

Looks like a `BorderLayout` with a `GridLayout(1, 0)` at `PAGE_END`. What's the preferred size of the panels outside the `CENTER`? — Catalina Island, Aug 22 '17 at 10:31
It's probably best you start using a GridBagLayout. It takes some time getting used to, but you will be able to do what you want with it. — daniu, Aug 22 '17 at 11:08
We've established *"some ratio of size in these eg 2:10:2"* and that **all 3** panels will be custom painted. But what should happened to the graphic elements drawn in the panel(s) is space (width or height) becomes less or more? For example, when becoming thinner, should the graphics become thinner but retain the same height (changing the aspect ratio)? I suspect the best way to achieve this is to use just **one** panel and divide up the space 2:10:2 when painting, but the answer to my question might suggest a different approach. Note that a programmer would need to jump through some hoops .. — Andrew Thompson, Aug 22 '17 at 11:36
.. to get a **layout** to assign space according to ratios of the available space. — Andrew Thompson, Aug 22 '17 at 11:37
@AndrewThompson This is for a chess game. The middle big area is for the board. The yellow/green areas are the black/yellow pieces and the bottom two areas are for the dead pieces for both players. — Jhoy, Aug 22 '17 at 11:42
When the screen is resized, the elements should also change size, eg the board tiles should get bigger. note: the pieces should always be a square i.e they should mantain aspect ratio — Jhoy, Aug 22 '17 at 11:43
*"This is for a chess game."* Aha! Speaking of which, see also [Making a robust, resizable Swing Chess GUI](http://stackoverflow.com/q/21142686/418556). It does not work quite as you describe, and does not use *any* custom painting, but does 'jump though some hoops' to make sure the board remains square while being as large as it can to fill the available width or height. — Andrew Thompson, Aug 22 '17 at 11:48
yeah @AndrewThompson thanks for sharing that, i know this sucks but it is for a swing assignment so i have to do it like this.... :-( :-( — Jhoy, Aug 22 '17 at 12:01
In that case, you might use the tricks I used for the chess board (querying the parent size in order to alter its own preferred size) but apply that same trick (OK ..hack) to all three panels that need a 2:10:2 ratio. Also, give whoever set that requirement a biff up the side of the head, it is neither logical nor productive. — Andrew Thompson, Aug 22 '17 at 12:23
@ okay cool. but in that example the board cells do not resize... how to get that? — Jhoy, Aug 22 '17 at 13:02
@Jhoy Can you elaborate on the ratio reqirement of 2:10:2? Which are 2 and which is 10? Do you need to be able to resize your JFrame? — user3437460, Aug 23 '17 at 13:19

score 1 · Answer 1 · answered Aug 22 '17 at 10:36

If you want to do something like that, using BorderLayout is a good start. So yes I would use BorderLayout as well here.

However you should change they way you are adding the panels:

outer.add(panel1, BorderLayout.NORTH);
outer.add(panel2, BorderLayout.WEST);
outer.add(panel3, BorderLayout.CENTER);
outer.add(panel4, BorderLayout.EAST);
//Create a additional Panel for the two at the bottom
JPanel southPanelContainer = new JPanel(new BorderLayout());
southPanelContainer.add(panel5, BorderLayout.EAST);
southPanelContainer.add(panel6, BorderLayout.WEST);
outer.add(southPanelContainer, BorderLayout.SOUTH);

This should already look somewhat decent, however if you still want to change the way it looks then you should add some components to those panels. The layout manager will automatically resize the panels so everything fits.

the problem is that i do not want to add anything else to these panels1-5. i want to draw on them.... so all of these are really small :-( — Jhoy, Aug 22 '17 at 11:26
Then you should probably use the Netbeans GUI Builder or what ever it is called right now. — Alexander Heim, Aug 22 '17 at 14:24

Joop Eggen · Answer 2 · 2017-08-22T12:55:29.163

Use a GridBagLayout for a table/matrix like layout, where some "cells" occupy more than one slot. BorderLayout is for one central panel having some bordering panels around.

public MainFrame() {
    JPanel outer = new JPanel(new GridBagLayout());
    outer.setPreferredSize(new Dimension(800, 600));

    JPanel panel1 = createPanel("1");
    JPanel panel2 = createPanel("2");
    JPanel panel3 = createPanel("3");
    JPanel panel4 = createPanel("4");
    JPanel panel5 = createPanel("5");

    GridBagConstraints c = new GridBagConstraints();
    c.fill = GridBagConstraints.BOTH;
    c.weightx = 1.0;
    c.weighty = 1.0;
    c.gridx = 0;
    c.gridy = 0;
    c.gridwidth = 3; // col span
    c.gridheight = 1;
    outer.add(panel1, c);

    c.weightx = 0.33;
    c.gridx = 0;
    c.gridy = 1;
    c.gridwidth = 1;
    c.gridheight = 1;
    outer.add(panel2, c);

    c.weightx = 0.33;
    c.gridx = 1;
    c.gridy = 1;
    c.gridwidth = 1;
    c.gridheight = 1;
    outer.add(panel2, c);

    c.weightx = 0.33;
    c.gridx = 2;
    c.gridy = 1;
    c.gridwidth = 1;
    c.gridheight = 1;
    outer.add(panel3, c);

    c.weightx = 0.33;
    c.gridx = 3;
    c.gridy = 1;
    c.gridwidth = 3;
    c.gridheight = 1;
    outer.add(panel4, c);

    c.weightx = 1.0;
    c.weighty = 1.0;
    c.gridx = 0;
    c.gridy = 2;
    c.gridwidth = 3;
    c.gridheight = 1;
    outer.add(panel5, c);

    setContentPane(outer);
    pack();
}

private JPanel createPanel(String title) {
    JPanel panel = new JPanel();
    panel.setBorder(BorderFactory.createTitledBorder(title));
    setPreferredSize(new Dimension(300, 300));
    return panel;
}

There is a GridBagConstraints constructor setting all fields. Not so readable here however.

It is also a quite error prone layout.

I tried it out myself; corrected a bit. Indeed not the easiest layout. I would almost recommend NetBeans with its layout editor and its free layout. — Joop Eggen, Aug 22 '17 at 12:57

Layouts swing java

2 Answers2