Align GUIDE UI Components


The GUIDE environment will be removed in a future release. After GUIDE is removed, existing GUIDE apps will continue to run in MATLAB® but they will not be editable in GUIDE.

To continue editing an existing GUIDE app, see GUIDE Migration Strategies for information on how to help maintain compatibility of the app with future MATLAB releases. To create new apps, use App Designer instead.

Align Objects Tool

The Align Objects tool enables you to position objects with respect to each other and to adjust the spacing between selected objects. The specified alignment operations apply to all components that are selected when you press the Apply button. To open the Align Objects tool in the GUIDE Layout Editor, select Tools > Align Objects.

To select multiple components, they must have the same parent. That is, they must be contained in the same figure, panel, or button group.

The Align Objects tool provides two types of alignment operations:

  • Align — Align all selected components to a single reference line.

  • Distribute — Space all selected components uniformly with respect to each other.

Both types of alignment can be applied in the vertical and horizontal directions. In many cases, it is better to apply alignments independently to the vertical and horizontal using two separate steps.

Align Options

There are both vertical and horizontal align options. Each option aligns selected components to a reference line, which is determined by the bounding box that encloses the selected objects. For example, the following picture of the layout area shows the bounding box (indicated by the dashed line) formed by three selected push buttons.

All of the align options (vertical top, center, bottom and horizontal left, center, right) place the selected components with respect to the corresponding edge (or center) of this bounding box.

Distribute Options

Distributing components adds equal space between all components in the selected group. The distribute options operate in two different modes:

  • Default behavior — MATLAB distributes space equally among components within the bounding box.

  • Select the Set spacing check box — You specify the number of pixels between each component.

Both modes enable you to specify how the spacing is measured, as indicated by the button labels on the alignment tool. These options include spacing measured with respect to the following edges:

  • Vertical — inner, top, center, and bottom

  • Horizontal — inner, left, center, and right

Property Inspector

About the Property Inspector

In GUIDE, as in MATLAB generally, you can see and set most components' properties using the Property Inspector. To open it from the GUIDE Layout Editor, do any of the following:

  • Select the component you want to inspect, or double-click it to open the Property Inspector and bring it to the foreground

  • Select View > Property Inspector.

  • Click the Property Inspector button

The Property Inspector window opens, displaying the properties of the selected component. For example, here is a view of a push button's properties.

Scroll down to see additional properties. Click any property value or icon to set its value.

The Property Inspector provides context-sensitive help for individual properties. To see a definition of any property, right-click the name or value in the Property Inspector and click the What's This? menu item that appears. A context-sensitive help window opens displaying the definition of the property.

Use the Property Inspector to Align Components

The Property Inspector enables you to align components by setting their Position properties. A component's Position property is a four-element vector that specifies the size and location of the component: [distance from left, distance from bottom, width, height]. The values are given in the units specified by the Units property of the component.

  1. Select the components you want to align.

  2. Select View > Property Inspector or click the Property Inspector button .

  3. In the Property Inspector, scroll to the Units property and note its current setting, then change the setting to inches.

  4. Scroll to the Position property. This figure shows the Position property for multiple components of the same size.

  5. Change the value of x to align their left sides. Change the value of y to align their bottom edges. For example, setting x to 2.0 aligns the left sides of the components 2 inches from the left side of the window.

  6. When the components are aligned, change the Units property back to its original setting.

Grid and Rulers

The layout area displays a grid and rulers to facilitate component layout. Grid lines are spaced at 50-pixel intervals by default. The size of each pixel is 1/96th of an inch on Windows® systems and 1/72nd of an inch on Macintosh systems. On Linux® systems, the size of a pixel is determined by your system resolution.

You can optionally enable snap-to-grid, which causes any object that is moved close to a grid line to jump to that line. Snap-to-grid works with or without a visible grid.

Use the Grid and Rulers dialog (select Tools > Grid and Rulers) to:

  • Control visibility of rulers, grid, and guide lines

  • Set the grid spacing

  • Enable or disable snap-to-grid

Guide Lines

The Layout Editor has both vertical and horizontal snap-to guide lines. Components snap to the line when you move them close to the line.

Guide lines are useful when you want to establish a reference for component alignment at an arbitrary location in the Layout Editor.

Creating Guide Lines

To create a guide line, click the top or left ruler and drag the line into the layout area.

Related Topics