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

Yes, st3fan is right, UIScrollView's contentSize property must be set. But you should not turn off autolayout for this purpose. You easily can setup contentSize of UIScrollView with autolayout in IB only, without any code.

It is important to understand that when using autolayout contentSize of UIScrollView is not set directly, it is calculated based on constraints of all subviews of UIScrollView. And all you need is to provide proper constraints for subviews for both directions.

E.g. if you have only one subview you can set its height and space from top and bottom to superview (i.e. scrollView in our case) contentSize.height is calculated as sum

Vertical Space (aSubview.top to Superview.top) + aSubview.height + Vertical Space (aSubview.top to Superview.top)

contentSize.width is calculated similarly from horizontal constraints.

If there too few constraints to calculate contentSize properly small red button is shown near View Controller Scene item to inform about layout ambiguity.

If there are many subviews then it may be "chain" of constraints: top to topmost subview, heights and spaces between subviews and bottommost subview to bottom like in Danyal Aytekin answer.

But in practice in most cases it is more convenient just to add a empty view with required size and set spaces to top, left, bottom, right of scrollView to 0. You can use this view as "content View" i.e. put all other subviews on it or if you already have many subviews and do not want move them and setup layout again you can add this auxiliary view to existing subviews and made it hidden.

To make scrollView scrollable calculated contentSize must be greater than scrollView size.

Answer 2

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}

Answer 3

Create a new Xcode Project

Navigate to Main.storyboard file

Select ScrollView from the objects library.

Set frame for the ScrollView.

Add another view to scroll view and keep the frame same as that of ScrollView.

Now to set its height and width dynamically you may this Configure A UIScrollView Using Auto Layout In XIB

Answer 4

If you click on the Properties icon of any View Controller in Interface Builder, you can set it to a "Freeform" size in Simulated Metrics and change the size of the main View to be your desired content size.

This way you can create your ScrollView's content as if it were one large view. As it's only a simulated metric your View Controller will be resized to the window's bounds when it's loaded.

Answer 5

1. Add UIViewController
2. In UIViewController 'Attribute Inspector -> Simulated Metrics' set size Freeform
3. In UIViewController 'Size Inspector -> View Controller' set height 800
4. Add UIScrollView in UIViewController
5. Add all constraints to UIScrollView (top, left, right, bottom) and add alignment X = center
6. Add UIView in UIScrollView
7. Add all constraints to UIView (top, left, right, bottom) and add alignment X = center. Yes, same as for UIScrollView in #3, but for UIView
8. Add height constraint to UIView. For example 780
9. Run