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

Answer 1

Many of the answers above are misleading or outdated. As of 2017 (possibly much earlier) interface builder does support scrollviews with automatically sized content. The trick is that XCode gives a special, non-standard meaning to the constraints between the scrollview and the content inside it. These "inward" constraints will not actually affect the size of the content as you might otherwise expect.

This means that you can e.g. have your scrollview pinned to the bottom of the main view with zero margin, and also have your scrollview's content pinned to the bottom of the scrollview with zero margin, but the content will not actually be stretched by this. Instead the content will get its self-determined size (more below) and this will also be the size of the scrollable area within the scrollview.

Think of it like this - There is an asymmetry in binding constraints to a scrollview: Constraints from the scrollview to the "outside" (parent) world determine the size and position of the scrollview as usual. But constraints "inside" the scrollview are really setting the size and position of the scrollable area of the scrollview, by binding it to the content.

This is totally non-obvious because when you go to set the constraints XCode will always suggest the current spacing and it might never occur to you to intentionally change the inward and outward facing constraints in a way that conflicts. But you can and they have the meaning described above: one controls the scrollview layout and one controls the scrollable content area size.

I stumbled upon this by accident and then seeing how it appeared to work lead me to this article that explains it completely and cites the Apple docs source for this:

https://spin.atomicobject.com/2014/03/05/uiscrollview-autolayout-ios/

One last critical piece of information, about the content's self-determined size: You may feel that you are in a catch-22 here because you normally size your content to e.g. the parent view's width, but in this case the parent is the scrollview and as described above - the constraint will not affect your content size. The answer here is to remember that you can constrain items to items not directly neighboring in your view hierarchy: e.g. You can set the width of your content view to the width of the main view instead of trying in vain to get the scrollview to do it for you.

Answer 2

Just remove the autoLayout on your scrollview. then the code is as simple as this:

scrollviewName.contentSize = CGSizeMake(0, 650);

just create an iboulet property on .h file then synthesize on .m file. Make sure that the scrolling is enabled.

Answer 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.

Answer 4

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.

Answer 5

Here's a solution to design ScrollView with a content larger than the screen entirely in Storyboard (well, almost entirely, you'll need to add 1 single line of code too)

https://stackoverflow.com/a/19476991/1869369

Answer 6

In Xcode 4.5 using Autolayout I have no Content Insets section in my size inspector. So I had to add it under User Defined Runtime Attributes and then it worked fine.

What you add in "User Defined Runtime Attributes" is keyPath == contentInset which is of type "Rect" (UIEdgeInsets, which has the same input as a Rect) and is defined as {top, left},{bottom, right}. The contentSize only defines the region of the scrollview window. contentInset defines the scrollable area.

I hope this helps somebody in the same situation.