Configuring UIScrollView with autolayout

As an IOS developer I have seen my colleagues struggle with the use of scrollView more than once. From rather inelegant solutions to finishing touches with a low functionality and over one thousand and one solutions that I wouldn’t recommend either. In this short post I will show you how I do it, in a way that is simple and easy to understand. From here, you can make it as complex as you need.

As an example, we will first create a project:


With the ViewController that we already have on our storyBoard, we will add a UIScrollView:


We will use autolayout to adjust all the constraints to the top view:


Now we will add a UIView (that we will call “Background View”) inside our scrollView. We must have our only ViewController as on the picture below:


We will add constraints to this UIView (that we have previously named “Background View”) to completely adjust it to scrollView:


** Very Important ** We will add a couple more constraints to our “Background View”: “Equal Heights” and “Equal Widths”, with the top UIView of our ViewController:


And we must give a low priority (250) to this equal height constraint that we just added:


Ready! Now we can add as many elements inside our scrollView as we need. They will work as well with all the others. Do not forget to add constraints to each element you add inside scrollView in order to display them exactly how you want.


If you have any further doubts, here is an example that you can follow.


Happy coding! :heart: