How to use UIScrollView in Storyboard

I'm answering my own question because I just spent 2 hours to find the solution and StackOverflow allows this QA style.

Start to finish here is how to make it work in storyboard.

1: go to you view controller and click on Attribute Inspector.

2: change Size to Freeform instead of Inferred.

3: Go to the main view on that storyboard, not your scrollview but rather the top level view.

4: Click Size Inspector and set this view to your desired size. I changed my height to 1000.

Now you will see that you storyboard has your view setup so you can see the entire height of your scroll for easy design.

5: Drop on a scrollview and stretch it so it takes up the whole view. You should now have a scrollview with size of 320,1000 sitting on a view in your view controller.

Now we need to make it scroll and need to make it show content correctly.

6: Click on your scrollview and click on Identity Inspector.

7: Add a User Defined runtime attribute with KeyPath of contentSize then type of SIZE and put in your content size. For me it is (320, 1000).

Since we want to see our whole scroll view on the storyboard we stretched it and it has a frame of 320,1000 but in order for this to work in our app we need to change the frame down to what the visible scrollview will be.

8: Add a runtime attribute with KeyPath frame with Type RECT and 0,0,320,416.

Now when we run our app we will have a visible scrollview has a frame of 0,0,320, 416 and can scroll down to 1000. We are able to layout our subviews and images and whatnot in Storyboard just the way we want them to appear. Then our runtime attributes make sure to display it properly. All of this without 1 line of code.

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):

Here are the steps that worked for me on iOS 7 and XCode 5.

1. Drag a ViewController (it comes with UIView "View").

   1.1 Select "View Controller" and select "File Inspector" and uncheck "Auto layout".

2. Drag a ScrollView (as child of ViewController's UIView "View")
3. Select ScrollView and open "Identity Inspector".

4. Enter "contentSize" for keyPath. Select "Size" for Type. And Enter {320, 1000} for value.

   Note: Step 4 is simply saying that the scroller contains some content whose size is 320x1000 units. So setting contentSize will make scroller work.

5. Select View Controller, Select "Attributes Inspector" then select Freeform from Size.

   Note: step 5 will allow us to change the size of "View" that the view controller comes with.

6. Select "View" and then select "Size Inspector".

7. Set Width to 320 and height to 1000.

Note: 5, 6 & 7 is purely for us to see stretched or entire expanded view inside StoryBoard.Note: Make sure to unselect "Auto Layout" on View Controller.

Your View hierarchy should look like: