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.

uigridlayout

Create grid layout manager

Syntax

g = uigridlayout
g = uigridlayout(parent)
g = uigridlayout(___,sz)
g = uigridlayout(___,Name,Value)

Description

g = uigridlayout creates a 2-by-2 grid layout in a new figure and returns the GridLayout object. MATLAB® calls the uifigure function to create the figure.

A grid layout is useful for laying out apps. It positions UI components along the rows and columns of an invisible grid that spans an entire figure or container. This method of positioning components is easier to manage than setting pixel values in Position vectors.

example

g = uigridlayout(parent) creates a grid layout in the specified parent container. The parent can be a figure created using the uifigure function, or one of its child containers.

example

g = uigridlayout(___,sz) specifies the size of the grid as the vector sz. The first element in this vector is the number of rows, and the second element is the number of columns. Specify the sz argument by itself or after the parent argument.

example

g = uigridlayout(___,Name,Value) specifies GridLayout property values using one or more name-value pair arguments. Specify the name-value pair arguments after all other arguments in any of the previous syntaxes.

Examples

collapse all

Create a figure and a grid. Then configure the grid by setting the row heights and column widths. In this case, configure a 3-by-2 grid in which the top two rows are fixed at 22 pixels, while the bottom row has a variable height. Set the left column to be 150 pixels wide, and set the right column to have a variable width. The grid fills the entire figure, but because the grid is invisible, the figure appears to be empty.

f = uifigure('Position',[100 100 440 320]);
g = uigridlayout(f);
g.RowHeight = {22,22,'1x'};
g.ColumnWidth = {150,'1x'};

Add two drop-downs, a list box, and an axes component to the grid. If you do not specify row or column locations for the Layout property of components, they populate the grid from left to right and top to bottom by default. In this case, move the second drop-down (dd2) and the list box (chanlist) to specific rows and columns by setting the Layout property.

% Device drop-down
dd1 = uidropdown(g);
dd1.Items = {'Select a device'};

% Range drop-down
dd2 = uidropdown(g);
dd2.Items = {'Select a range'};
dd2.Layout.Row = 2;
dd2.Layout.Column = 1;

% List box
chanlist = uilistbox(g);
chanlist.Items = {'Channel 1','Channel 2','Channel 3'};
chanlist.Layout.Row = 3;
chanlist.Layout.Column = 1;

% Axes
ax = uiaxes(g);

Set the axes to span rows 1 through 3, filling the vertical space.

ax.Layout.Row = [1 3];

When you resize the figure, the axes grow and shrink to fill the available space that the left column does not use. The components on the left side remain fixed because that column is defined as 150 pixels wide.

When you assign different weights to variable-width columns, the width of each column is proportional to the weight. Variable-height rows allocate space the same way.

Create a figure and a 2-by-2 grid. Then configure the row heights and the column widths. In this case, the top row is fixed at 40 pixels, while the bottom row has a variable height. Both columns have a variable width, but the second column has twice the weight of the first column. Because the grid is invisible, the figure appears to be empty.

f = uifigure('Position',[100 100 437 317]);
g = uigridlayout(f,[2 2]);
g.RowHeight = {40,'1x'};
g.ColumnWidth = {'1x','2x'};

Add a label across both columns of the top row. Then add an axes component to each column of the bottom row.

% Add title
title = uilabel(g,'Text','Market Trends');
title.HorizontalAlignment = 'center';
title.FontSize = 24;
title.Layout.Row = 1;
title.Layout.Column = [1,2];

% Add two axes
ax1 = uiaxes(g);
ax2 = uiaxes(g);

Because the left column has a weight of 1, and the right column has a weight of 2, the axes on the right use twice as much of the horizontal space as the axes on the left. The grid maintains this ratio when you resize the figure.

One way to arrange UI components in a panel is to create a grid in the panel.

Create a figure and a 1-by-2 grid. Then configure the column widths. In this case, the left column is fixed at 220 pixels, while the right column has a variable width. Because the grid is invisible, the figure appears to be empty.

