MATLAB Answers

How can I specify the way components resize automatically in App Designer?

124 views (last 30 days)
Tamas Muszbek
Tamas Muszbek on 6 Mar 2017
I am developing a GUI in App Designer. I need it to be able to resize every component in a nice way for displaying on different screens. I try to make the most use of the automatic resizing of UIFigure, since hard-coding the resizing of each particular element would be just too much work.
However, instead of just changing the size ratio of each dimension of each element, App Designer sometimes tries to align certain elements to one side, or stretches the width of the element by the same amount of pixels which the window had been increased with. It looks bad.
I have been trying all the alignment functions of App Designer - aligning elements to each other, grid, no alignment, and occasionally by trial and error I manage to position my elements in such a way that the automatic resize would behave like I want it to. Still, it is bothersome, and it would be nice to know how exactly I can place the right dimension constraints on elements in the Design View, without hard-coding it.
For example: If I place a component using no alignment or the grid, will it keep the same ratio as its parent panel or uifigure? If I allign the right side of a button to the right side of an uiaxes, will the button stay aligned to that side without ever changing the size?
I attach a picture about the tiny and magnified version of my panel to illustrate my point.
  3 Comments
Marc Youcef
Marc Youcef on 8 Apr 2020
Even after 2020a, still experiencing what you are just sharing here above. Symmetry not kept during resize and making all that stuff look really ugly specially and complex interfaces... Have no clue how to make it understand that it needs to keep relative position while resizing ...

Sign in to comment.

Answers (2)

J. Alex Lee
J. Alex Lee on 8 Apr 2020
"uigridlayout" was introduced in 2018b, which may be helpful...It allows pretty sophisticated layouts, although it still seems buggy especially when you nest multiple uigridlayouts.
  2 Comments
J. Alex Lee
J. Alex Lee on 10 Apr 2020
Sure thing! I wasn't sure it would be helpful since it's such a new feature and not everyone keeps matlab up to date.
Be sure to check out the "fit" keyword in the column widths and row heights; this is a neat feature introduced I think in R2019x, but it will make the grid as small as possible to still accoomodate whatever its holding. It's well suited for buttons and edit boxes, pop ups, etc.

Sign in to comment.


Dovletgeldi Seyitliyev
Dovletgeldi Seyitliyev on 27 Nov 2020
I solved by writing this code to my startupFcn
set(0,'units','pixels');
Pix_SS = get(0,'screensize');
k_vert=Pix_SS(4)/1080;
k_hor=Pix_SS(3)/1920;
%k_vert=0.75;
%k_hor=0.6;
uisize = app.UIFigure.Position;
screenWidth = uisize(3);
screenHeight = uisize(4);
left = uisize(1);
bottom = uisize(2);
width = screenWidth*k_hor;
height = screenHeight*k_vert;
k_font=(k_hor+k_vert)/2;
drawnow;
comp=app.UIFigure.Children;
app.UIFigure.Position = [left bottom width height];
assignin('base', 'pos', app.UIFigure.Position);
assignin('base', 'compp', app.UIFigure.Children);
for i=1:numel(comp)
app.UIFigure.Children(i).Position(3)=comp(i).Position(3)*k_hor;
app.UIFigure.Children(i).Position(4)=comp(i).Position(4)*k_vert;
app.UIFigure.Children(i).Position(1)=comp(i).Position(1)*k_hor;
app.UIFigure.Children(i).Position(2)=comp(i).Position(2)*k_vert;
try
a{i} = comp(i).FontSize;
catch
warning('This object does not have font option. Assigning a value of 0.');
a{i} = 0;
end
if a{i}~=0
app.UIFigure.Children(i).FontSize=comp(i).FontSize*k_font;
end
end

Community Treasure Hunt

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

Start Hunting!