how do I use UIScrollView in Interface Builder?

Solution 1:

You forgot to set the contentSize property of the UIScrollView. Strangely enough you can not do this from Interface Builder. You will have to do it from the view controller managing this scroll view.

Solution 2:

Boby_Wan's answer got me thinking, and I found the following solution to configure the UIScrollView's contentSize from Interface Builder:

  1. Select the UIScrollView in the Storyboard scene
  2. Go to the Identity inspector, create a new User Defined Runtime Attribute (click the + button)
  3. Change the attribute Key Path to contentSize
  4. Change the attribute Type to Size
  5. Now set the Value to {desired content width, desired content height}

eg setting the value to {320, 920} will let the user scroll down a whole extra screen on the iPhone.

(I am using xcode 4.3.3, the project's iOS Deployment Target is 5.1)

When I first did this I received the following error:

Illegal Configuration:
     Size type user defined runtime attributes with Xcode versions prior to 4.3
     MainStoryboard.storyboard

If you too get this error it is simple to fix: select the Storyboard in the Project Navigator, and bring up the File inspector. Find/expand the Interface Builder Document section, and there is a drop down for Development. Ensure this is set to Xcode 4.3

Solution 3:

With Autolayout (iOS6+), you can avoid setting contentSize. Set the following constraints instead:

  1. Pin the top of the scrollview to the top of its top-most child.
  2. And pin the bottom to the bottom of its bottom-most child.

Solution 4:

You can do it using only Interface Builder, go to the Identity Inspector (the third inspector tab) and add a new User Defined Runtime attribute with

  • Key Path: contentSize
  • Type: Size
  • Value: {width, height}