The right way to enable Scrollable content in a UIScrollView with Storyboards and autolayout

So you want to have a view controller with some content, where the content height may be larger than the screen size? Naturally, you want to be able to put this into a UIScrollView and give the user the ability to scroll through this content if it is too large.

This is a task I have struggled with for a long time. It sounds so simple- but UGH, headache after headache. Ambiguous height and width errors and conflicting constraints galore.

I’ve read tons of answers online, which usually require you to calculate and set a fixed height, either in Interface Builder or even worse, in code. See these: http://stackoverflow.com/questions/12905568/how-do-i-use-uiscrollview-in-storyboard

But these solutions aren’t the right way to do it. We should be able to use the power of autolayout and design these screens in interface builder without having to code anything or fix our content size.

Alas! I have figured out this mystery.

Here’s what I did:

1. In storyboard, add a UIViewController.

2. Select the new UIViewController and under Simulated Metrics, set its size to FreeForm. Go to Measurements pane and set its simulated size to FreeForm and the Height to 1000 or however tall you want the view to be.

3. To the root View of your UIViewController, drag and drop a new UIScrollView.

4. Layout the scrollview to fill the contents of the entire root view.

5. Now set our scrollview constraints: Add constraints from the scrollview to snap it to the Top, Bottom, Right and Left of your root view.

6. Now add a width constraint to the scroll view, for whatever the width is. Now the IMPORTANT step, select and edit this new constraint from the measurements tab and lower its priority to 999 or 750, or anything but required.

7. Your Scroll view is now set up. It is important to understand that since we have not set a fixed height or a required fixed width. This means that for your ScrollView to determine its content size, it must be able to compute it. It can only do that if you add at least one chain of constraints from the left side of the scroll view to the right side, and from the top of the scrollView to the bottom. If you see an ambiguous width or height constraint error after you add an element to your new scroll view, this is what your problem is!

8. To illustrate our above point and to add some scrollable content, do the following: add a new UIView to the top of our UIScrollView. Set its background color to yellow or something so you can see it.

9. Set a chain of constraints from the left to right of the scroll view. Do that by selecting your new Yellow UIView and adding a left space constraint from the left of the scrollview to the left of the yellow view and from the right of the scrollview to the right of the yellow view. Now add a position constraint to the yellow view and select it to Horizontally Centered in its parent scrollview.

10. Last, add a chain of constraints from the top to the bottom of the scrollview so it can calculate the content height. Start by adding a Height constraint to the Yellow view. Make it 200 pixels or so. Add a space constraint from the yellow view to the top of the scroll view, and one from the bottom of the yellow view to the bottom of the scroll view. Make the bottom space constraint something large, like 1000px so that you can have a nice 1200px large content size to illustrate scrolling.

And we’re done! Now you can add more elements to your scroll view in the story board just as you’d expect and the user can scroll with ease.

This has been tested on iOS 9+ with Xcode 7.3 (the most recent as of 5/5/16).