f = uifigure('Position',[100 100 500 315]);
grid1 = uigridlayout(f,[1 2]);
grid1.ColumnWidth = {220,'1x'};

Add a panel and axes to grid1.

p = uipanel(grid1,'Title','Configuration');
ax = uiaxes(grid1);

Create a grid called grid2 inside the panel. Then place three components and three labels inside grid2. The left column of grid2 aligns the labels with the components. Since each row uses only 22 pixels, the panel has extra space below the third row.

% Grid in the panel
grid2 = uigridlayout(p,[3 2]);
grid2.RowHeight = {22,22,22};
grid2.ColumnWidth = {80,'1x'};

% Device label
dlabel = uilabel(grid2);
dlabel.HorizontalAlignment = 'right';
dlabel.Text = 'Device';

% Device drop-down
devicedd = uidropdown(grid2);
devicedd.Items = {'Select a device'};

% Channel label
chlabel = uilabel(grid2);
chlabel.HorizontalAlignment = 'right';
chlabel.Text = 'Channel';

% Channel drop-down
channeldd = uidropdown(grid2);
channeldd.Items = {'Channel 1', 'Channel 2'};

% Rate Label
ratelabel = uilabel(grid2);
ratelabel.HorizontalAlignment = 'right';
ratelabel.Text = 'Rate (scans/s)';

% Rate edit field
ef = uieditfield(grid2, 'numeric');
ef.Value = 50;

When you resize the figure, the axes grow and shrink to fill the available space that the left column of grid1 does not use. The panel remains fixed because that column is defined as 220 pixels wide.

Nested grids allow you to manage subsets of components. In this case, there are three grids: one grid that covers the entire figure, a second grid that manages a vertical stack of components, and a third grid that manages two buttons that are side by side at the bottom of the vertical stack.

Create a figure and a 1-by-2 grid. Then configure the column widths. In this case, the left column is fixed at 150 pixels, while the right column has a variable width. Because the grid is invisible, the figure appears to be empty.

f = uifigure('Position',[100 100 500 315]);
grid1 = uigridlayout(f,[1 2]);
grid1.ColumnWidth = {150,'1x'};

Create a 4-by-1 grid called grid2 inside the first column of grid1. Then add an axes component to the second column of grid1.

grid2 = uigridlayout(grid1,[4 1]);
grid2.RowHeight = {22,22,22,44};

ax = uiaxes(grid1);

Add three drop-downs to the first three rows of grid2.

% Routes drop-down
ddRoutes = uidropdown(grid2);
ddRoutes.Items = {'Route 1', 'Route 2'};

% Direction drop-down
ddDirection = uidropdown(grid2);
ddDirection.Items = {'Inbound', 'Outbound'};

% Time drop-down
ddTime = uidropdown(grid2);
ddTime.Items = {'Morning', 'Afternoon'};

Create a 1-by-2 grid called grid3 inside the last row of grid2. Then add two buttons to grid3. Remove the padding on the left and right edges of grid3 so that the buttons align with the left and right edges of the drop-downs.

grid3 = uigridlayout(grid2,[1 2]);
grid3.Padding = [0 10 0 10];
b1 = uibutton(grid3,'Text','Start');
b2 = uibutton(grid3,'Text','Stop');

When you resize the figure, the axes grow and shrink to fill the available space that the left column of grid1 does not use. The components on the left side remain fixed because that column is defined as 150 pixels wide.

Bring child components of a scrollable grid layout into view by specifying pixel coordinates or a location name.

Create a 5-by-2 grid layout and set the Scrollable property of the grid to 'on'. Then add a label, a table, and a panel to the grid. Set the Scrollable property of the panel to 'off' and then add a chart to the panel.

uf = uifigure('Position',[782 497 435 311]);
g = uigridlayout(uf,'Scrollable','on');
g.RowHeight = {22,40,22,22,400};
g.ColumnWidth = {400,400};

