SwiftUI: Layout & Interfaces
Learn the fundamentals of layout in SwiftUI, including Lazy Stacks and Grids, Scroll View Readers, Alignment, ZStacks, and GeometryReaders. By Jessy Catterwaul.
Who is this for?
This course is part of our iOS User Interfaces with SwiftUI learning path. You're ready for this course if you're working through that learning path in order, or you're someone who has a bit of iOS and Swift experience: enough to know the basics of putting views onscreen in a SwiftUI-based app.
The first part of the course is all-new for iOS 14. You'll be working a lot with scroll views, and lazy views: both stacks, and grids.
In the second part, you'll start working with Alignments, which are key to making the most out of Stacks. You'll learn how to use built-in alignment guides, and create your own custom ones. The course will conclude with the ZStack and GeometryReader structures.
Throughout the course, you'll practice everything you learn with hands-on challenges, recreating the kind of layouts you'll find in user interfaces from popular iOS apps.
This course isn’t suited for advanced developers. If that’s you, check out our advanced video courses for more ways to level-up your developer skills!
- Headers and Footers
- Stack Alignment
- alignmentGuide Modifier
- AlignmentID Protocol
- GeometryReader + GeometryProxy
Part 1: Dynamic View Layout
Learn the fundamentals of layout in SwiftUI! In this first part of the course, you'll be working with scroll views, and lazy views: both stacks, and grids.
The first of SwiftUI's "lazy" views that we'll be going over are the Stacks. LazyVStacks and LazyHStacks are typically used within ScrollViews.
To avoid spending a lot of time scrolling to a child of a massive scroll view, use a ScrollViewReader. Its proxy allows control over scroll position.
Replicate a layout for first scrolling vertically, and then, horizontally, in order to navigate categories and subcategories.
SwiftUI offers two types of grids: LazyHStacks, which expand horizontally, and LazyVStacks, which expand vertically. Grids only come in lazy variants.
SwiftUI's Section View is used for adding headers and footers to views. You have the option of pinning headers and footers to your views.
Create a colorful, vertically-scrolling grid-based layout, which resembles the "Search" view from Apple Music.
Lazy views have made it practical to use SwiftUI for much larger data sets than before. So go fill up those views with giant collections!
Part 2: Aligning Views
In this part of the course, you'll learn about Alignment, ZStacks, and Geometry Readers. All of these were introduced with the first version of SwiftUI, and work in iOS 13.
Stack alignment occurs perpendicularly to the primary axis of a Stack: use VerticalAlignment for HStacks, and HorizontalAlignment for VStacks.
Recreate a section of the profile layout from the Tweetbot Twitter client using Text and Image Views in nested Stacks.
Stacks use Alignment Guides to match up each of their children based on a point along their perpendicular axis. If the defaults don't cut it, supply your own!
When you want to line up guides of particular views, but those views are inside of different stacks, custom alignments are the simplest solution.
Use custom alignment guides to line up specific points of interest in images with guide points of text views.
Now that you've mastered the first two dimensions, it's time to tackle the third! ZStacks have much in common with the HStacks and VStacks you know and love.
GeometryReader is a container view that doesn't perform stacking. Instead, its children incorporate information about it by way of the GeometryProxy structure.
In this final layout challenge, implement a badge layout that will require thinking in all three axes.
Congrats on finishing the course! Get some recommendations on where to go for more SwiftUI layout learning.