Applying Auto-Layout to a UIScrollView in Interface Builder

Furqan Khan

Jun 9, 2020·1 min read

I always forget how to properly add a UIScrollView to the root view of a view controller in Interface Builder. Since, I have a poor memory, this article is a note for myself and other people who want to remind themselves how to do it.

Steps

Note: The names of objects in italics are the same ones as those used in the picture below for easy reference.

1. Add a UIScrollView (Scroll View) to the Root View.
2. Align trailing and leading constraints to the Safe Area.
3. Align Scroll View’s bottom and top to Root View.
4. Add a UIView (we’ll call it the Content View) to the scroll view as a subview.
5. Align trailing, leading, top and bottom constraints of Content Layout Guide to Content View.
6. Constraint Frame Layout Guide’s height and width to the Content View.
7. Decrease the priority of the Frame Layout Guide ← equal heights → Content View to 250.

Here’s how the document outline should look like in your IB: