How to Use Alignments in SwiftUI — The Alignment Process

This is the third part in the ‘SwiftUI Layout System’ series and the second part in the subseries about ‘How to Use Alignments in SwiftUI’. In this part we will talk in detail about the steps that SwiftUI takes to align its views.

The SwiftUI Layout System

• How to Use the SwiftUI Layout System
• How to Use Stacks in SwiftUI
• How to Use Alignments in SwiftUI
  – The Basics
  – The Alignment Process
  – Custom Alignments
  – Container Expansion using Alignments
  – Z-Stacks Alignment

(More to come …)

Crew Introduction

To learn about alignments we won’t be using text but we will use images of various different visual baselines. This section is meant as a reference for the values for those images. Without further ado, let’s introduce the cast.

Mankey the Monkey

Meet Manky the Monkey. It is an image of a monkey, 90px in width and 90px in height. The visual baseline is 80px from the top, which is roughly 89% of the total height.

Sneaky the Snake