App Designer Reflow of Items within Tabs

20 views (last 30 days)
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.

Accepted Answer

Rajani Mishra
Rajani Mishra on 21 Aug 2019
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.

More Answers (1)

Melissa Williams
Melissa Williams on 1 Oct 2019
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.
Melissa Williams
Melissa Williams on 16 Apr 2020
  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;
% 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;

Sign in to comment.




Community Treasure Hunt

Find the treasures in MATLAB Central and discover how the community can help you!

Start Hunting!

Translated by