how do I use UIScrollView in Interface Builder?

Question

While I've used UIScrollView successfully in the past by manipulating it programmatically, I'm having trouble getting it to work by setting it up exclusively in Interface Builder.

I have a simple "about" page in my iPhone app. It has a UITextView, some icons, and links to my other apps. I have added all of these views to my UIScrollView, arranging them so that their total size is > 480. When I launch my app, the scrollview displays only the contents that fit on the screen, and nothing scrolls.

Is it possible to do this entirely via IB, or must I manipulate the contentSize via code?

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}

Solution 5

Now there is a way to make a UIScrollView scroll without leaving Storyboard:

1. Select the UIScrollView in the Storyboard, go to the Size inspector and change the Bottom value (or whatever other value you need to change) in the Content Insets section to the height of the content area.
2. Now go to the Identity inspector and create a new User Defined Runtime Attribute (by clicking the + button) and name it contentSize. It doesn't matter what Type or Value you fill in (you can even leave their default value).

This will make the UIScrollView work properly, although I don't know why the second step is necessary (I found out by chance). :(

View more solutions

Comments

[Marco Mustapic]

That's right. It always seemed strange to me why they didn't add this capability to IB.

[George Armhold]

Wow, kind of makes IB rather, pointless... This did the trick, thanks.

[Drew C]

That's the best piece of advice I've received in a while. I could not figure out why my scroll view didn't work, and didn't find that info about contentSize anywhere else. Thanks.

[Gareth Davis]

nice...just lost an hour to that little gem.

[zakdances]

Change the Bottom value to what?

[Adam]

Awesome find! PS: I'm stunned that this is the best Apple could do. I guess this shows that even Apple staff never use their own tool (interface builder) :).

[jiy]

Thanks - this worked well. Also need to declare IBOutlets in YourViewController.h for the placeholder and scroll views, and connect them in Interface Builder. And lastly, dot.notation wasn't appreciated by xCode for the 3rd line, so used normal message send syntax - then everything worked great!

[unsynchronized]

no worries. there is always a danger when posting code snippets that some people can't use them to get the concept, rather than expecting the "exact" code to work in every situation.

[Reid Ellis]

Change it to the height of the content area. It seems to work, and overrides the value you supply for the user-defined "contentSize" attribute.

[nlogax]

I was trying to figure out how to set contentSize in Interface Builder, and found this discussion. At least for me, in Xcode 4.5, I can set it using “User Defined Runtime Attributes”, by adding an entry named contentSize of type Size, and setting the desired value.

[Robert Atkins]

Brilliant, this has just worked for me in Xcode 4.4. But now how do I put buttons on the part of the scroll view I cannot "see" in IB?

[Robert Atkins]

I just worked it out–you have to release the drag when the pointer is still inside the "screen", otherwise it'll snap back to when you started from. What a pain.

[user4951]

This is the method I actually use. I don't even need to resize this program at all. I think it's the way it's intended to be done. It's the one true answer.

[user4951]

After drawing it outside, I'll just move it to super view. Tada.

[MusiGenesis]

So annoying: to add to ways in which IB doesn't support the UIScrollView very well, you can set the background color for the scroll view in IB, but the IB designer doesn't show that color. The color only shows up at runtime.

[SoftSan]

I tried it that way, but i am getting an error "this class is not key value coding-compliant for the key keyPath" can you please help me what am i doing wrong? please note that i use xamarin-ios-c#

[aroth]

I'm still baffled with respect to why iOS doesn't just automatically set the contentSize of a scroll-view based upon the dimensions of its subviews, at least as the default behavior.

[colincameron]

Thank you - setting contentSize doesn't work with Xcode 5 and iOS 7

[Dima Deplov]

For UITextView use "textContainerInset" keyPath

[RoberRM]

Yes, Reid, you are right: you should change the Bottom value to the height of the content area. I've edited my original post to reflect this. Thank you!

[Duck]

How crappy can Xcode be? I use Xcode since 2008. I cannot mention a single thing where Xcode is good. They should refrain from calling that thing "interface builder". It has nothing to do with interface. It is more like a sketch or draft. Xcode is negative infinite stars on my rating system. Thanks Apple for hating developers.

[Benjamin]

I actually started using designing some views outside of a scene for scratchpads and such it makes life a lot easier in some situations even unrelated to this one. Thanks for this answer.