How to make a ScrollView with AutoLayout in Xcode5

Question

In xcode 5 using storyboards how would one make a fully operational vertical scrolling scrollview, with AutoLayout ON?
Considering the subviews have hierarchy:

  1.UIView  
    2.UIScrollView
      3.UIView (lets call this UIDetailView to make things easier)

Please be specific from code to constraints to wether any of the views HAS to be smaller etc.

Answer 1

UIScrollView with Autolayout within Storyboards Just Works

I've seen a number of people recommending the 'Container View' approach, AKA brute force, to solving the problem that they don't understand. It is non-optimal since you now have lost a big advantage of the scrollview by making it think the content is the entire scrollview rather than the subviews immediately attached to the scrollview.

Here is how I did it in the example that follows

--UIScrollView
  |-> UITextView
  |-> UILabel
  |-> UIOtherStuff

When placing a UIScrollView into a UIView in a Storyboard just pin the edges to the 4 sides of the UIScrollView to the UIView. Now add your content to the UIScrollView making sure that you provide a minimum of two constraints for each dimension. The great thing about Autolayout is that it figures out how big the contentSize of the scrollview, or UILabels for that matter, needs to be based upon the size of the content inside it. AKA intrinsicContentSize. So if you are given a warning 'Ambiguous content size for scrollView' you know that you have not given the content enough constraints. For example, you might have given Top, Bottom, Left, Right spacing distance between views but the subview you're constraining needs a height too since an infinite vertical plane like this UIScrollView could assume your view was from zero to infinitely high.

To put it another way the Apple guide on Autolayout by Example makes a simple 3 point plan for success:

1. Create the scroll view.
2. Place the UI element inside it.
3. Create constraints that fully define the width and height of the scroll view content.

That top TextView with 'Min melding til' is also growing as you type more lines into it and the whole ScrollView grows to contain it. While I override the UITextView class to return a modified height constraint, the ScrollView itself works correctly without coding.

One last thing, lots of posts related to Autolayout try the magical fix-all incantation translatesAutoresizingMaskIntoConstraints = NO. This is only necessary if the view is created programmatically.

Answer 2

This blog post details how to use a UIScrollView with Autolayout ON, using a pure autolayout approach. Note though that all constraints in the blog post are defined through the Storyboard.

The approach in the post assumes the following hierarchy:

1. View (main view of my UIViewController)
  2. Scroll View (UIScrollView)
     3. Container View (UIView)
       4. Content View (e.g. UIImageView)

I guess the Container View will be your UIDetailView, and the Content View will be any UIView inside your UIDetailView.

https://happyteamlabs.com/blog/ios-how-to-use-uiscrollview-with-auto-layout-pure-auto-layout/