SwiftUI: Layout & Interfaces

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!

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.

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.

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.