Monthly Archives: December 2015

12.25.15
by

iOS ScrollView in Interface Builder

Here’s how to get ScrollView working when using Interface Builder. This is using Swift 2.1 and XCode version 7.2.

In your storyboard, add a View as the root view for your view controller. To this, add a Scroll View so that the scroll view is a child of the View. To the scroll view, add a View (optionally rename this as Content View) so that the view is a child of the scroll view. You should have something like this:

scrollview image

Select the Scroll View and pin all sides to the superview (the root view). You should have the following constraints:

  • Scroll View
    • Trailing space to: Superview
    • Leading space to: Superview
    • Bottom space to: Bottom layout guide
    • Top space to: Top layout guide

Select the Content View. Create the following constraints:

  • Content View
    • Trailing space to: Superview
    • Leading space to: Superview
    • Top space to: Superview
    • Align Center X to: Superview
    • Bottom space to: Superview, with a constant value of your choice, probably something small like 10.
    • Height equals: <your choice of constant here>

The really important constraint is the height and align center x to superview. Even more important is the bottom to superview constraint on the Content View.

When you look back at the constraints on the scroll view and the root view, you’ll notice know that they have descendant constraints. This is expected, as you’ve added constraints on the children controls.

If you test our your scrolling at this point, you’ll notice that there might be space at the bottom that shouldn’t be there. This is the bottom constraint to the superview on the content view, where we set a constant, 10 (remember, this can be any number, but we just set it to 10). We don’t want that gap as the background of the scroll view might be a different color, so to fix this we set the constant to 0 during viewDidLoad().

If you don’t know already, you can create an entry for the view controller from interface builder by hovering over the bottom space to superview constraint, hold ctrl + mouse click and drag the line over into the line of view controller source code.

ib to view controller

Name the NSLayoutConstraint something like contentViewBottomConstraint.

In viewDidLoad(), add the following line near the bottom:

contentViewBottomConstraint.constant = 0

Run your app and you’ll see that this now closes the gap.

Source: https://www.youtube.com/watch?v=PgeNPRBrB18&feature=youtu.be