Making GridBagLayout looks like in pattern

StackOverflow https://stackoverflow.com/questions/20735196

Question

I want to do something like this:

pattern

Here is my code:

public class MainFrame extends JFrame{

public MainFrame(){
    super("Symulator Lotow");

    JPanel returnPanel = new JPanel(new GridBagLayout());
    add(returnPanel);
    Vector<JButton> v = new Vector<JButton>();
    int licznik = 0;

    GridBagConstraints c = new GridBagConstraints();
    c.fill = GridBagConstraints.BOTH;
    c.ipadx = 0; c.ipady = 0;
    c.insets = new Insets(0,0,0,0);
    c.weightx = 1.0;
    c.weighty = 1.0;
    c.anchor = GridBagConstraints.CENTER;

    v.add(new JButton());
    c.gridwidth = 6;
    c.gridheight = 6;
    c.gridx = 0;
    c.gridy = 0;
    v.get(licznik).setBackground(Color.black);
    returnPanel.add(v.get(licznik),c);
    licznik++;

    v.add(new JButton());
    c.gridwidth = 6;
    c.gridheight = 4;
    c.gridx = 6;
    c.gridy = 0;
    v.get(licznik).setBackground(Color.white);
    returnPanel.add(v.get(licznik),c);
    licznik++;

    v.add(new JButton());
    c.gridwidth = 3;
    c.gridheight = 2;
    c.gridx = 6;
    c.gridy = 4;
    v.get(licznik).setBackground(Color.blue);
    returnPanel.add(v.get(licznik),c);
    licznik++;

    v.add(new JButton());
    c.gridwidth = 3;
    c.gridheight = 2;
    c.gridx = 9;
    c.gridy = 4;
    v.get(licznik).setBackground(Color.yellow);
    returnPanel.add(v.get(licznik),c);
    licznik++;

    v.add(new JButton());
    c.gridwidth = 6;
    c.gridheight = 2;
    c.gridx = 0;
    c.gridy = 6;
    v.get(licznik).setBackground(Color.yellow);
    returnPanel.add(v.get(licznik),c);
    licznik++;

    v.add(new JButton());
    c.gridwidth = 6;
    c.gridheight = 2;
    c.gridx = 6;
    c.gridy = 6;
    v.get(licznik).setBackground(Color.yellow);
    returnPanel.add(v.get(licznik),c);
    licznik++;

    v.add(new JButton());
    c.gridwidth = 4;
    c.gridheight = 2;
    c.gridx = 0;
    c.gridy = 8;
    v.get(licznik).setBackground(Color.red);
    returnPanel.add(v.get(licznik),c);
    licznik++;

    v.add(new JButton());
    c.gridwidth = 4;
    c.gridheight = 2;
    c.gridx = 4;
    c.gridy = 8;
    v.get(licznik).setBackground(Color.red);
    returnPanel.add(v.get(licznik),c);
    licznik++;

    v.add(new JButton());
    c.gridwidth = 4;
    c.gridheight = 2;
    c.gridx = 8;
    c.gridy = 8;
    v.get(licznik).setBackground(Color.red);
    returnPanel.add(v.get(licznik),c);
    licznik++;


    this.setExtendedState(JFrame.MAXIMIZED_BOTH);

    this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);        

    this.setVisible(true);
    this.setResizable(true);
}
public static void main(String[] args) {
    // TODO Auto-generated method stub
    new MainFrame();
}
}

As can be seen when my code is run, it doesn't look like in the pattern. The colors are just samples, so I don't care about them. I just want the relative sizes of buttons to be correct. Where is my mistake?

Was it helpful?

Solution

You could use the Relative Layout.

You will need to nest panels to get your desired result but the benefit of this layout is that all calculations are done based on the space available, not on the preferred size of the component. So all components will stay in the same relative size as the frame size is changed.

For example:

import java.awt.*;
import java.util.*;
import javax.swing.*;

public class MainFrame3 extends JFrame{

