Note: I have written a more up-to-date article on using scrollview in Interface builder / Storyboard for Xcode 11 here : https://fluffy.es/scrollview-storyboard-xcode-11/ , please proceed to this article instead.
You probably googled "How to use UIScrollView with AutoLayout" and clicked the link to this post after failed multiple attempts on making scroll view behave correctly in Interface builder. Its really quite frustrating when Xcode won't stop complaining to you that constraints are ambiguous / unsatisfiable , we will take a look on how to solve this.
At the end of this post, you will be able to design UIScrollView and its child element as below :
Step 1 : Put a scroll view into the view controller and set constraints
Assuming you have a blank view controller, drag a Scroll View into the view controller and set its constraint to parent (top, bottom, leading, trailling) to (0,0,0,0) . This will pin the four side of scroll view to the parent view.
Step 2 : Put a view inside the scroll view and set constraints
Put a view inside the scroll view and set the view constraint against the scroll view (top, bottom, leading, trailling) to (0,0,0,0). We don't put element (eg: Label, imageview, textfield) directly inside scroll view but uses a UIView that serve as a container as it will be easier to add/remove element afterwards.
You might see red lines stating the layout is ambiguous, we will solve that by making two new constraint. The reason Xcode is complaining is that it doesn't know the width and height of the view, although in runtime it might render still fine, nevertheless we will still add these constraint to remove the warning.
Ctrl + Drag from the view inside the scroll view to the parent view of scroll view, like this :
Then select Equal Width.
Next, we will explicitly define a height for the view inside scroll view. For demonstration purpose, we will set to 1000. You can adjust this to any number you like.
Xcode should have no complain about layout issue now, yay!
Step 3 : Elongate view controller size
Select the view controller and open the size inspector. Change the Simulated Size to freeform, then for the height type in 1000 to match the size of the view earlier.
Now you have an elongated view controller and can start place element inside the view of scrollview!
Step 4 : Cater for dynamic content such as text
What if the text for the label is dynamically fetched from HTTP API? How can I have a dynamic height for the view inside of the scroll view?
First, remove the explicit height constraint for the view inside scroll view.
Then select the label and set lines number to zero so the label will expand based on the text. Remember to set the leading/trailing space of the label to its parent as well else Xcode doesn't know the width of the label and will keep expanding the text in 1 line (which will be outside the screen so you can't see it).
Following the guide below, set the space between the first element and the top of its container view and also the space between last element and the bottom of its container view. Vertical space between each element must be set as well so that iOS can calculate the height of the container view (the view inside the scroll view) dynamically at runtime and present it nicely inside the UIScrollView.
The gist of dynamic height scroll view is that the vertical spacing between each element and also the parent view must be defined so that iOS layout system can calculate its height at runtime.
After placing vertical constraints for each of the elements inside the container view, you can safely remove the explicit height constraint (1000pt) we defined in Step 2.
Happy designing in interface builder!
