Layout in iOS
SwiftUI and UIKit have different systems for layout. You'll learn about both in this course! For SwiftUI, that means Stacks and Alignment. For Auto Layout, it's Stack Views and Constraints, in Interface Builder. By Catie Catterwaul & Jessy Catterwaul.
Who is this for?
This course is in our iOS and Swift for Beginners 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- or UIKit-based app.
The first part of the course is all SwiftUI. To begin with, 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 SwiftUI material concludes with the ZStack and GeometryReader structures.
The other two parts of the course cover the basics of Auto Layout in UIKit: UIStackView and constraints. Auto Layout's simple predecessor, Autoresizing, is also covered.
Throughout the course, you'll practice everything you learn with hands-on challenges, recreating the kind of scalable layouts you'll find in popular iOS apps.
This course isn’t suited for intermediate or advanced developers. If that’s you, check out our intermediate or advanced video courses for more ways to level-up your developer skills!
Covered concepts
- SwiftUI Stacks
- Stack Alignment
- alignmentGuide Modifier
- AlignmentID Protocol
- GeometryReader + GeometryProxy
- UIKit Stack Views
- Interface Builder
- Intrinsic Content Size
- Auto Layout Constraints
- Autoresizing
Part 1: Layout in SwiftUI
This course is for learning the fundamentals of layout in SwiftUI and UIKit. Here, we'll go over what you'll learn for SwiftUI. For UIKit, head to Part 2.
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 SwiftUI layout challenge, implement a badge layout that requires thinking in all three axes.
Get some recommendations on where to go for more SwiftUI layout learning. Then go over the similarity in SwiftUI's and UIKit's layout systems.
Part 2: Stack Views
An introduction to what Auto Layout is and why you need to use it in your apps.
Autoresizing is the predecessor to Auto Layout. It’s simpler, and sometimes, effective! Dive into the “mask of flexibilities”!
Create your first stack view and learn about some basic properties to adjust the layout.
Use everything you’ve learned about Stack Views so far to recreate a few simple view layouts from reference images.
What is Intrinsic Content Size? Find out how Auto Layout uses the intrinsic size of a view to determine layout.
Stack views inside of stack views! Unlock more power of stack views by nesting them to create complex layouts.
Learn about the options for stack view alignment and distribution and how they work to arrange your views.
Practice everything you’ve learned so far about stack views by implementing a complex, nested layout.
Review what you’ve learned in this section and find out what’s coming up next.
Part 3: Constraints
Get a solid introduction to Auto Layout constraints, and find out what you’ll learn in this section.
The Add New Constraints UI in Interface Builder packs a whole lot of Auto Layout power into a compact popup.
Right- or control-click dragging between two views is another great option for creating Auto Layout constraints.
Convert the type of your stack view constraints, getting practice with Auto Layout while gaining more control over the stack view’s width.
This is an overview of the UI that Xcode offers for editing constraints that have already been created.
Just like with Swift, you’ll get into temporary, problematic states when working in Interface Builder, before your constraints are ready. Let’s solve a few!
Review what you’ve learned in this section, and pick up some parting tips for using Auto Layout in your apps.