The Complete Guide to Layout in SwiftUI

HStack, VStack, ZStack, Spacer, GeometryReader, and more

Paul Hudson May 1st 2020 @twostraws

SwiftUI gives us a huge range of tools to control layouts, from the core tools of HStack, VStack, and ZStack, through to more advanced views such as GeometryReader and Group, plus modifiers such as layoutPriority().

I’ve published a lot of articles and videos about those and more, but this article brings them all together in one place for easy reference.

If I missed something off this list, let me know on Twitter.

Sponsor Hacking with Swift and reach the world's largest Swift community!

How layout works in SwiftUI

Before we get into the details of specific layout techniques, you should start with my video “How layout works in SwiftUI” – it outlines exactly how things fit together to give us lots of power and flexibility:

If you’d rather read the article instead, you can find it here: How layout works in SwiftUI.

The basics of layout stacks, frames, and ForEach

A handful of view types lie at the center of all our SwiftUI layouts, and if you understand them then you’re already half way to making great UI.

Start with these four to get a firm understanding of the basics:

Of course, you’re not restricted to working in one dimension – you can create your own stacks if you want. For example, I show you how to position views in a grid here.

If you really want to understand what’s going on with frames, I recommend you watch my video on absolute positioning because it really highlights how offsets and positions work in SwiftUI, particularly when it comes to modifier order:

If you’d rather read that article instead, you can find it here: Absolute positioning for SwiftUI views.

Controlling spacing

SwiftUI gives us fine-grained control of over spacing in three key ways: alignment and spacing in stacks, padding for individual views, and Spacer(). That might not sound like much, but when you combine them you can create smart layouts that work great across all devices:

It can be tempting to use fixed sizes for spacers a lot, but I want to add an important word of caution: so much of SwiftUI is designed for flexibility and adaptivity, and while your fixed 20-point Spacer might look good now it might look less good for someone who has their Dynamic Type setting different from yours.

If you want to see just how far SwiftUI’s flexibility can take you, check out my video on how we can use Group with size classes to make our UI change from horizontal to vertical based on the current size class:

If you’d rather read that article instead, you can find it here: Using groups as transparent layout containers.

And if you’re looking for even more flexibility, I have an article covering how to automatically switch between HStack and VStack based on size class – you can wrap up the whole behavior in a single reusable view if you want.

Aligning views

SwiftUI’s built-in stacks have an alignment property for controlling how their views are positioned, but for real power you need to use alignment guides. These let you customize exactly how views are positioned, including how to align views across stacks – how to make a view in one stack align with another view in a different stack.

First, start with my introduction to alignment and alignment guides:

You can read that here if you prefer: Alignment and alignment guides.

Once you understand the basics of how alignment guides work, you should move on to my video that shows how to create custom alignment guides. This is where the real power is, because it lets us align views even when they are inside different stacks:

You can read that here if you prefer: How to create a custom alignment guide.

Working with GeometryReader

If you want detailed information about your view’s size and position, you should use the GeometryReader view. These two articles should give you a solid introduction:

You can also GeometryReader with ScrollView to create a variety of beautiful effects, mimicking things like CoverFlow in only a few lines of code – check out this video for some examples:

You can read that here if you prefer: ScrollView effects using GeometryReader

Where next?

I have a whole range of tutorials available to help you make the most of SwiftUI:

My 100 Days of SwiftUI is free online, teaching you SwiftUI as you build lots of real-world apps.
My SwiftUI By Example guide contains hundreds of hands-on solutions for common SwiftUI problems.

I publish various SwiftUI videos on my YouTube channel, including:

If you want to build SwiftUI apps for various platforms, I have specific books that cover it:

If I’ve missed something off that you’d like me to add, send me a tweet @twostraws and I’ll do my best!

Sponsor Hacking with Swift and reach the world's largest Swift community!