iOS Auto Layout

From Xojo Documentation

Revision as of 21:46, 30 January 2019 by PLefebvre (talk | contribs) (Created page with "__TOC__ Auto-Layout describes the ability for the controls on the layout to resize and reposition them as the layout size changes. It consists of a collection of rules that al...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)


Auto-Layout describes the ability for the controls on the layout to resize and reposition them as the layout size changes. It consists of a collection of rules that allow you to specify controls in relationship to other controls, making it possible to have layouts that work in all these situations:

  • Different device screen sizes
  • Changing device orientations
  • Language translations
  • User-specific settings such as font size
  • OS changes such as control sizes, fonts and spacing

Without Auto-Layout, you typically would have to create multiple UI screens to account for different possibilities and then also add code to handle other situations. With AutoLayout, you can more easily design a single UI whose controls have constraints that allow them to adjust for the above situations.

For example, the Auto-Layout rules for a button could indicate the following:

  • The Left margin of the button should match the Left margin of the TitleLabel control (at the same scale with no offset)
  • The Top of the button should be 10 points below the bottom of NoteTitleField (at the same scale).
  • The Height is fixed at 40 points
  • The Width is fixed at 100 points

Should you adjust the layout to change the position of TitleLabel or NoteTitleField, the button will be repositioned on the screen as defined by the rules. This is handy when designing you layout, but is even more important when you want your layouts to appropriately use the available screen area of the many different size iOS devices. Here is an example of auto-layout rules for a Label on a View:

You can see in the above set of rules that the label is set to have the same Left and Right edges as another label on the View (NameLabel). This means that if NameLabel is repositioned, then this label is also adjusted. You can also see the Top is set to be the bottom of FullAddressLabel plus a gap. So if FullAddressLabel is repositioned then this label is also adjusted accordingly.

Some Auto-Layout rules are set for you automatically as you move and drag the control on the layout. But you can also set any of the rules manually. To edit a rule, click on its name and then click the Edit button. To add a new rule, click the "+" button and choose the rule from the list.

To add and move a control around on the layout without auto-layout being applied, hold down the Command key as you drag the control. This adds the control using only offsets.

The following Auto-Layout rules can be added, although not all controls have every rule available:

  • Left: The left position of the control.
  • Right: The right position of the control.
  • Top: The top position of the control.
  • Bottom: The bottom position of the control.
  • Horizontal Center: The centered horizontal position for the control.
  • Vertical Center: The centered vertical position for the control.
  • Width: The width of the control.
  • Height: The height of the control.
  • Baseline: Refers to an invisible line, offset from the bottom of the alignment rectangle, along which glyphs of characters are laid out.
  • Leading: Refers to the edge of the alignment rectangle where words and sentences begin. For left-to-right languages such as English, Leading is the same as Left, whereas in a right-to-left environment such as Hebrew or Arabic, Leading is the same as Right.
  • Trailing: Refers to the edge where words and sentences end. Trailing is the same as Right for English, but Trailing is the same as Left for Hebrew and Arabic.

You should use Leading and Trailing to make sure your interface is laid out appropriately in all languages, unless the horizontal position should remain fixed at left or right regardless of the language.

You do not need to specify every rule for a control. In fact, sometimes that would be confusing. For example, if you specify a Left and Right rule for a control, then also specifying a Width is not necessary as the Width can be inferred by the Left and Right rules.

See Also

iOSLayoutConstraint, iOSView classes; UserGuide:iOS UI topic