Swing - positioning some JButtons

Question

I'm trying to make a little game with JButton objects. My problem is, when I add buttons to my panel, they don't position where I need them. To be more clear.

This is the Image I have :

Here's my code :

My main class which extends JFrame adds a new Board1 which extends JPanel

public class Main2 extends JFrame {

 public Main2() {
    setVisible(true);
    setSize(500, 500);
    add(new Board1());
    setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    setLocationRelativeTo(null);
    setTitle("Zombicide");
    setResizable(false);
 }

 public static void main(String[] args) {
    new Main2();
 }
}

My Board class which extends JPanel and adds some Zone objects which extend JButton.

public class Board1 extends JPanel implements Board {

private List<Zone> zones = new ArrayList<Zone>();

  public Board1() {
    zones.add(new Zone(1, false, true, null, "/zone1D1C.jpg", 0, 0, this));
    zones.add(new Zone(2, false, false, null, "/zone2D1C.jpg", 150, 0, this));
    zones.add(new Zone(3, false, false, null, "/zone3D1C.jpg", 300, 0, this));
    zones.add(new Zone(4, true, false, null, "/zone4D1C.jpg", 0, 150, this));
    zones.add(new Zone(5, false, false, null, "/zone5D1C.jpg", 300, 150, this));
    zones.add(new Zone(6, true, false, null, "/zone6D1C.jpg", 0, 300, this));
    zones.add(new Zone(7, true, false, null, "/zone7D1C.jpg", 150, 300, this));
    zones.add(new Zone(8, false, false, null, "/zone8D1C.jpg", 300, 300, this));
  }
}

And finally my zone class which extends JButton

public class Zone extends JButton implements ActionListener {

private final Zone zone;
private final Board board;
private Integer id;
private boolean piece;
private boolean egout;
private Integer x;
private Integer y;
private Integer x_end;
private Integer y_end;

public Zone(Integer id, boolean piece, boolean egout, Dalle[] dalles, List<Connexion> connexions, String image_name, Integer x, Integer y, Board board) {
zone = this;
addMouseListener(new TAdapter());
this.board = board;
this.piece = piece;
this.egout = egout;
this.id = id;
this.setLayout(null);
this.setBorder(null);
this.setText(null);
ImageIcon ii = new ImageIcon(this.getClass().getResource(image_name));
this.setIcon(ii);
this.x = x;
this.y = y;
this.setBounds(x, y, ii.getIconWidth(), ii.getIconHeight());
this.x_end = x + ii.getIconWidth();
this.y_end = y + ii.getIconHeight();
this.setSize(ii.getIconWidth(), ii.getIconHeight());
}

private class TAdapter extends MouseAdapter {

  @Override
  public void mouseClicked(MouseEvent e) {
    if (gotoZone()) {
      ...
    } else {
      System.out.println("error");
    }
  }
}
}

Answer 1

The GridBagLayout is the best suitable layout for what you try to achieve. It could be something like this :

public class Board1 extends JPanel implements Board {
    public Board1() {
        super();
        this.setLayout(new GridBagLayout());
        GridBagConstraints constraints = new GridBagConstraints();
        constraints.fill = GridBagConstraints.HORIZONTAL;
        constraints.gridx = 0;
        constraints.gridy = 0;
        this.add(new Zone(...), constraints);
        constraints.gridx = 1;
        constraints.gridy = 0;
        this.add(new Zone(...), constraints);
        // You caught the point I think
    }
}

You have a good tutorial made by Oracle here.