{"id":2115,"date":"2008-02-15T15:35:38","date_gmt":"2008-02-15T20:35:38","guid":{"rendered":"https:\/\/blogs.mathworks.com\/pick\/2008\/02\/15\/gui-layout-part-1\/"},"modified":"2016-05-10T15:02:32","modified_gmt":"2016-05-10T19:02:32","slug":"gui-layout-part-1","status":"publish","type":"post","link":"https:\/\/blogs.mathworks.com\/pick\/2008\/02\/15\/gui-layout-part-1\/","title":{"rendered":"GUI Layout (Part 1)"},"content":{"rendered":"
\n

This is a post from Jiro, one of our guest bloggers:<\/p>\n

One of my favorite things to do in MATLAB is to build GUIs. This is Part 1 of 3 Pick of the Week entries on GUIs.<\/p>\n

When I build GUIs, I think about not only the functionalities, but also the aesthetics of them. I like buttons and sliders to be a certain size, and I want them to resize appropriately when I change the size of the figure window.<\/p>\n

In MATLAB GUIs, the handle graphics objects have a Units<\/tt> property which specifies the units to use for positioning the objects. Using the Normalized<\/tt> option allows the objects to resize proportionally with the figure. In order to keep some components from becoming oversized or undersized, I often define a ResizeFcn<\/tt> for the figure to adjust the positions of the objects. For example, take a look at the following example:<\/p>\n

First, here's the GUI at a particular size:<\/p>\n

\"\"<\/p>\n

Next, here's the same GUI after resizing it to a smaller size:<\/p>\n

\"\"<\/p>\n

Notice how the size of the push button remained the same and the slider bar and the axes adjusted their size appropriately to fill the remaining space.<\/i><\/p>\n

 <\/p>\n

 function myResizeFcn(varargin)\r\n   % Figure resize callback\r\n   %   Adjust object positions so that they maintain appropriate\r\n   %   proportions<\/pre>\n
   fP = get(figH, 'Position');<\/pre>\n
   set(sliderH, 'Position', [10       , 10, fP(3)-130, 25       ]);\r\n   set(buttonH, 'Position', [fP(3)-110, 10, 100      , 25       ]);\r\n   set(axesH  , 'Position', [50       , 85, fP(3)-100, fP(4)-130]);<\/pre>\n
 end<\/pre>\n
Every time the figure is resized, it determines the current figure size and then positions the objects accordingly.<\/p>\n
This has worked nicely for me, but I always find things out in the File Exchange bucket that would make my life easier. Stay tuned for Part 2<\/a> and Part 3, in which I will introduce a couple of entries that I found useful for GUI layouts.<\/p>\n
Comments?<\/b><\/p>\n
Tell us about some of the things you do to make your GUI nicer (both functionally and aesthetically).<\/p>\n
Written by Jiro Doke, Senior Applications Engineer, The MathWorks, Inc.<\/i><\/p>\n