Help GUI Layout toolbox Relative widths

I am writing an interface with GUI Layout toolbox, which has two rows and three columns of block diagrams. I found that the "widths" function can only set the absolute width, and when the display size changes, the layout of block diagrams will also change, which is very ugly, so I would like to ask if you can set the relative proportion of block diagrams? This allows the application to display the same effect on different screen sizes.

Part of my code is as follows:

g = uix.Grid( 'Parent', p1, 'Spacing', 1 ,'Padding',1,'BackgroundColor',[0.8 0.9 0.5]);

g1 = uix.Panel( 'Parent',g, 'Title', '', 'Padding', 0 ,'FontWeight','bold','fontsize',12,'TitlePosition', 'centertop');

g2 = uix.Panel( 'Parent',g, 'Title', '', 'Padding', 0 ,'FontWeight','bold','fontsize',12,'TitlePosition', 'centertop');

obj.ax(5) = axes( 'Parent',uicontainer('Parent', g1));%,'Clipping','on','ActivePositionProperty', 'OuterPosition');

obj.ax(6) = axes( 'Parent',uicontainer('Parent', g2));%,'Clipping','on','ActivePositionProperty', 'OuterPosition');

set( g, 'Widths', [-1 400 -2.5], 'Heights', [-1 -1] );

Answer 1

[Saurav]

Hello,

From what I gather, you are encountering challenges in configuring the relative sizes of block diagrams so that their layout adjusts to different display sizes, rather than being fixed or absolute.

To achieve a responsive layout that adapts to changes in display size while using the GUI Layout Toolbox in MATLAB, you can indeed set the relative proportions of block diagrams using the “Widths” and “Heights” properties of the grid. When you specify these properties, using negative values allows you to set the size of the elements relative to each other rather than specifying absolute sizes in pixels.

In your code, you have already started using negative values for the “Widths” property, which is the right approach for setting relative sizes. The value after the minus sign (-) indicates the proportion of the space that each element should take up relative to the others.

Here's a brief explanation and how you can adjust it:

#Understanding the Relative Sizing

• The values in the “Widths” array correspond to the columns of your grid.
• The values in the “Heights” array correspond to the rows of your grid.
• A value of ‘-1’ means that the column or row should take up one "share" of the available space.
• A value of ‘-2’ means it should take up two "shares," and so on. This way, you can control the relative sizes of your grid's columns and rows.

In your code, you have set “Widths” to ‘[-1 400 -2.5]’, which mixes relative and absolute sizing (due to the positive value ‘400’), and might not behave as expected when resizing the window. For proportional resizing of all elements, it's recommended to use negative values for all three.

For example, to have the first column take up one part, the second (middle) column take up two parts, and the third column take up one and a half parts of the available space, you can adjust the `'Widths'` property like so:

set(g, 'Widths', [-1 -2 -1.5], 'Heights', [-1 -1]);

This setup ensures that your layout remains proportionally sized as the display or window size changes, maintaining a more consistent and visually appealing interface across different screen sizes.

I hope that helps!