HStack, VStack, ZStack, Spacer, GeometryReader, and more
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.
SAVE 50% To celebrate Black Friday, all our books and bundles are half price, so you can take your Swift knowledge further without spending big! Get the Swift Power Pack to build your iOS career faster, get the Swift Platform Pack to builds apps for macOS, watchOS, and beyond, or get the Swift Plus Pack to learn advanced design patterns, testing skills, and more.
Sponsor Hacking with Swift and reach the world's largest Swift community!
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.
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.
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.
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.
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
I have a whole range of tutorials available to help you make the most of SwiftUI:
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!
SAVE 50% To celebrate Black Friday, all our books and bundles are half price, so you can take your Swift knowledge further without spending big! Get the Swift Power Pack to build your iOS career faster, get the Swift Platform Pack to builds apps for macOS, watchOS, and beyond, or get the Swift Plus Pack to learn advanced design patterns, testing skills, and more.
Sponsor Hacking with Swift and reach the world's largest Swift community!
Link copied to your pasteboard.