ContentsGUI Layout Toolbox for creating sophisticated MATLAB Apps that resize gracefully. Have you ever created an App in MATLAB? Have you used GUIDE to create an App or written your own App using uicontrols? If so, then you have probably encountered the issue of placing the various buttons, check boxes, and axes in your App, sizing them appropriately, etc. After all this work, have you needed to resize your App only to discover that it doesn't scale properly? The buttons grow larger making the App odd looking or nothing scales and you end up with a larger App with a bunch of empty space? The GUI Layout Toolbox solves these issues by providing a set of classes to:
- Arrange MATLAB user-interface components horizontally, vertically or in grids
- Ability to mix fixed size and variable size elements
- Dynamic resizing of elements by dragging dividers
- Use panels and tabs for switching interface pages
f = figure( 'Position', 200*ones(1,4) ); vbox = uix.VBox( 'Parent', f ); axes( 'Parent', vbox ); hbox = uix.HButtonBox( 'Parent', vbox, 'Padding', 5 ); uicontrol( 'Parent', hbox, ... 'String', 'Button 1' ); uicontrol( 'Parent', hbox, ... 'String', 'Button 2' ); set( vbox, 'Heights', [-1 35] )Running this code results in the App above. In the code above, we used the VBox method of the uix class to create our vertical box container, which has the figure (f) as its parent. We then create an axes object with the vertical box container as the parent. Next we add a hozizontal button box to the vertical box container. Finally, we add two buttons to the horizontal button box container. The horizontal button box container is a specialized version of the horizontal box container. It is used to arrange a row of buttons, check-boxes or similar graphical elements. All buttons are given equal size and by default are centered in the drawing area. We could have used a horizontal box container, but we would need some additional code to specify the size and position of the buttons. By default the horizontal button box centers the buttons. And finally, we set the height of the two items in the vertical container box. In this case, we specify "-1" for the axes which stipulates that the size is variable and will scale to fit the region. For the second item, the horizontal button box, we specify that it has a height of 35 pixels. This maintains the buttons to be located at the bottom of the App. To demonstrate how this works with scaling, the image below shows three instances of the same App. Figure 1 is the original App as shown above. Figure 2 is the App enlarged horizontally and Figure 3 is the App enlarged vertically. As you can see in each case, the size and placement of the buttons remains the same while the axes is scaled to the specified size. In the example above, we used two boxes for the simple App. Other containers available with the toolbox are panels (including tabs) and grids. These containers allow the developer to create highly customized and complex Apps to support their applications.
To leave a comment, please click here to sign in to your MathWorks Account or create a new one.