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

Here are the steps with Auto Layout that worked for me on XCode 8.2.1.

1. Select Size Inspector of View Controller, and change Simulated Size to Freeform with height 1000 instead of Fixed.
2. Rename the view of View Controller as RootView.
3. Drag a Scroll View as subview of RootView and rename it as ScrollView.
4. Add constraints for ScrollView:
   • ScrollView[Top, Bottom, Leading, Trailing] = RootView[Top, Bottom, Leading, Trailing]
5. Drag a Vertical Stack View as subview of ScrollView and rename it as ContentView.
6. Add constraints for ContentView:
   • ContentView.height = 1000
   • ContentView[Top, Bottom, Leading, Trailing, Width] = ScrollView[Top, Bottom, Leading, Trailing, Width]
7. Select Attributes Inspector of ContentView, and change Distribution to Fill Equally instead of Fill.
8. Drag a View as subview of ContentView and rename it as RedView.
9. Set Red as the background of RedView.
10. Drag a View as subview of ContentView and rename it as BlueView.
11. Set Blue as the background of BlueView.
12. Select RootView, and click Update Frames button.
    • Update Frames is a new button in Xcode8, instead of Resolve Auto Layout Issues button. It looks like a refresh button, located in the control bar below the Storyboard:

---

View hierarchy:

• RootView
  • ScrollView
    • ContentView
      • RedView
      • BlueView

---

View Controller Scene (Height: 1000):

Run on iPhone7 (Height: 1334 / 2):

Answer 2

Note that within a UITableView, you can actually scroll the tableview by selecting a cell or an element in it and scrolling up or down with your trackpad.

For a UIScrollView, I like Alex's suggestion, but I would recommend temporarily changing the view controller to freeform, increasing the root view's height, building your UI (steps 1-5), and then changing it back to the standard inferred size when you are done so that you don't have to hard code content sizes in as runtime attributes. If you do that you are opening yourself up to a lot of maintenance issues trying to support both 3.5" and 4" devices, as well as the possibility of increased screen resolutions in the future.

Answer 3

Here's a bit of a grubby answer that get's to the same solution for vertical scroll views, but (against the ethos of stackoverflow) doesn't answer the question. Instead of using a scrollView, just use a UITableView, drag a normal UIView into the header, and make it as big as you want, you can now scroll the content in storyboard.

Answer 4

Here is a simple solution.

1. Set the size attribute of your view controller in the storyboard to "Freeform" and set the size you want. Make sure it's big enough to fit the full content of your scroll view.

2. Add your scroll view and set the constraints as you normally would. i.e. if you wants the scroll view to be the size of your view, then attach your top, bottom, leading, trailing margins to the superview as you normally would.

3. Now just make sure there are constraints in the subviews of the scrollview that connect the top and bottom of the scroll view. Same for left and right if you have horizontal scrolling.