UIScrollView autolayout on a storyboard. A step-by-step guide.

Luis Machado
Jul 21, 2017 · 3 min read

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.


  1. 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.
Top, Bottom, Left and Right Constraints (regarding the main view)

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.

Top, Bottom, Left and Right Constraints (regarding the scrollview)
Equal Widths and Heights (regarding 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.

Allows a vertical scroll.
Allows a horizontal scroll.

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

Vertical Layout component example (1/2)
Vertical Layout component example (2/2)

5b) Horizontal ScrollView — Component setup example

Horizontal Layout component example (1/2)
Horizontal Layout component example (2/2)

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 :)

)
Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade