Designing inside a scrollview in xcode 4.2 with storyboards

Question

I have a vertically scrolling uiscrollview - imagine an 'about this app' page of a tab bar app which goes on a bit and requires a scrollview. It only contains a few images, a video and some text (only the video has been coded in - the rest have been placed in the GUI). In storyboard (Interface Builder?) Xcode 4.2, everything is set up as it should be and works fine, but the view is only as large as what you see on the screen, is it not possible to manually arrange in storyboard the items that are initially offscreen - that you need to scroll up to? The only way I've found so far is to design them on the visible view then navigate them down with the arrow keys..

Solution 1

I feel your pain. The only way I found is to manually pan the scroll view in the size inspector to reveal the portion of the view that you wish to visually edit.

Use a UIView to contain elements so they are positioned relatively to this view. Add the view as a subview to the scrollview at 0,0.

1. pan: use the Y coordinate say to -200, then edit the contents.
2. to place more contents in the hidden part, pan again to reveal new real-estate
3. when finished, restore the values of the ScrollView's height and X,Y position.

Make sure the scroll view frame rectangle is smaller than the contained view.

Solution 2

In the storyboard select the viewController, then in Attributes inspector change 'size' to 'freeform'. Then change the 'height' of the view/scroll view to as big as you need. The default settings of struts and springs should take care of resizing the view back correctly when the app is run, but you should double check.

Solution 3

New: 3/26/2013

I stumbled upon what I think is even simpler way of dealing with UIScrollView directly in storyboard.

1. No code needed, just storyboard settings. This maybe new in iOS6.1 / Xcode 4.6
2. No need to disable constraints (i.e. uncheck "Use autolayout" in File Inspector for storyboard file)
3. No need to add UIScrollView* scrollView; in .h
4. No need to add self.scrollView.contentSize = ... in overrides of viewWillAppear or viewDidLoad

Here is what I did (important parts highlighted with **): (see code)

1. Create a new project with storyboard enabled
2. Drop in a UIScrollView, set class in identity inspector for view controller
3. In attributes Inspector, change Size under simulated metrics to Freeform**
4. Select scroll View; In attributes inspector, turn on "scroll enabled" and "background" to "White" (you'll figure out why - if you don't)
5. Under Size Inspector (with scroll view selected) change the height to 900 for example**
6. Add buttons, one on top and one at the bottom
7. Add a default handler for buttonTouchUpInside for both buttons and simply Log sender.

See Code Select the View Controller and scroll view and check inspectors.

Solution 4

Just change the 'Simulated Size' of the view controller to freeform and set a height that is larger than the usual size, you will be able to see all the outlets you need to edit.

Solution 5

On iOS 6.0 you can drag a Container View inside your Scroll View. This will automatically create a new View for your content, outside of the current scene. You can then resize this view as big as needed to fit your content.

I believe you would still have to set the ScrollView content height at runtime, but at least you can design you content view at once without having to scroll up and down on IB.

View more solutions