MATLAB Creating Graphical User Interfaces

Using Grid Layout Managers

NoteGrid layout managers are only for apps created using the uifigure function.

When you design an app using a grid layout manager, you place components in the rows

and columns of an invisible grid. Using a grid layout is straightforward, but it is important

to understand the relationship between the grid, its parent container, and the components

that the grid manages.

When you create a grid, it always spans the entire app window or container that you

place it in. You must configure its rows and columns so that they divide the space of the

parent container appropriately.

To configure the rows and columns, specify the RowHeight and ColumnWidth properties

of the grid. Specify the value of each property as a cell array. The length of the cell array

controls the number of rows or columns. For example, to create a grid that has three

rows, specify the RowHeight property as a 1-by-3 cell array. The values in each cell array

control the size of each row or column.

There are two types of sizes:

• Fixed size in pixels — Specify a number. The size of the row or column is fixed at the
  number of pixels you specify. When the parent container resizes, the size does not
  change.


• Variable size — Specify a number paired with an 'x' character (for example, '1x').
  When the parent container resizes, the row or column grows or shrinks. Variable-size
  rows and columns fill the remaining space that the fixed rows or columns do not use.
  The number you pair with the 'x' character is a weight for dividing up the remaining
  space among all the variable-size rows or columns.

For example, this code creates a 2-by-3 grid. The first row is fixed at 25 pixels high, while

the second row has a variable height. The first two columns are 100 pixels wide, and the

last column has a variable width.

f = uifigure;

g = uigridlayout(f);

g.RowHeight = {25,'1x'};

g.ColumnWidth = {100,100,'1x'};

16 App Layout