SwiftUI: Layout & Interfaces

Learn the fundamentals of layout in SwiftUI. Lazy Stacks andGrids, Scroll View Readers, Alignment, ZStacks, and GeometryReaders are the main topics. By Jessy Catterwaul.

3.3 (4) · 2 Reviews

Download materials
Save for later
Comments
Share

Learning path

This is part of the iOS User Interfaces with SwiftUI learning path. View path.

Who is this for?

This course comes after SwiftUI: Fundamentals in 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.

Moving on from Alignment, 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

01
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:54
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:26
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

To finish off, 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 9:00
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

Get some recommendations on where to go for more SwiftUI layout learning. Next up in the iOS User Interfaces with SwiftUI learning path is SwiftUI: Animation.

Up next

iOS & Swift
SwiftUI: Animation
In this course, we’re going to get you started animating all sorts of SwiftUI views. Why should you add animation to your apps? Well, animation is a brilliant way to wow your users, and make your app look and feel unique. Practically speaking, animation can grab a user’s attention, and allow them to focus on what’s most important. It can help your users intuitively understand how to navigate your app or alert them to important changes.

Instructors

Contributors

Adriana Kutenko

Illustrator

Edith Hermann

Video Editor

Christine Sweigart

Video Editor

Over 300 content creators. Join our team.