Main Content

Use Grid Layout Managers

Grid layout managers provide a way to lay out your app without having to set pixel positions of UI components in Position vectors. For resizeable apps, grid layout managers provide more flexibility than the automatic resize behavior in App Designer. They are also easier to configure than it is to code SizeChangedFcn callback functions.

Add and Configure Grid Layout Manager

In App Designer, you can add a grid layout manager to a blank app or to empty container components within the figure.

To use a grid layout manager, drag a grid layout from the Component Library onto the canvas. Alternatively, you can right-click the figure or container and select Apply Grid Layout from the context menu. A grid layout manager spans the entire app window or container that you place it in. It is invisible unless you are actively configuring it on the App Designer canvas.

To configure the grid layout manager, in Design View, bring the grid layout into focus by clicking in the area where you added it. Then, select the button from the upper-left corner of the grid layout manager, or right-click the grid layout and select Configure Grid Layout. Then, select a row or column and from the Resize Configuration menu, specify Fit, Weighted, or Fixed. For more information about these options, see GridLayout Properties. You can also add or remove rows and columns.

Convert Components from Pixel-Based Positions to Grid Layout Manager

You can also convert the components within a UI figure or container from pixel-based positioning to a grid layout manager. When you apply a grid layout manager to a UI figure or container that has components in it, the components get added to the grid layout manager and their Position vectors get replaced by Layout.Row and Layout.Column values that specify their location in the grid. The component hierarchy also updates in the Component Browser.

Grid layout managers support different properties than other container components. In some cases, you might need to update your callback code if it sets these types of properties, or if it sets component properties that are not available when they are managed by the grid layout. If your callbacks or other behaviors do not work as expected, then look for code patterns like the ones lists in this table.

Symptom or WarningExplanationSuggested Action
Warning: Unable to set 'Position', 'InnerPosition', or 'OuterPosition' for components in 'GridLayout'.You cannot set the Position property on components in a grid layout manager.Specify a grid location for the component by setting the Layout property with appropriate Row and Column values.
Error using matlab.ui.container.GridLayout/set
There is no FontSize property on the GridLayout class.
Properties you set on other container components might not be supported on the grid layout manager.Update your code so that it sets properties on the intended container.
A context menu assigned to a container does not open in the running app.When you add a grid layout manager to a container, it spans the entire container. This means that click events happen on the grid, instead of the container.Reassign the context menu to the grid layout.

Example: Convert Components to Use Grid Layout Manager Instead of Pixel-Based Positions

This app shows how to apply a grid layout manager to the figure of an app that already has components in it. It also shows how to configure the grid layout manager so that the rows and columns automatically adjust to accommodate changes in size of text-based components.

  1. Open the app in App Designer. In Design View, drag a grid layout manager into the figure.

  2. Right-click the grid layout manager that you just added to the figure and select Configure Grid Layout from the context menu.

  3. One-by-one, select the rows and columns of the grid that contain the drop-down menus and the table and change their resize configurations to Fit. When you are finished, verify that in the Inspector tab of the Component Browser, the ColumnWidth values are 12.64x,1.89x,fit,fit,fit,fit and the RowHeight values are 1x,fit,1.93x,fit,3.07x,fit.

  4. Switch to Code View. Update each of the DropDownValueChanged callbacks so that the allchild functions set the font name and font size on components in app.GridLayout, instead of in app.UIFigure.

  5. Now run the app to see how the grid adjusts to accommodate the components as their sizes change.

See Also