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.

Leave a rating/review
Download materials
Save for later

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!

Covered concepts

  • Stacks
  • Grids
  • Headers and Footers
  • Stack Alignment
  • alignmentGuide Modifier
  • AlignmentID Protocol
  • GeometryReader + GeometryProxy

Part 1: Dynamic View Layout

Toggle description

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.

Toggle description

The first of SwiftUI's "lazy" views that we'll be going over are the Stacks. LazyVStacks and LazyHStacks are typically used within ScrollViews.

Toggle description

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.

Toggle description

Replicate a layout for first scrolling vertically, and then, horizontally, in order to navigate categories and subcategories.

Grids 4:53
Toggle description

SwiftUI offers two types of grids: LazyHStacks, which expand horizontally, and LazyVStacks, which expand vertically. Grids only come in lazy variants.

Toggle description

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.

Toggle description

Create a colorful, vertically-scrolling grid-based layout, which resembles the "Search" view from Apple Music.

Conclusion 0:25
Toggle description

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

Toggle description

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.

Toggle description

Stack alignment occurs perpendicularly to the primary axis of a Stack: use VerticalAlignment for HStacks, and HorizontalAlignment for VStacks.

Toggle description

Recreate a section of the profile layout from the Tweetbot Twitter client using Text and Image Views in nested Stacks.

Toggle description

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!

Toggle description

When you want to line up guides of particular views, but those views are inside of different stacks, custom alignments are the simplest solution.

Toggle description

Use custom alignment guides to line up specific points of interest in images with guide points of text views.

ZStacks 8:59
Toggle description

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.

Toggle description

GeometryReader is a container view that doesn't perform stacking. Instead, its children incorporate information about it by way of the GeometryProxy structure.

Toggle description

In this final layout challenge, implement a badge layout that will require thinking in all three axes.

Conclusion 1:14
Toggle description

Congrats on finishing the course! Get some recommendations on where to go for more SwiftUI layout learning.