    public MainFrame3(){
        super("Symulator Lotow");

        JButton button = null;
        RelativeLayout layout = new RelativeLayout(RelativeLayout.Y_AXIS);
        layout.setFill(true);
        JPanel returnPanel = new JPanel( layout );
        add(returnPanel);

        // top

        layout = new RelativeLayout(RelativeLayout.X_AXIS);
        layout.setFill(true);
        JPanel top = new JPanel( layout );
        returnPanel.add(top, new Float(6));

        button = new JButton();
        button.setBackground(Color.black);
        top.add(button, new Float(6));

        layout = new RelativeLayout(RelativeLayout.Y_AXIS);
        layout.setFill(true);
        JPanel topRight = new JPanel( layout );
        top.add(topRight, new Float(6));

        button = new JButton();
        button.setBackground(Color.white);
        topRight.add(button, new Float(4));

        layout = new RelativeLayout(RelativeLayout.X_AXIS);
        layout.setFill(true);
        JPanel rightBottom = new JPanel( layout );
        topRight.add(rightBottom, new Float(2));

        button = new JButton();
        button.setBackground(Color.blue);
        rightBottom.add(button, new Float(3));

        button = new JButton();
        button.setBackground(Color.blue);
        rightBottom.add(button, new Float(3));

        // middle

        layout = new RelativeLayout(RelativeLayout.X_AXIS);
        layout.setFill(true);
        JPanel middle = new JPanel( layout );
        returnPanel.add(middle, new Float(2));

        button = new JButton();
        button.setBackground(Color.yellow);
        middle.add(button, new Float(6));

        button = new JButton();
        button.setBackground(Color.yellow);
        middle.add(button, new Float(6));

        // bottom

        layout = new RelativeLayout(RelativeLayout.X_AXIS);
        layout.setFill(true);
        JPanel bottom = new JPanel( layout );
        returnPanel.add(bottom, new Float(2));

        button = new JButton();
        button.setBackground(Color.red);
        bottom.add(button, new Float(4));

        button = new JButton();
        button.setBackground(Color.red);
        bottom.add(button, new Float(4));

        button = new JButton();
        button.setBackground(Color.red);
        bottom.add(button, new Float(4));

        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setSize(600, 500);
        this.setVisible(true);
    }
    public static void main(String[] args) {
        // TODO Auto-generated method stub
        new MainFrame3();
    }
}

OTHER TIPS

You do not need to make your gridWidth and gridHeight large numbers. The relative width and height are handled better with the weightX and weightY fields.

public class MainFrame extends JFrame{

    public MainFrame(){
        super("Symulator Lotow");

        JPanel returnPanel = new JPanel(new GridBagLayout());
        add(returnPanel);
        Vector<JButton> v = new Vector<JButton>();
        int licznik = 0;

        GridBagConstraints c = new GridBagConstraints();
        c.fill = GridBagConstraints.BOTH;
        c.ipadx = 0; c.ipady = 0;
        c.insets = new Insets(0,0,0,0);
        c.anchor = GridBagConstraints.CENTER;

        v.add(new JButton());
        c.gridwidth = 2;
        c.gridheight = 2;
        c.weightx = 6.0;
        c.weighty = 6.0;
        c.gridx = 0;
        c.gridy = 0;
        v.get(licznik).setBackground(Color.black);
        returnPanel.add(v.get(licznik),c);
        licznik++;

        v.add(new JButton());
        c.gridwidth = 3;
        c.gridheight = 1;
        c.weightx = 6.0;
        c.weighty = 4.0;
        c.gridx = 2;
        c.gridy = 0;
        v.get(licznik).setBackground(Color.white);
        returnPanel.add(v.get(licznik),c);
        licznik++;

        v.add(new JButton());
        c.gridwidth = 2;
        c.gridheight = 1;
        c.weightx = 3.0;
        c.weighty = 2.0;
        c.gridx = 2;
        c.gridy = 1;
        v.get(licznik).setBackground(Color.blue);
        returnPanel.add(v.get(licznik),c);
        licznik++;

        v.add(new JButton());
        c.gridwidth = 1;
        c.gridheight = 1;
        c.weightx = 3.0;
        c.weighty = 2.0;
        c.gridx = 4;
        c.gridy = 1;
        v.get(licznik).setBackground(Color.yellow);
        returnPanel.add(v.get(licznik),c);
        licznik++;

        v.add(new JButton());
        c.gridwidth = 2;
        c.gridheight = 1;
        c.weightx = 6.0;
        c.weighty = 2.0;
        c.gridx = 0;
        c.gridy = 2;
        v.get(licznik).setBackground(Color.yellow);
        returnPanel.add(v.get(licznik),c);
        licznik++;

        v.add(new JButton());
        c.gridwidth = 3;
        c.gridheight = 1;
        c.weightx = 6.0;
        c.weighty = 2.0;
        c.gridx = 2;
        c.gridy = 2;
        v.get(licznik).setBackground(Color.yellow);
        returnPanel.add(v.get(licznik),c);
        licznik++;

        v.add(new JButton());
        c.gridwidth = 1;
        c.gridheight = 1;
        c.weightx = 4.0;
        c.weighty = 2.0;
        c.gridx = 0;
        c.gridy = 3;
        v.get(licznik).setBackground(Color.red);
        returnPanel.add(v.get(licznik),c);
        licznik++;

        v.add(new JButton());
        c.gridwidth = 2;
        c.gridheight = 1;
        c.weightx = 4.0;
        c.weighty = 2.0;
        c.gridx = 1;
        c.gridy = 3;
        v.get(licznik).setBackground(Color.red);
        returnPanel.add(v.get(licznik),c);
        licznik++;

        v.add(new JButton());
        c.gridwidth = 2;
        c.gridheight = 1;
        c.weightx = 4.0;
        c.weighty = 2.0;
        c.gridx = 3;
        c.gridy = 3;
        v.get(licznik).setBackground(Color.red);
        returnPanel.add(v.get(licznik),c);
        licznik++;


        this.setExtendedState(JFrame.MAXIMIZED_BOTH);

        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);        

        this.setVisible(true);
        this.setResizable(true);
    }
    public static void main(String[] args) {
        // TODO Auto-generated method stub
        new MainFrame();
    }
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top