Class GridLayout

Aid to positioning and sizing of controls laid out in a grid

This class represents a rectangular grid layout of cells that can be used to specify the position and size of canvasGUI controls.

The grid layout enables the user to

• Define the overall size and position of the grid in pixels.
• Define the number and relative width of the columns.
• Define the number and relative height of the rows.
• Position controls within the grid
• Allow controls to span multiple columns and/or rows

The methds cols, rows and cells are used to set the number and/or the relative cell size within the grid area. Passing integers to these methods will create cells of equal widths and equal heights.

To have columns of different widths or rows with different heights then the parameter must be an array of numbers, the array length represents the number of cells and the array values represent their relative sizes.

An example will make this clearer, consider the following code

grid.cols([10, 24, 16]).rows(4);
grid.size([10, 24, 16], 4);

Both lines perform the same action by specifying a grid of 3 variable width columns and 4 equal height rows. The row height in pixels will be the 0.25 x the grid area height.

To caluclate the column widths divide each array element by the sum of all the array values. If we do that the array elements becomes [0.2, 0.48, 0.32] and to find the column pixel widths, simply multiply these values by grid area width.