iOS Development - Auto Layouts

iOS Development with Swift - Auto Layout

When you design an iOS application and add UI elements, they might look perfect on one device screen size or orientation. However, when you run the same app on a different device (e.g., a larger iPhone, an iPad, or in landscape orientation), the UI can appear misaligned, stretched, or elements might even go off-screen. Auto Layout is Apple’s powerful system for creating adaptive user interfaces that look great on all supported devices and orientations.

In this chapter, we’ll explore how to use Auto Layout constraints and UIStackView to build flexible and responsive UIs. Start by creating a new single view application project or use an existing one.

The Problem: Fixed Positioning

Let’s illustrate the issue. Add a UILabel to the top-center of your view in Main.storyboard and another UILabel to the bottom-right corner.

Now, preview how this looks on different devices or orientations. In Interface Builder, at the bottom of the canvas, click the ‘View as: [Current Device]’ button (e.g., ‘View as: iPhone 15 Pro’). This opens a panel where you can select different devices and orientations (portrait/landscape) to preview your layout. You’ll likely see that the ‘top-center’ label isn’t truly centered on wider screens, and the ‘bottom-right’ label might be misplaced or partially off-screen in landscape or on different device sizes.

This happens because, without Auto Layout, elements are positioned using fixed coordinates relative to their parent view’s top-left corner. Auto Layout allows you to define rules (constraints) that describe how elements should be positioned and sized relative to each other or their container, adapting dynamically.

Applying Constraints to UI Elements

Let’s fix the positions of our labels using constraints.

Constraining the Top-Center Label

Select the ‘top-center’ label in Interface Builder.
To center it horizontally: Control-drag from the label to its superview (the main view). A pop-up menu will appear. Choose ‘Center Horizontally in Safe Area’. (Note: ‘Safe Area’ ensures content isn’t obscured by notches, status bars, etc. Older tutorials might refer to ‘Container’).
To position it vertically near the top: Control-drag from the label to its superview again. Choose ‘Top Space to Safe Area’. This creates a constraint for the top margin. You can edit its constant value in the Size Inspector if needed.
A label also needs constraints for its width and height if its intrinsic content size isn’t sufficient. For simple labels, often the intrinsic size is fine. If not, you can add width/height constraints using the ‘Add New Constraints’ (pin icon) menu at the bottom right of the Interface Builder canvas, or by control-dragging from the label to itself and choosing ‘Width’ and ‘Height’.

The ‘Add New Constraints’ menu (pin icon) is a common way to add multiple constraints at once, like leading/trailing/top/bottom spacing, width, height, and aspect ratio.

Constraining the Bottom-Right Label

Select the ‘bottom-right’ label.
To pin it to the bottom-right: Use the ‘Add New Constraints’ menu (pin icon). Set the ‘Trailing Space to Safe Area’ and ‘Bottom Space to Safe Area’ to your desired margin (e.g., 20 points). Ensure the red I-beam lines are solid for the constraints you want to add, then click ‘Add 2 Constraints’. Alternatively, control-drag from the label to the superview, choose ‘Trailing Space to Safe Area’. Repeat, control-drag from label to superview, choose ‘Bottom Space to Safe Area’.

(Tip: To select multiple constraint options from the control-drag pop-up simultaneously, hold Shift while clicking them if the menu supports it, or add them one by one.)

After applying these constraints, check the ‘View as’ panel again. The labels should now maintain their intended positions across different devices and orientations. Red or orange constraint lines in Interface Builder indicate issues or ambiguities that need resolving.

UIStackView for Easy Layouts

UIStackView provides a streamlined way to arrange a collection of views horizontally or vertically. You define constraints for the stack view itself, and it manages the layout of its arranged subviews based on properties like axis, distribution, alignment, and spacing.

Let’s create a simple layout with three buttons using a stack view. Imagine you want two buttons side-by-side at the top, and one button below them, spanning the width.

Drag three UIButton instances onto your view. Don’t worry too much about their exact initial placement.

Creating a Horizontal Stack View

Select the top two buttons (click one, then Command-click the other).
With both selected, click the ‘Embed In’ button (looks like a downward arrow into a box) at the bottom of the Interface Builder canvas and choose ‘Stack View’. Alternatively, go to Editor > Embed In > Stack View.
By default, this might create a vertical stack view. Select the newly created Stack View. In the Attributes Inspector (right-hand pane), change its ‘Axis’ to ‘Horizontal’.

With this horizontal stack view still selected, in the Attributes Inspector:

Set ‘Distribution’ to ‘Fill Equally’ (this makes both buttons take up equal width within the stack view).
Set ‘Spacing’ to a desired value, e.g., ‘10’ points, to add space between the buttons.

Creating a Vertical Stack View

Now, select the horizontal stack view (containing the two buttons) and the third, bottom button (Command-click to select both).
Embed these two selected items into another Stack View (using the ‘Embed In’ button or Editor menu).
Select this new, outer Stack View. In the Attributes Inspector, ensure its ‘Axis’ is ‘Vertical’.

Set its ‘Distribution’ to ‘Fill’ or ‘Fill Equally’ depending on your desired behavior for the height.
Set ‘Alignment’ to ‘Fill’ to make the subviews (the inner stack view and the bottom button) stretch to the width of this outer stack view.
Set ‘Spacing’ to a value like ‘10’ or ‘20’.

Your view hierarchy should now have an outer vertical stack view, which contains an inner horizontal stack view (with two buttons) and the third button.

Adding Constraints to the Outer Stack View

The final step is to constrain the outer (vertical) stack view to its superview. Select the outer stack view.

Use the ‘Add New Constraints’ menu (pin icon).
Set ‘Leading Space to Safe Area’ and ‘Trailing Space to Safe Area’ to a margin (e.g., 20 points).
Set ‘Top Space to Safe Area’ to a margin (e.g., 20 points).
You might also need a ‘Bottom Space to Safe Area’ constraint if you want it to have a specific distance from the bottom, or if its content doesn’t define its height sufficiently.
Click ‘Add X Constraints’.

Now, your layout with three buttons, managed by nested stack views, should adapt correctly to different screen sizes and orientations. Stack views significantly simplify complex layouts by reducing the number of individual constraints you need to manage.

Auto Layout and Stack Views are fundamental to modern iOS UI development. Practice creating different layouts to become proficient. For more complex scenarios, consider programmatic constraints using NSLayoutAnchor for finer control.