Question

I’m working on a college project and I’m having difficulty lining up components with the board grid. The board will always maintain a 1:1 width to height ratio but the size can vary. Here is what I’ve tried which resulted in this:

Why are the percentages not lining up with what I calculated them to be for the actual image size of 1200×1200?

Here’s my layout code:

public class BoardPanel extends ViewComponent {

    public static final int ROWS = 27;
    public static final int COLS = 23;
    private Board board = new Board();

    private BufferedImage background = ResourceLoader.openImage("images/board.jpg");

    public BoardPanel() {
        this.add(board, "pos 4.5% 4.5%, width 76.5%, height 91%");           
    }

    @Override
    public void paintContent(Graphics2D g) {
        g.drawImage(background, 0, 0, getHeight(), getHeight(), null);
    }

    private class Board extends ViewComponent {

        public Board() {
            setLayout(new GridLayout(ROWS, COLS,  1, 1));

            for (int row = 0; row < ROWS; row++)
                for (int col = 0; col < COLS; col++)
                    this.add(new Location(row, col));
        }
    }
}

Answer 1

I’ve figured out how to do this, and the answer comes when you look at the difference between GridLayout and MigLayout.

What happened was I had empty space (insets) when I used GridLayout because it forces all cells to be the same size. I noticed this when I added a 1px LineBorder.

The way MigLayout handles extra space is it seems to distribute the extra pixels among the cells, thereby forcing it to fix the container as ideally as possible. For example:

this.setLayout(new MigLayout("ins 0, wrap " + COLS + ", gap 1", "grow", "grow"));


        for (int row = 0; row < ROWS; row++)
            for (int col = 0; col < COLS; col++)
                this.add(new Location(row, col), "grow");

Which uses the exact same container and panel size as the grid layout shown here:
(notice the insets)

this.setLayout(new GridLayout(ROWS, COLS, 1, 1));
this.setBorder(new LineBorder(Color.RED));


    for (int row = 0; row < ROWS; row++)
        for (int col = 0; col < COLS; col++)
            this.add(new Location(row, col));