lbl = uilabel(g,'Text','Tsunamis');
lbl.Layout.Row = 2;
lbl.Layout.Column = [1,2];
lbl.HorizontalAlignment = 'center';
lbl.FontSize = 28;

tsunamis = readtable('tsunamis.xlsx');
tsunamis.Cause = categorical(tsunamis.Cause);
t = uitable(g,'Data',tsunamis);
t.Layout.Row = [3,5];
t.Layout.Column = 2;

p = uipanel(g);
p.Scrollable = 'off';
p.Layout.Row = [3,5];
p.Layout.Column = 1;
gb = geobubble(p,tsunamis.Latitude,tsunamis.Longitude,...
    tsunamis.MaxHeight,tsunamis.Cause);

Scroll to a location in the grid.

scroll(g,100,-30);

Now use location names to scroll to the bottom-right corner of the grid.

scroll(g,'bottom','right');

Input Arguments

collapse all

Parent container, specified as a Figure created using the uifigure function, or one of its child containers: Tab, Panel, ButtonGroup, or GridLayout. If no container is specified, MATLAB calls the uifigure function to create a new Figure object that serves as the parent container.

Size of the grid, specified as a two-element vector. The first element is the number of rows, and the second element is the number of columns. Both values must be greater than 0. When you specify this argument without setting the RowHeight or ColumnWidth properties, MATLAB automatically sets the row heights and column widths to '1x'.

Name-Value Pair Arguments

Specify optional comma-separated pairs of Name,Value arguments. Name is the argument name and Value is the corresponding value. Name must appear inside quotes. You can specify several name and value pair arguments in any order as Name1,Value1,...,NameN,ValueN.

Example: uigridlayout('RowHeight',{100,100}) creates a grid containing two rows that are 100 pixels in height.

Note

The properties listed here are only a subset. For a complete list, see GridLayout Properties.

Column width, specified as a cell array containing either numbers or numbers paired with 'x' characters. You can specify any combination of values. The number of elements in the cell array controls the number of columns in the grid. For example, to create a 4-column grid, specify a 1-by-4 cell array.

There are two different types of column widths:

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

  • Variable width — Specify a number paired with an 'x' character (for example, '1x'). When the parent container resizes, the column width grows or shrinks. Variable-width columns fill the remaining horizontal space that the fixed-width 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-width columns. If the grid has only one variable-width column, then it uses all the remaining space regardless of the number. If there are multiple variable-width columns that use the same number, then they share the space equally. Otherwise, the amount of space is proportional to the number.

For example, {100,'2x','1x'} specifies 100 pixels for the first column, and the last two columns share the remaining horizontal space. The second column uses twice as much space as the third column.

Changing certain aspects of a layout can affect the value of this property. For example, adding more components to a fully populated grid changes the size of the grid to accommodate the new components. And if you try to delete a column that contains components, the ColumnWidth property does not change until you move those components out of that column.

Row height, specified as a cell array containing either numbers or numbers paired with 'x' characters. You can specify any combination of values. The number of elements in the cell array controls the number of rows in the grid. For example, to create a grid that has 4 rows, specify a 1-by-4 cell array.

There are two different types of row heights:

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

  • Variable height — Specify a number paired with an 'x' character (for example, '1x'). When the parent container resizes, the row grows or shrinks. Variable-height rows fill the remaining vertical space that the fixed-height rows do not use. The number you pair with the 'x' character is a weight for dividing up the remaining space among all the variable-height rows. If the grid has only one variable-height row, then it uses all the remaining space regardless of the number. If there are multiple variable-height rows that use the same number, then they share the space equally. Otherwise, the amount of space is proportional to the number.

For example {100,'2x','1x'} specifies 100 pixels for the first row, and the last two rows share the remaining vertical space. The second row uses twice as much space as the third row.

Changing certain aspects of a layout can affect the value of this property. For example, adding more components to a fully populated grid changes the size of the grid to accommodate the new components. And if you try to delete a row that contains components, the RowHeight property does not change until you move those components out of that row.

Tips

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.

Introduced in R2018b