UIKit: Layout

Learn the basics of creating layouts that handle different screen sizes and orientations, using Auto Layout's Stack Views and Constraints, in Interface Builder. By Catie Catterwaul & Jessy Catterwaul.

Leave a rating/review
Download materials
Save for later
Comments
Share

Learning path

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

Who is this for?

This course is part of our iOS User Interfaces with UIKit 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 UIKit-based app.

The basics of Auto Layout in UIKit, UIStackView and constraints, are covered here. You'll also come to understand Auto Layout's simple predecessor, Autoresizing.

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 advanced developers. If that’s you, check out our advanced video courses for more ways to level-up your developer skills!

Covered concepts

  • UIKit Stack Views
  • Interface Builder
  • Intrinsic Content Size
  • Auto Layout Constraints
  • Autoresizing

Part 1: Stack Views

01
Toggle description

Welcome to the course! Get an introduction to what Auto Layout is and why you need to use it in your apps.

02
Toggle description

Autoresizing (a “mask of flexibilities”) is the predecessor to Auto Layout. It’s simpler, and occasionally, for prototyping, effective.

Toggle description

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.

Toggle description

What is Intrinsic Content Size? Find out how Auto Layout uses the intrinsic size of a view to determine layout.

Toggle description

Stack views inside of stack views! Unlock more power of stack views by nesting them to create complex layouts.

Toggle description

Learn about the options for stack view alignment and distribution and how they work to arrange your views.

Toggle description

Practice everything you’ve learned so far about stack views by implementing a complex, nested layout.

Conclusion 0:26
Toggle description

Review what you’ve learned in this section and find out what’s coming up next.

Part 2: Constraints

Toggle description

Get a solid introduction to Auto Layout constraints, and find out what you’ll learn in this section.

Toggle description

The Add New Constraints UI in Interface Builder packs a whole lot of Auto Layout power into a compact popup.

Toggle description

Right- or control-click dragging between two views is another great option for creating Auto Layout constraints.

Toggle description

Convert the type of your stack view constraints, getting practice with Auto Layout while gaining more control over the stack view’s width.

Toggle description

This is an overview of the UI that Xcode offers for editing constraints that have already been created.

Toggle description

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!

Conclusion 1:55
Toggle description

Review what you’ve learned in this part, and pick up some parting tips for using Auto Layout in your apps.

Up next

iOS & Swift
Table Views
Learn all about table views: one of the most common tools in iOS development. Display and manipulate data ... more

Instructors

Catie Catterwaul

Contributors

Catie Catterwaul

Instructor

Andrea Lepley

Editor

Adriana Kutenko

Illustrator

Over 300 content creators. Join our team.