It’s sometime a pain when we are working with UIScrollView and Storyboard together.

<Swift Tutorial>

When UIScrollView meets UIStoryboard.

I was working on a project which face a situation :

  • UIView contains several UITextFields which exceeds the screen size on some devices ( i.e. iPhone 5, 5s, etc… )
  • Subview(s)’ size embedded inside a content view are dynamic, in which might or might not be exceeding the screen size
  • I don’t want to manually adding subviews, calculating contentSize … …
  • Life is easier when EVERYTHING can be done inside the Storyboard.

Embedding all stuffs in a single UIScrollView?

Yes. It works somehow. But need a little tricks when setting things up.


Example example example …

Interface builder scene before adding any auto-layout constraints.

The UIView in pink exceeds the boundaries of interface builder scene. First of all, we are going to wrap all views into one single content view.

Step 1 : Select all subviews → Embed In → View
Name is as ‘Content View’ for better understanding (Optional)

Step 2 : Select Content View → Editor → Embed In → Scroll View

We should have the following result. No worry about the red lines, we are going to fix at in a minute. Let’s adjust the red boundaries to fit into View Controller Scene’s boundary.

The dirty Red boundary
Adjust the size of Scroll View so that it just fits the scene size

Step 3 : Set up auto-layout constraints
Scroll View’s auto-layout constraints
Add constraints …
Ctrl-Drag the Content View to the base View
  1. All boundaries to Zero.
  2. Uncheck constrain to margins
Add constraints …
  1. Equal Width
  2. Equal Height
Content View’s Equal Height to base View
Change the priority of Equal Height to 250

So that the height constraint become dotted-line.

Content View’s auto-layout constraints
Add constraints
  1. All boundaries to Zero
  2. Uncheck constrains to margins
  3. Constrain to Scroll View

Now that there should be NO red lines on the scene 👏


🏃 Half Way Through ~ Here’s the Magic

Step 4 : Set up subviews’ constraints under Content View as usual
EXCEPT THE BOTTOMMOST VIEW

Now we can just work as usual — Set the corresponding auto-layout constraints. Remember just leave the bottommost unset, we will work on it later. For fixed height views, it is necessary to set the height constraints for each views too. Here we set all grids with a fixed height of 250 pts.

Final Step : Setup auto-layout constraints for the bottommost view

The reason why we leave the bottommost view here because we gonna do some tricks here.

bottommost view’s layout constraints
Add constraints …
  1. Adjust the boundaries to your needs.
  2. Remember the Height
Top Space constraints of the bottommost view
Select Top Space Constraint
  1. Change the Relation from
    Equal → Greater Than or Equal
  2. Change the Constant → Use Standard Value

Let’s build and run


It works like a charm ~

Kindly follow Lerry R. if you love this tutorial.

Leave your comment below if you are looking for any kind of tricks or tutorials you’d love you see : )