How to Use Alignments in SwiftUI — Custom Alignments

This is the third part in the ‘SwiftUI Layout System’ series and the third part in the subseries about ‘How to Use Alignments in SwiftUI’. In this part we will talk about creating our own alignments.

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 …)

Custom Alignments

Let’s create an alignment of our own. Remember that an alignment only affects the position along the opposite axis of the stack. So on a HStack that would be the vertical axis and on a VStack that would be the horizontal axis.

For our example let us bring our crew back from part II.

As you will notice the images are aligned to the bottom of the container. However, the “visual” baseline of all the images is different. What we are after is some sort of floor for the crew to sit on.