Use Grid Layout Managers in App Designer

Grid layout managers provide a way to lay out your app without having to set pixel positions of UI components inPositionvectors. 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 codeSizeChangedFcncallback 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 theComponent Libraryonto the canvas. Alternatively, you can right-click the figure or container and selectApply Grid Layoutfrom 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, inDesign View, bring the grid layout into focus by clicking in the area where you added it. Then, select thebutton from the upper-left corner of the grid layout manager, or right-click the grid layout and selectConfigure Grid Layout. Then, select a row or column and from theResize Configurationmenu, specifyFit,Weighted, orFixed. For more information about these options, seeGridLayout Properties. You can also add or remove rows and columns.

Grid layout manager resize configuration options. A row is selected, and there are options to add or remove rows, and to specify the row height as fit, weighted, or fixed.

Convert Components from Pixel-Based Positions to Grid Layout Manager

You can 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 theirPositionvectors get replaced byLayout.RowandLayout.Columnvalues that specify their location in the grid. The component hierarchy also updates in theComponent Browser.

Two images of the Component Browser with some components. On the left, the components are listed under app.UIFigure. On the right, the components are listed under app.GridLayout.

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 Warning	Explanation	Suggested Action
`警告:无法设置“位置”,“InnerPosition”, or 'OuterPosition' for components in 'GridLayout'.`	You cannot set the`Position`property on components in a grid layout manager.	指定一个网格组件的位置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.

Convert Components from Grid Layout Manager to Pixel-Based Positions

Starting in R2022a, you can also remove a grid layout manager from your app and convert the components in the grid to use pixel-based positioning. To remove a grid layout manager from a container, right-click the container in the canvas and selectRemove Grid Layout.

When you remove a grid layout manager that has components in it from a UI figure or container, the grid layout manager is deleted and the components get added to the container that originally contained the grid layout manager. TheLayout.RowandLayout.Columnvalues that specified the component locations in the grid get replaced byPositionvectors. The component hierarchy also updates in theComponent Browser.

Two images of the Component Browser with some components. On the left, the components are listed under app.GridLayout. On the right, the components are listed under app.UIFigure.

In some cases, you might need to update your callback code if it sets properties of the removed grid layout manager.

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

Open App

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.

Open the app in App Designer. InDesign View, drag a grid layout manager into the figure.
Right-click the grid layout manager that you just added to the figure and selectConfigure Grid Layoutfrom the context menu.
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 toFit. When you are finished, verify that in theInspectortab of theComponent Browser,ColumnWidthvalues are12.64x,1.89x,fit,fit,fit,fitand theRowHeightvalues are1x,fit,1.93x,fit,3.07x,fit.
Switch toCode View. Update each of theDropDownValueChangedcallbacks so that theallchildfunctions set the font name and font size on components inapp.GridLayout, instead of inapp.UIFigure.
Now run the app to see how the grid adjusts to accommodate the components as their sizes change.