How to use UIScrollView in Storyboard

Question

I have a scroll view with content that is 1000px tall and would like to be able to lay it out for easy design on the storyboard.
I know it can be done programmatically but I really want to be able to see it visually. Every time I put a scroll view on a view controller it won't scroll. Is it possible to get it to work like I want or do I have to do it in the code?

Answer 1

Getting Scrolling to work in iOS7 and Auto-layout in iOS 7 and XCode 5.

In addition to this: https://stackoverflow.com/a/22489795/1553014

Apparently, all we need to do is:

1. Set all constraints to Scroll View (i.e. fix scroll view first)

2. Then set distance-from-scrollView constraint to the bottom most item to scroll view (which is the super view).

Note: Step 2 will tell storyboard where the last piece of content lies within Scroll view.

Answer 2

You should only set the contentSize property on the viewDidAppear, like this sample:

- (void)viewDidAppear:(BOOL)animated{

     [super viewDidAppear:animated];
     self.scrollView.contentSize=CGSizeMake(306,400.0);

}

It solve the autolayout problems, and works fine on iOS7.

Answer 3

i wanna put my 5 cents to accepted answer: i've been researching topic for 2 days and finally found a solution that i will be using always from now on

go up to item 4 in accepted answer and forget about adding attributes of frames and contentsizes and so on

to make everything automatic just use solution from this link

everything is clear, easy, elegant and works like a charm on ios 7. i'm pretty glad with all that lol

Answer 4

In iOS7 I found that if I had a View inside a UIScrollView on a FreeForm-sized ViewController it would not scroll in the app, no matter what I did. I played around and found the following seemed to work, which uses no FreeForms:

1. Insert a UIScrollView inside the main View of a ViewController

2. Set the Autolayout constraints on the ScrollView as appropriate. For me I used 0 to Top Layout guide and 0 to Bottom layout Guide

3. Inside the ScrollView, place a Container View. Set its height to whatever you want (e.g. 1000)

4. Add a Height constraint (1000) to the Container so it doesn't resize. The bottom will be past the end of the form.

5. Add the line [self.scrollView setContentSize:CGSizeMake(320, 1000)]; to the ViewController that contains the scrollView (which you've hooked up as a IBOutlet)

The ViewController (automatically added) that is associated with the Container will have the desired height (1000) in Interface Builder and will also scroll properly in the original view controller. You can now use the container's ViewController to layout your controls.

Answer 5

Apparently you don't need to specify height at all! Which is great if it changes for some reason (you resize components or change font sizes).

I just followed this tutorial and everything worked: http://natashatherobot.com/ios-autolayout-scrollview/

(Side note: There is no need to implement viewDidLayoutSubviews unless you want to center the view, so the list of steps is even shorter).

Hope that helps!

Answer 6

If you are using auto-layout than best approach is to use UITableViewController with static cells in storyboard.

I have also once faced the problem with a view that require much more scrolling so change the UIScrollView with above mentioned technique.