Laying out a programmatic UI can take time and involves many small steps. For example, you must position components manually—often several times—to place them exactly where you want them to be. Establishing final settings for other properties and coding statements for them also takes time. You can reduce the effort involved by taking advantage of built-in MATLAB® tools to establish values for component properties. The following sections describe some of the tools.
|Mode or Tool||Use it to||Commands|
|Plot edit mode||Interactively edit and annotate plots|
|Property Editor||Edit graphical properties of objects|
|Property Inspector||Interactively display and edit most object properties|
|Align Distribute Tool||Align and distribute components with respect to one another|
|Color Selector||Choose a color from a palette of colors and obtain its value|
|Font Selector||Preview character font, style, and size and choose values for them|
Some of these tools return property values, while others let
you edit properties interactively without returning their values.
In particular, the Property Inspector lets you interactively set almost
any object property. You then can copy property values and paste them
into the Command Window or a code file. However, when you capture
vector-valued properties, such as
the Inspector only lets you copy values one number at a time.
Note: The following sections describe some techniques for interactively refining the appearance of UIs. If you are building a UI that opens a saved FIG-file, re-saving that file will preserve most of the properties you interactively change. If your program file creates a new figure whenever you open it, then you must specify all changed properties in the program file itself to keep the UI up-to-date.
If you do not like the initial positions or other properties of UI components, you can make manual adjustments to them. By placing the figure in plot edit mode, you can use your mouse to move, resize, align, and change various components properties. Then, you can read out the values of properties you changed and copy them into your UI code file to initialize the components.
To set position in plot edit mode:
Enter plot edit mode. Click the Arrow tool
, or select Edit Plot from
the Tools menu. If your figure has no menus
or toolbar, type
plotedit on in the Command Window.
Select a component. Click the left mouse button while over the component you are editing.
Move and resize the component. Click within it and drag to move it to a new location. Click a square black handle and drag to change its shape. Use arrow keys to make small adjustments.
Make sure that you know the handle of the component
you have manipulated. In the following code, the handle is a variable
Get the component's
from the Property Inspector. Execute this command to open the Property
object_handle.Position ans = 15.2500 333.0000 106.0000 20.0000
to that value (
object_handle.Position = [15.2500 333.0000 106.0000 20.0000];
Instead of using a separate set command, after you decide upon
a position for the object, you can modify the statement in your code
file that creates the object to include the
To position components systematically, you can create a function
to manage the process. Here is a simple example function called
function rect = editpos(handle) % Enters plot edit mode, pauses to let user manipulate objects, % then turns the mode off. It does not track what user does. % User later needs to output a Position property, if changed. if ~ishghandle(handle) disp(['=E= gbt_moveobj: Invalid handle: ' inputname(1)]) return end plotedit(handle,'on') disp('=== Select, move and resize object. Use mouse and arrow keys.') disp('=== When you are finished, press Return to continue.') pause rect = handle.Position; inspect(handle)
hfig = figure; hsl = uicontrol('Style','slider') editpos(hsl)
editpos, the following prompt appears:
=== Select, move and resize the object. Use mouse and arrow keys. === When you are finished, press Return to continue.
After you select an object in plot edit mode, you can open the Property Inspector to view and modify any of its properties. While the object is selected, in the Command Window type:
Scroll in the help window to view descriptions of other properties.
The following Inspector image illustrates using the Inspector
to change the
Max property of a slider uicontrol
from its default value (
The Property Editor has a more graphical interface than the Property Inspector. The interface is convenient for setting properties that affect the appearance of components. To open it for a component, in the Command Window type:
Stringproperties of a list box altered using the Property Editor.
Most of the properties that the Property Editor can set are cosmetic. To modify values for other properties, click More Properties. The Property Inspector opens (or, if already open, receives focus) to display properties of the selected object. Use it to change properties that the Property Editor does not display.
When you finish setting a property, you need to save its value:
If your program file opens a saved FIG-file each time it runs, save (or re-save) the figure itself.
If your program file creates the figure each time it runs, save the property value in your program file.
You can obtain the new property value using dot notation
and the property name. For example, this command gets the
object_handle and stores it in the variable,
bc = object_handle.BackgroundColor;
rbbox is a useful function
for setting positions. When you call it, you drag out a rubber
band box anywhere in the figure. You receive a position
vector for that box when you release the mouse button. Be aware that
A figure window must have focus.
The mouse cursor must be within the figure window.
Your left mouse button must down.
Because of this behavior, you must call
a function or a script that waits for you to press the mouse button.
The returned position vector specifies the rectangle you draw in figure
units. The following function, called
rbbox to specify a position for a component.
It returns the position vector you drag out and also places it on
the system clipboard:
function rect = setpos(object_handle) % Use RBBOX to establish a position for a UI component. % object_handle is a handle to a uicomponent that uses % any Units. Internally, figure Units are used. disp(['=== Drag out a Position for object ' inputname(1)]) waitforbuttonpress % So that rbbox does not return immediately rect = rbbox; % User drags out a rectangle, releases button % Pressing a key aborts rbbox, so check for null width & height if rect(3) ~= 0 && rect(4) ~= 0 % Save and restore original units for object myunits = object_handle.Units; object_handle.Units = get(gcf,'Units'); object_handle.Position = rect; object_handle.Units = myunits; else rect = ; end clipboard('copy', rect) % Place set string on system % clipboard as well as returning it
setposfunction uses figure units to set the component
setposgets and saves the
Unitsproperty of the component, and sets that property to figure units. After setting the object position, the function restores the original units of the object.
The following steps show how to use
reposition a button away from its default position:
Put this statement into your UI code file, and then execute it:
btn1 = uicontrol('Style','pushbutton',... 'String','Push Me');
Put the following statement in your UI code file,
execute it, and then drag out a Position for object
rect = setpos(btn1)
Release the mouse button. The control moves.
Position is set, returned
and placed on the system clipboard:
rect = 37 362 127 27
Positionparameter and empty value to the
uicontrolcommand from step 1 in your UI code file, as follows:
btn1 = uicontrol('Style','pushbutton',... 'String','Push Me','Position',)
, type Ctrl+V to paste the
setposoutput as the
btn1 = uicontrol('Style','pushbutton',... 'String','Push Me','Position',[37 362 127 27])
You cannot call
setpos when you are creating
a component because
setpos requires the handle
of the component as an argument. However, you can create a small function
that lets you position a component interactively as you create it.
The function waits for you to press the mouse button, then calls
and returns a position rectangle when you release the mouse button:
function rect = getrect disp('=== Click and drag out a Position rectangle.') waitforbuttonpress % So that rbbox does not return immediately rect = rbbox; % User drags out a rectangle, releases button clipboard('copy', rect) % Place set string on system % clipboard as well as returning it
In the editor, place the following statement in your
UI code file to generate a push button. Specify
it as the value for the
btn1 = uicontrol('Style','pushbutton','String','Push Me',... 'Position',getrect);
Select the entire statement in the editor and execute it with the F9 key or by right-clicking and selecting Evaluate Selection.
In the figure window, drag out a rectangle for the
control to occupy. When you have finished dragging, the new component
displays in that rectangle. (If you type a character while you are
rbbox aborts, you receive an error,
and no uicontrol is created.)
In the editor, select
uicontrol statement, and type
place of it. The statement now looks like this:
btn1 = uicontrol('Style','pushbutton','String','Push Me',... 'Position',);
Place your cursor between the empty brackets and type Ctrl+V, or right-click and select Paste. Allowing for differences in coordinate values, the statement looks like this one:
btn1 = uicontrol('Style','pushbutton','String','Push Me',... 'Position',[55 253 65 25]);
rbbox returns coordinates
in figure units (
'pixels', in this example). If
Units value of a component is not
the same as the figure, specify it to be the same when you make the
component. For example, the default Units of a uipanel
'normalized'. To sketch a uipanel position,
use code that uses figure
Units, as in the following
pnl1 = uipanel('Title','Inputs',... 'Units',get(gcf,'Units'),... 'Position',getrect)
getpixelpositionto obtain a position vector for a component in units of pixels regardless of its
Unitssetting. The position origin is with respect to the parent of the component or the enclosing figure. Use
setpixelpositionto specify a new component position in pixels. The
Unitsproperty of the component remains unchanged after calling either of these functions.
After you position components, they still might not line up
perfectly. To make final adjustments, use the
from the Command Window. As an interactive alternative, use the Align
Distribute tool, which is available from the figure menu. The following
sections describe both approaches.
to align user interface controls and axes. This function enables you
to line up the components vertically and horizontally. You can also
distribute the components evenly across their span or specify a fixed
distance between them.
A syntax for the
align function is
The following table lists the possible values for these parameters.
All handles in
have the same parent. See the
page for information about other syntaxes.
align function positions components
with respect to their bounding box, shown as a blue dashed line in
the following figures. For demonstration purposes, create three push
buttons in arbitrary places using the following code.
fh = figure('Position',[400 300 300 150]) b1 = uicontrol(fh,'Position',[30 10 60 30],'String','B1'); b2 = uicontrol(fh,'Position',[50 50 60 30],'String','B2'); b3 = uicontrol(fh,'Position',[10 80 60 30],'String','B3');
Each of the three following
Align Components Horizontally. The following statement moves the push buttons horizontally to the right of their bounding box. It does not alter their vertical positions. The figure shows the original bounding box.
align([b1 b2 b3],'Right','None');
Align Components Horizontally While Distributing Them Vertically. The following statement moves the push buttons horizontally
to the center of their bounding box and adjusts their vertical placement.
'Fixed' option makes the distance between the
boxes uniform. Specify the distance in points (1 point = 1/72 inch).
In this example, the distance is seven points. The push buttons appear
in the center of the original bounding box. The bottom push button
remains at the bottom of the original bounding box.
align([b1 b2 b3],'Center','Fixed',7);
Align Components Vertically While Distributing Them Horizontally. The following statement moves the push buttons to the bottom of their bounding box. It also adjusts their horizontal placement to create a fixed distance of five points between the boxes. The push buttons appear at the bottom of the original bounding box.
align([b1 b2 b3],'Fixed',5,'Bottom');
If your figure has a standard menu bar, you can perform align
and distribute operations on selected components directly in plot
edit mode. Several options from the Tools menu
save you from typing
align function commands.
The align and distribute menu items are highlighted in the following
Select Tools > Edit Plot.
Select the components that you want to align.
Select Tools > Align Distribute Tool.
In the Vertical panel, choose the third Distribute
option (the same as the
In the Horizontal panel, choose the first Align option (the same as
The buttons align as shown.
One thing to remember when aligning components is that the
You can also select the Align or Distribute option from the figure Tools menu to perform either operation immediately. For example, here are the six options available from the Align menu item.
Specifying colors for
and plotting object color properties can be difficult without seeing
examples of colors. The
opens a dialog that returns color values you can use to set these
properties. For example, this command opens a dialog that allows the
user to choose a color:
object_handle.BackgroundColor = uisetcolor;
uisetcolorfunction returns an RGB values.
You can combine setting position and color into one line of code or one function, for example:
btn1 = uicontrol('String', 'Button 1',... 'Position',getrect,... 'BackgroundColor',uisetcolor)
getrectexecutes to let you set a position using
rbbox. When you release the mouse button, the
uisetcolordialog opens for you to specify a background color.
gives you access to the characteristics of all fonts on your system.
Use it to set font characteristics for any component that displays
text. It returns a structure containing data that describes the property
values you chose.
FontData = uisetfont(object_handle)
FontData = FontName: 'Arial' FontWeight: 'bold' FontAngle: 'normal' FontSize: 10 FontUnits: 'points'
uisetfontreturns all font characteristics at once. You cannot omit any of them unless you delete a field from the structure. You can use
uisetfontwhen creating a component that has a
Stringproperty. You can also specify the string itself at the same time by calling
inputdlg, which is a dialog that allows you to enter text strings. Here is an example that creates static text and sets the font properties.
f = figure('Position',[300 300 385 285]); txt1 = uicontrol(f,... 'Style','text',... 'String',inputdlg('String','Static Text'),... uisetfont,'Position',[50 200 150 40]);
inputdlgdialog box appears first.
After you enter a string
and click OK, the
box opens for you to set font characteristics for displaying the string.
When you specify a font, style, and size and click OK, the text appears in the figure window.