App Designer Reflow of Items within Tabs

I have a tab group that is my highest level of organization in my app. Within each tab, I have a series of panels that I would like to reflow when the app is resized. Right now they don't, because they are in a tab group. Is is possible to get the panels within a tab group to reflow as panels do when not in a tab group? I have pasted a shot of my app. The tab group is evident, and I have highlighted the two panels I want to reflow.

Thanks in advance.

Answer 1

[Rajani Mishra]

Reflow is possible if an app is built using the reflow template. Currently app designer does not provide panels within a tab group as a starting template. Currently app designer offers either two or three panels as a starting template.

You can start with the template currently available and design accordingly.

For more information refer : https://www.mathworks.com/help/matlab/creating_guis/apps-with-auto-reflow.html?s_tid=answers_rc2-2_p5_MLT

Answer 2

[Melissa Williams]

You can implement the reflow yourself by adding a 1 row, 2 column grid to the tabs and adding your panels to each grid cell. This is how the reflow is implemented in the 2 and 3 panel apps. If you take a look at the generated code for a 2 panel reflowing app and look at the updateAppLayout function, you will see the logic behind it.

[Simone Pavan]

Melissa, I'm interested to your solution but I don't really understand what you mean.

Could you be more specific?

[Melissa Williams]

1. Drag a grid into the tab
2. Set it to be 1 row, 2 columns (this will give you two boxes side by side)
3. Add a panel to each grid cell (name the right panel RighPanel for code to work)
4. Layout the components you want in each side.
5. Add a sizeChangeFcn callback to your UIFigure
6. Inside the callback add code like this

currentFigureWidth = app.UIFigure.Position(3);
if(currentFigureWidth <= 576)  %<--update this to the width you want to reflow
    % Change to a 2x1 grid
    app.GridLayout.RowHeight = {480, 480};  %<--update this to be the height of figure when app starts 
    app.GridLayout.ColumnWidth = {'1x'};
    app.RightPanel.Layout.Row = 2;
    app.RightPanel.Layout.Column = 1;
else
    % Change to a 1x2 grid
    app.GridLayout.RowHeight = {'1x'};
    app.GridLayout.ColumnWidth = {220, '1x'}; %<--update this to width of left side when app starts
    app.RightPanel.Layout.Row = 1;
    app.RightPanel.Layout.Column = 2;
end  

[galaxy]

@Melissa Williams

Could you please give a example ?. I tried, but it did not succesfull.

Thank you so much