How to use Scroll View in Xcode 5 Storyboards

Wondering how to create, populate and configure a Scroll View inside a View Controller using Storyboards in Xcode 5? This is for you.

Let’s get started.

Step 1

Add a blank View Controller to your storyboard.

Blank View Controller

Step 2

In the Document Outline select the View Controller you just added.

View controller option in document outline

Step 3

In the Document Inspector ensure that Use Auto Layout is checked.

Use Auto Layout option in the Document Inspector

Step 4

Drag a UIScrollView onto the view. In this example, I let it expand to consume the whole View Controller. If you wish, re-size as required.

Scroll View option

Scroll View inside the view controller (consuming full screen)

 Step 5

Add a View that fills the entire UIScrollView.

View option in the object library

View consuming entire scroll view in the View Controller storyboard

Step 6

Stretch the view to extend past the bottom of its parent Scroll View.

Step 7

Add a label to the top of that view inside the View Controller.

Label option in the Object Library

Label placed on the top of the child view (inside the Scroll View)

Step 8

Select the child View in the Document Outline.

Child View inside the Scroll View visible in the Document Outline

Step 9

Vertically expand the view beyond the end if it’s parent Scroll View. Then drag it upwards to expose the bottom half of the view (the bit that will be below the screen in the app which the user will be able to scroll to).

View with the top label (added earlier) out of sight. Only bottom part of scroll visible.

Step 10

Add a label to the bottom of the View.

Label visible at the bottom of the child view, while to label is out of sight

Step 11

Select the View again in the document outline.

Child View selected in the Document Outline

Step 12

Drag the selected Child View back down to expose the top label, hiding the bottom label.

Top of the view visible after dragging the view back up

 Step 13

Select the Scroll View in the document outline.

Scroll View selected inside the Document Outline

Step 14

Select the Pin option (bottom of the storyboard) and add the four horizontal and vertical constraints. Then click the Add 4 Constraints button.

All 4 constraint selected and add 4 constraints button highlighted

Step 15

Select the View object in the Document Outline.

Child View selected inside the Scroll View in the Document Outline

Step 16

Click the Pin button and select all four horizontal and vertical constraints (the bottom vertical constraint value will vary based on how far you expanded the child View controller). Check the Width and Height. In my case it’s lucky number 113, but yours will look different depending on how long you made the view. Take a mental note of this number.

Selected vertical, horizontal, width and height and Add 6 Constraints button

Step 16

Select the Vertical Constraint in the Document Outline that has the same value as the bottom vertical constraint in the previous step.

Vertical Space constraint selected in the Document Outline

Step 17

In the Document Inspector (top right), change the constant to ‘0′.

Constant changed to 0 in the Document Inspector

Step 18

Finally, run your app and test the scrolling, then give me feedback and share this with someone else who might find it useful 🙂

Emulator testing working scroll bar

Thanks for reading, I hope you found this useful. If you want to get notifications of future posts, please join our London App Developer community.