,

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
Blank View Controller

Step 2

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

View Controller option in document outline
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
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 option
Scroll View added to View Controller
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 option in the object library
View inside Scroll View
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 option in the Object Library
Label on top of child View
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
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 top label hidden
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 added to the bottom of the child 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 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 View visible
Top of the view visible after dragging the view back up

 Step 13

Select the Scroll View in the document outline.

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
All 4 constraint selected and add 4 constraints button highlighted

Step 15

Select the View object in the Document Outline.

Child view option inside the Scroll View
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.

Adding vertical and horizontal, width and height constraints
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
Vertical Space constraint selected in the Document Outline

Step 17

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

Attributes in the document inspector
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
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.

3 Responses

  1. Thanks a lot……
    it’s very usefull for me.Please post some of the ios concepts step by step.Once again thank you….

  2. Thank you so much. it helps a lot for beginners like me.

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: