Updated Course: Beginning Auto Layout

Learn to use Auto Layout to handle different screen sizes and orientations! This course teaches you basics of using Auto Layout in Interface Builder. By Jessy Catterwaul.

Leave a rating/review
Save for later


Hide contents

As part of our iOS 11 Launch Party, we are releasing a ton of new and updated courses for raywenderlich.com subscribers.

Last week, we released an update to Saving Data in iOS. Today, we’re switching gears and offering you an update to our Beginning Auto Layout course.

This 16-video course will take you through the basics of using Auto Layout. You’ll find an introduction to using stack views, autoresizing, and Auto Layout constraints in Interface Builder.

Let’s have a look at what’s inside.

Part 1: Stack Views

Start off by learning how stack views can help you lay out multiple views in both simple and complex arrangements.

Part 1 - Stack Views

This section contains 9 videos:

  1. Introduction: An introduction to what Auto Layout is and why you need to use it in your apps.
  2. Autoresizing: Autoresizing is the predecessor to Auto Layout. It’s simpler, and sometimes, effective! Dive into the “mask of flexibilities”!
  3. Stack Views: Create your first stack view and learn about some basic properties to adjust the layout.
  4. Challenge: Create Layouts with Stack Views: Use everything you’ve learned about Stack Views so far to recreate a few simple view layouts from reference images.
  5. Intrinsic Content Size: What is Intrinsic Content Size? Find out how Auto Layout uses the intrinsic size of a view to determine layout.
  6. Nesting Stack Views: Stack views inside of stack views! Unlock more power of stack views by nesting them to create complex layouts.
  7. Stack View Alignment and Distribution: Learn about the options for stack view alignment and distribution and how they work to arrange your views.
  8. Challenge: Nesting Stack Views: Practice everything you’ve learned so far about stack views by implementing a complex, nested layout.
  9. Conclusion: Review what you’ve learned in this section and find out what’s coming up next.

Part 2: Constraints

Learn about the basic building block of Auto Layout, the constraint!

Part 2 - Constraints

This section contains 7 videos:

  1. Introduction:  Get a solid introduction to Auto Layout constraints, and find out what you’ll learn in this section.
  2. Adding New Constraints: The Add New Constraints UI in Interface Builder packs a whole lot of Auto Layout power into a compact popup.
  3. Dragging Constraints: Right- or control-click dragging between two views is another great option for creating Auto Layout constraints.
  4. Challenge: Constraints: Convert the type of your stack view constraints, getting practice with Auto Layout while gaining more control over the stack view’s width.
  5. Editing Constraints: This is an overview of the UI that Xcode offers for editing constraints that have already been created.
  6. Troubleshooting: 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!
  7. Conclusion: Review what you’ve learned in this section, and pick up some parting tips for using Auto Layout in your apps.

Where To Go From Here?

Want to check out the course? You can watch the first three videos for free! The rest of the course is for raywenderlich.com subscribers only. Here’s how you can get access:

  • If you are a raywenderlich.com subscriber: The entire 16-part course is complete and available today. You can check out the course here.
  • If you are not a subscriber yet: What are you waiting for? Subscribe now to get access to our updated Beginning Auto Layout course and our entire catalog of over 500 videos.

We’ve still got more planned for the iOS 11 Launch Party, so stay tuned for more new and updated courses to come. I hope you enjoy our course! :]


Over 300 content creators. Join our team.