…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…

…should be feeling pretty familiar with all of the built-in Alignments that SwiftUI offers to you. Three HorizontalAlignments and five VerticalAlignments. And in the last last episode, you learned how to tailor them to suit your needs, using alignment guide modifiers. But that’s not the limit…

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…

…first of SwiftUI’s “lazy” views that we’ll be going over are the Stacks. LazyVStacks and LazyHStacks are typically used within ScrollViews…

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…

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…

…finish off, you’ll learn about Alignment, ZStacks, and Geometry Readers. All of these were introduced with the first version of SwiftUI, and work…

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

…children in a line. You use HStacks for horizontal lines, and VStacks for vertical ones. They’re the bread and …peanut butter of SwiftUI layout. In this episode, you’ll learn about the jelly: Alignment! I say that because… it makes all the views inside the stack …jell …together…

Apple has provided. Here we have an Image of Ray Wenderlich himself holding a real-world VStack of our books. Below him, is a SwiftUI VStack, containing an Image and Text View. And those are nested inside another VStack. But not for long! Change that to a ZStack…

…that uses a “ScrollViewProxy” to allow programmatic control over scroll position. But you don’t just give a position as a numeric value. Instead, SwiftUI allows for you to target the scroll to specific points, on specific views. In this exercise, we’ll be programmatically scrolling to a random subgenre…

…have to import the AlignmentExtensions library in your ContentView file. import AlignmentExtensions The next step would be to adopt SingleAxisAlignmentID , which inherits from SwiftUI’s AlignmentID . extension Razémon: SingleAxisAlignmentID { The only extra thing it does is define an Alignment type. typealias Alignment = VerticalAlignment And with that, you can use your…

…adjustments. Usable Twitter profile layout. The main missing thing is “raywenderlich.com” not being a link, but unfortunately that’s not easy to do in SwiftUI. So we’ll leave it for now, and dive deeper into alignment…

With what you know about Stacks in SwiftUI by now, you have access to …gigawatts of power. But there’s one more tool I want to leave you with, that pairs well with Stacks: the GeometryReader. It’s a different sort of container view. Let’s revisit the first project…

Welcome to you final SwiftUI layout challenge! For this one, I got inspired by a DuoLingo app again: this time, it was Tinycards. They key is that it’s got a fun little badge on top of another view. So your challenge is to go from this… …to this…

…using an Alignment value on the Stack itself. For example, here’s the default case of “center” HorizontalAlignment for a VStack. For every view, SwiftUI calculates the halfway point across the horizontal axis. Then, all the views are matched up, based on those “center” Alignment Guides. Combined with stacking tightly…