Contained in: SwiftUI: Layout & Interfaces
Video Course
iOS & Swift
SwiftUI: Layout & Interfaces
Nov 18 2021 · Video Course (1 hr, 41 mins)
Learn the fundamentals of layout in SwiftUI. Lazy Stacks andGrids, Scroll View Readers, Alignment, ZStacks, and GeometryReaders are the main topics.
iOS & Swift
Introduction
Nov 18 2021 · Lesson
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.
iOS & Swift
Lazy Stacks
Nov 18 2021 · Lesson
The first of SwiftUI’s “lazy” views that we’ll be going over are the Stacks. LazyVStacks and LazyHStacks are typically used within ScrollViews.
iOS & Swift
ScrollViewReader
Nov 18 2021 · Lesson
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.
iOS & Swift
Challenge: Nested Scrolling Stacks
Nov 18 2021 · Lesson
Replicate a layout for first scrolling vertically, and then, horizontally, in order to navigate categories and subcategories.
iOS & Swift
Grids
Nov 18 2021 · Lesson
SwiftUI offers two types of grids: LazyHStacks, which expand horizontally, and LazyVStacks, which expand vertically. Grids only come in lazy variants.
iOS & Swift
PinnedScrollableViews
Nov 18 2021 · Lesson
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.
iOS & Swift
Challenge: Grids with Pinned Views
Nov 18 2021 · Lesson
Create a colorful, vertically-scrolling grid-based layout, which resembles the “Search” view from Apple Music.
iOS & Swift
Conclusion
Nov 18 2021 · Lesson
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!
iOS & Swift
Introduction
Nov 18 2021 · Lesson
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.
iOS & Swift
Stack Alignment
Nov 18 2021 · Lesson
Stack alignment occurs perpendicularly to the primary axis of a Stack: use VerticalAlignment for HStacks, and HorizontalAlignment for VStacks.
iOS & Swift
Challenge: Align Nested Stacks
Nov 18 2021 · Lesson
Recreate a section of the profile layout from the Tweetbot Twitter client using Text and Image Views in nested Stacks.
iOS & Swift
Alignment Guides
Nov 18 2021 · Lesson
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!
iOS & Swift
Custom Alignment
Nov 18 2021 · Lesson
When you want to line up guides of particular views, but those views are inside of different stacks, custom alignments are the simplest solution.
iOS & Swift
Challenge: Custom Alignment Guides
Nov 18 2021 · Lesson
Use custom alignment guides to line up specific points of interest in images with guide points of text views. 👀
iOS & Swift
ZStacks
Nov 18 2021 · Lesson
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.
iOS & Swift
GeometryReader
Nov 18 2021 · Lesson
GeometryReader is a container view that doesn’t perform stacking. Instead, its children incorporate information about it by way of the GeometryProxy structure.
iOS & Swift
Challenge: 3-Axis Layout
Nov 18 2021 · Lesson
In this final layout challenge, implement a badge layout that will require thinking in all three axes.
iOS & Swift
Conclusion
Nov 18 2021 · Lesson
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.
