When designing a figure using Guide you are restricted to one of two layout schemes. The first is where all the components are placed absolutely on the canvas and you lock the size of the figure so users can't change it. Secondly you can set the units of the figure to 'normalized'  and all the components of the figure will resize with the same ratio. For simple user interfaces this may be suitalble but to achieve a more professional look to your user interface you have to resort to some more sophisticated techniques.

All the handle graphics components have a property called resizefcn. This is a callback property that is invoked when the panel or figure changes size. You could take advantage of this and write a custom resizefcn for every gui you write but a better solution is to write a general layout manager suitable for many tasks.

The rest of this article shows an example of such a layout manager for Matlab Handle Graphics. You can download the toolbox at the end of the article.

Border Layout

The border layout is a very simple manager but extremely powerfull if used in a nested fashion. The border layout can be applied to any figure, uipanel or uicontainer. There are five positions on a border layout where you can add components.

north south east west centre

The north and south components have a fixed height. The east and west components have a fixed width. The centre component will resize to fit the space available as the panel or figure resizes. The code to generate the above gui using the layout toolbox is

function test_borderlayout
    f = figure('units','pixels','position',[10 10 500 500]);

    layout = xtargets_borderlayout(f);

    layout.add(uicontrol('units','pixels','string','north'),'north');
    layout.add(uicontrol('units','pixels','string','south'),'south');
    layout.add(uicontrol('units','pixels','string','east'),'east');
    layout.add(uicontrol('units','pixels','string','west'),'west');
    layout.add(uicontrol('units','pixels','string','centre'),'centre');
end

Spring Grid Layout

SGL is a more advanced layout than border layout. Actually the border layout uses SGL to perform it's function. The principle of SGL is to setup a grid wheret each row and column is represented by a spring with a specific length and stiffness. The spring can also be defined to have a minimum and maximum length (Since Version 1.2). For ease of use we define the stiffness of a spring as

0 <= stiffness <= 1

A spring with a stiffness of 1 does not stretch beyond or below is original length. A spring with a stiffness of 0 is very stretchy. Inbetween values can be specified for interesting effects. For interest the layout derives the true spring constant from our stiffness value by

k = 1 / ( 1 - s )

 Once the grid has been setup we can add controls or other containers to the grid. We have a great deal of flexibility in how components are aligned within our grid. The constraint parameters and thier defaults for adding a control to the grid are.

Example 

The following two pictures show a gui configured using spring grid layout. You can see how the different components stretch differently as the gui is resized. Of particular interest is the top component which uses all of the constraint parameters in a non default way.

The left component has been placed in a column which has a stiffness of 1 which is why it doesn't resize. All the other columns have a stiffness of 0.

At the bottom of this page is the code that was used to generate this UI.

function test_springgridlayout
    f = figure('units','pixels','position',[10 10 500 500]);

    % Column 1 is fixed at 100 pixels.
    % All other columns are super stretchy around 100 pixels.
    col_ks = [ 1  0   0   0  ];
    col_ds = [ 100 100 100 100 ] ;

    % Row 1 super stretchy around 100 pixels
    % All other rows are fixed at other pixel heights
    row_ks = [ 0   1   1  1   ];
    row_ds = [ 100 100 20 100 ];

    % Initialize the layout
    layout = xtargets_springgridlayout(f, row_ks, row_ds, col_ks, col_ds);

    % Get a constraint structure.
    constraint = layout.create_constraint();

    for row = 2:4
        for col = 2:4
            constraint.col = col;
            constraint.row = row;
            h = uicontrol('string', sprintf('[r%d,c%d]',row,col), ...
                 'units', 'pixels');
            layout.add(h, constraint);
        end
    end

    % Create a control than spans 5 rows in the left column
    constraint.row = 1;
    constraint.col = 1;
    constraint.colspan = 1;
    constraint.rowspan = 5;
    layout.add(uicontrol('string','left','units','pixels'), constraint);

    % Create a control that sits at the top centre of the area
    % from [1 2] to [1 4]. The control does not fill the cell
    % but is aligned to the top centre of the cell.
    constraint.row = 1;
    constraint.col = 2;
    constraint.colspan = 3;
    constraint.rowspan = 1;
    constraint.padding = [5 5 5 5];
    constraint.fillx = false;
    constraint.alignx = 'centre';
    constraint.filly = false;
    constraint.aligny = 'top';
    layout.add(uicontrol('string','top','units','pixels'), constraint);

end

Minimum and Maximum Lengths For Springs

% Arguments
%     panel     -   figure, uipanel or uicontainer handle
%     s_rows    -   Vector of spring stiffness for rows
%     d_rows    -   Matrix of spring lengths for rows.  
%                      row1    -   default length
%                      row2    -   minimum length
%                      row3    -   maximum length
%                   It is not necessary to specify the min and max 
%                   length rows. If left out then they default to
%                   0 and Inf respectively.
%     s_cols    -   As for s_rows
%     d_cols    -   As for s_cols

Downloads ( Updated to Version 1.2,  25 April 2005 )

Note that only Matlab versions R14 and above are supported by this toolbox 

If you found the software usefull you may wish to donate, using PayPal, some funds towards further development. No obligation necessary.