Java LayoutManagers with JPanels

Question

I'm really struggling with creating a complicated layout. Here is a picture of what I want in the end:
_{(source: fbcdn.net)}

I've attempted to divide and conquer, creating small panels and putting those in other panels. At first I figured a borderlayout for the main container panel which is in the initial JFrame, with a bunch of GridBagLayouts for the details in those panes. When that wasn't working, I figured I would try my hand at an all out GridBagLayout. Right now my goal is to get the top group of character and location panels/cards to be displayed in their correct aspect ratio (about 4:3) and have them resize correctly (maintaining aspect ratio as best as possible) as the window is resized. What I am getting is a super small square panel for each card when the window first comes up. I want them to start in the aspect ratio (4:3) to begin with.

Am I going about this correctly?

Should I stick with all GridBagLayouts?

If not, what combinations of layouts do you see that may work?

Lastly and probably most importantly, how come they do not start out with the correct gridwidth or gridheight?

It would be nice if all the cards maintained a 4:3 or 3:4 aspect ratio when the window is near a 4:3.

public class OverPower {    
    public static void main(String[] args) {        
        JFrame table = new JFrame();
        table.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        table.setLayout(new BorderLayout());

        JPanel contentPane = new OppCharsPanel();
        table.setContentPane(contentPane);
        table.setLocationByPlatform(true);

        table.pack();
        table.setLocationRelativeTo(null);
        table.setVisible(true);
    }       
}

public class OppCharsPanel extends JPanel {
    public OppCharsPanel() {
        setLayout(new GridBagLayout());
        GridBagConstraints gbc = new GridBagConstraints();
        gbc.insets = new Insets(20, 15, 20, 15);
        gbc.fill = GridBagConstraints.BOTH;
        gbc.gridwidth = 4;
        gbc.gridheight = 3;
        gbc.weightx = 4.0;
        gbc.weighty = 3.0;

        //back row
        gbc.gridx = 4;
        gbc.gridy = 0;
        JPanel oppHomebase = new JPanel();
        oppHomebase.setBackground(Color.RED);
        this.add(oppHomebase, gbc);

        gbc.gridx = 8;
        gbc.gridy = 0;
        JPanel oppReserve = new JPanel();
        oppReserve.setBackground(Color.RED);
        this.add(oppReserve, gbc);


        //front row
        gbc.gridx = 0;
        gbc.gridy = 3;
        JPanel oppBattlesite = new JPanel();
        oppBattlesite.setBackground(Color.RED);
        this.add(oppBattlesite, gbc);

        gbc.gridx = 4;
        gbc.gridy = 3;
        JPanel oppChar1 = new JPanel();
        oppChar1.setBackground(Color.RED);
        this.add(oppChar1, gbc);

        gbc.gridx = 8;
        gbc.gridy = 3;
        JPanel oppChar2 = new JPanel();
        oppChar2.setBackground(Color.RED);
        this.add(oppChar2, gbc);

        gbc.gridx = 12;
        gbc.gridy = 3;
        JPanel oppChar3 = new JPanel();
        oppChar3.setBackground(Color.RED);
        this.add(oppChar3, gbc);
    }
}

I think your idea of starting out with separate components was the right start, but utilise the GridBagLayout for laying out the sub components — MadProgrammer, Jan 03 '15 at 01:19
@MadProgrammer isn't that what I am doing in my submitted code?? — codenaugh, Jan 03 '15 at 01:23
Sure, but break it down, you have 4 main containers, within those, two of the, have three sub containers, and then you have the actual content, look at each layer in turn and focus on these requirements individually — MadProgrammer, Jan 03 '15 at 01:26
@MadProgrammer hmm not following... I have a frame with a contentPane that contains a panel that contains 6 panels. I'm wondering why when I run it, I just get 6 very tiny boxes. I'll try to eliminate the panels within panels to see if the most subpanel is working as desired. — codenaugh, Jan 03 '15 at 01:31
@MadProgrammer it does appear to be something in my OppCharsPanel, as just setting the contentPane to be that panel which contains 6 panels for the cards does not start out as desired. — codenaugh, Jan 03 '15 at 01:34

score 4 · Accepted Answer · edited Jun 20 '20 at 09:12

4

Start by breaking down each layout section into it's individual requirements and focus on those needs, for example...

Area #1

enter image description here

Okay, so basically, this has three main components (each coloured section is it's own panel), which could be used with a BorderLayout

Area #2

enter image description here

So here, you have another three areas/panels, because of the different requirements for vertical space, I might be tempted to use a GridBagLayout, this would allow you to define more space to the two top components then the bottom one...

Area #3

enter image description here

So, again three main areas. Here I'd be tempted to use a BorderLayout again. For the indivdual containers, I might use a GridBagLayout or Rob Camick's WrapLayout (for laying out the images within each of the three areas)

Scaling

Don't worry about the layout manager trying to maintain the aspect ratio, give enough information to the layout manager so that it make better choices, overriding the getPreferredSize and getMinimumSize methods of the image components and providing appropriate sizing hints. Within these image components, I would make sure that the image is scaled to the proper aspect ratio and rendered correctly

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 03 '15 at 01:46

MadProgrammer

343,457
22
230
366

This is a wonderful visual representation of breaking it down and is what I had in mind. Thank you. I have not put any images in the program as of yet because I wanted to just get the placement of the cards correct. You are saying to just press on when I have the placements correct and address the resizing when I have actual images placed in those placements, right? – codenaugh Jan 03 '15 at 01:52
1

Yep, the layout manager may make the components square for example, let the actual component itself then render the image within that space – MadProgrammer Jan 03 '15 at 01:56
okay last question then. Does this seem like a good way to do a card game like this... i.e. Layout the locations where cards can go and then create and place them down at those locations as necessary? – codenaugh Jan 03 '15 at 01:58
Basically they are one in the same thing. The card is likely some kind of component, which can be laid out within a container, you then use the know factors (width/height) of the card/component to determine how best to display the image. For [example](http://stackoverflow.com/questions/11959758/java-maintaining-aspect-ratio-of-jpanel-background-image/11959928#11959928) and [example](http://stackoverflow.com/questions/14548808/scale-the-imageicon-automatically-to-label-size/14553003#14553003) – MadProgrammer Jan 03 '15 at 02:00
I just figured that if the panel resized correctly with the window then I could create and place new cards pretty easily (FILLing a new panel's background image and dropping it on the grid), thereby letting the layout do all the work of figuring out what exactly size to make the image. Is that basically what will happen? I guess I'll cross that bridge when I get there. – codenaugh Jan 03 '15 at 02:12
Well, the components will be resized the way that the layout manager wants, you then need to work within that constraint – MadProgrammer Jan 03 '15 at 02:15

Java LayoutManagers with JPanels

1 Answers1

Area #1

Area #2

Area #3

Scaling