This is machine translation

Translated by Microsoft
Mouseover text to see original. Click the button below to return to the English version of the page.

Note: This page has been translated by MathWorks. Click here to see
To view all translated materials including this page, select Country from the country navigator on the bottom of this page.

Using Grid Layout Managers


Grid 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'};

The grid is invisible, but this picture includes lines to illustrate how the space is distributed.

To place a component in a specific row and column of the grid, you must:

  • Specify the grid as the parent of the component.

  • Specify the target row and column by setting the Layout property of the component.

For example, this code creates a grid that has the default size (two '1x' rows and two '1x' columns). Then it places a list box in the first row and second column of that grid.

g = uigridlayout;
list = uilistbox(g);
list.Layout.Row = 1;
list.Layout.Column = 2;

Again, the grid lines in this picture do not appear in the figure.

If you add components and do not specify the Layout property, the grid places the components in default locations. The components fill the grid from left to right and top to bottom initially. For example, this code creates a 2-by-2 grid containing four components in the default order.

f = uifigure;
g = uigridlayout(f);
g.RowHeight = {25,'1x'};
g.ColumnWidth = {100,'1x'};
b = uibutton(g,'Text','Open File');
dd = uidropdown(g,'Items',{'Scatter Plot','Line Plot'});
list = uilistbox(g,'Items',{'one','two'});
ax = uiaxes(g);

If you reconfigure the grid after adding components to it, the grid does not redistribute the components. For example, if you add a third column in the preceding example, the grid does not shift the list box back to the third column of the first row.

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

Some changes you make in the layout can change the size of the grid. For example, adding a component to a fully populated grid adds a row to accommodate the new component.

To view the list of component objects in the grid, query the Children property of the grid. Changing the order in the list does not change the layout in the grid.

Example: Hide Rows Based on Run-Time Conditions

This example shows how to hide components within a row of a grid based on the on the user's selection in a drop-down menu. The code performs these high-level tasks:

  • Creates grid1, a 1-by-2 grid in the figure that manages a panel and an axes component.

  • Creates grid2, a 3-by-2 grid inside the panel. This grid manages the layout of a drop-down menu, two spinners, and their labels.

  • Creates a callback function called findMethodSelected for the drop-down menu. When the value of the drop-down menu changes to 'Quartiles', the callback hides the components in second row of grid2 by setting grid.RowHeight{2} to 0.

Create a program file called showhide.m. Then paste this code into the file and run it.

function showhide
    f = uifigure('Name','Statistical Analysis');
    % Create grid1 in the figure
    grid1 = uigridlayout(f);
    grid1.RowHeight = {'1x'};
    grid1.ColumnWidth= {220,'1x'};
    % Add a panel and axes
    p = uipanel(grid1);
    ax = uiaxes(grid1);

    % Create grid2 in the panel
    grid2 = uigridlayout(p);
    grid2.RowHeight = {22, 22, 22};
    grid2.ColumnWidth = {80,'1x'};

    % Add method label and drop-down
    findMethodLabel = uilabel(grid2,'Text','Find Method:');
    findMethod = uidropdown(grid2,'Items',{'Moving median','Quartiles'});
    findMethod.ValueChangedFcn = @findMethodSelected;

    % Add window size label and spinner
    winSizeLabel = uilabel(grid2,'Text','Window Size:');
    winSize = uispinner(grid2,'Value',0);

    % Add threshold label and spinner
    thresLabel = uilabel(grid2,'Text','Threshold:');
    thres = uispinner(grid2,'Value',3);

        function findMethodSelected(src,~)
            method = src.Value;

            switch method
            case 'Quartiles'
                % Collapse the second row (hides winSize spinner)
                grid2.RowHeight{2} = 0;
            case 'Moving median'
                % Expand the second row
                grid2.RowHeight{2} = 22;

When you set the Find Method to Quartiles in the app, the Window Size label and the spinner next to it become hidden.

See Also