Documentation Center

  • Trial Software
  • Product Updates

Align GUIDE GUI Components

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.

    Note   To select multiple components, they must have the same parent. That is, they must be contained in the same figure, panel, or button group. See Select Components for more information.

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:

  • Equally space selected components within the bounding box (default)

  • Space selected components to a specified value in pixels (check Set spacing and specify a pixel value)

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 the left of one to set its value, either directly in that field or via a modal GUI such as a pop-up menu, text dialog, or color picker. Click the plus boxes on the left margin to expand multiline properties, such as BackgroundColor, Extent, and Position.

The Property Inspector provides context-sensitive help for individual properties. Right-clicking a property name or value opens a context menu item saying What's This?. Clicking it opens a Help window displaying documentation for the property you selected. For example, on the right is context-sensitive help for the push button ButtonDownFcn obtained from the Property Inspector as shown on the left.

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 4-element vector that specifies the location of the component on the GUI and its size: [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. See Select Components for information.

  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. A null value means that the element differs in value for the different components. 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 GUI.

  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 and you can select from a number of other values ranging from 10 to 200 pixels. 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.

Was this topic helpful?