UIScrollView autolayout on a storyboard. A step-by-step guide.
UIScrollViews are an essential part of iOS development as a way to gracefully display content that otherwise would not fit in the screen.
Making use of its autolayout properties, however, may prove to be a confusing task to many of us due to the fact that the normal patterns to define the autolayout constraints will not be applied here.
I decided then, to make a simple step-by-step tutorial (you can also find a video in the end) that, hopefully, will enable to create a scrollview with ease.
- We start by adding a UIScrollView to the main view (which could be the entire view or some other, small view, that you have. Either way, from now on I'll refer to that as the 'main view') and add top, bottom, left and right constraints.

2. After that, we add a UIView inside the UIScrollView (this view is an essential step to have the autolayout working correctly). I called it 'Content View' and added top, bottom, left and right constraints in regard with the scroll view. Besides that, I also added equal heights and widths with regard to the main view.


3. The next step depends if you want to have either a vertical or a horizontal scroll. If you need a vertical scroll you'll need to set the 'Equal Heights Constraint' priority to 250. On the other hand, if a horizontal scroll is what you search for you'll have to set the 'Equal Widths Constraint' priority to 250.


4. The scroll view is now all set-up and ready to go! You can now start to add you content but you need to keep in mind that the 'Content View’ height can't be ambiguous. This means that each view that you had has to have an height constraint defined (height equals to X or less or equal to X) and that all the components (or at least you should have a continuous line of components from top to bottom) must have vertical spacing defined between themselves.
Furthermore, the top-most and bottom-most components must have a top spacing and a bottom spacing, respectively, to the 'Content View’.
(if you're implementing a horizontal scroll you should read 'width' were I wrote 'height', 'horizontal spacing' instead of 'vertical spacing' and 'left-most'/'right-most' in place of 'top-most' and 'bottom-most'
5a) Vertical ScrollView — Component setup example


5b) Horizontal ScrollView — Component setup example


Using this method you'll also be able to support multiple device orientations as autolayout will work correctly in both orientations!
Hope this guide helps you! If you have any question or suggestion feel free to comment down below!
Thank you for reading this :)
