This post demonstrates how to use UIScrollView with AutoLayout. The Scroll View will contain multiple smaller views. In my example, I will be using 3 UIViews with different background colors as the content of our scroll view.

The final code can be downloaded here: https://github.com/djsison/iOS-ScrollView-AutoLayout-MultipleContents

If you need a single view inside the Scroll View, please refer to the following link instead:
iOS: How to use UIScrollView with Auto Layout (Pure Auto Layout) – Single Content View

I will be using the pure auto layout approach as stated in this note:
https://developer.apple.com/library/ios/technotes/tn2154/_index.html

First, I define the appearance of my screen in the storyboard as follows:

  • View (main view of myUIViewController) – with
    • Scroll View (UIScrollView) – with Dark Gray background color
      • Container View (UIView) – with Light Gray background color
        • Content1 (UIView) – with Red background color
        • Content2 (UIView) – with Green background color
        • Content3 (UIView) – with Blue background color

This is what it should look like in the storyboard:
Screen Shot 2013-11-14 at 12.35.04 PM

Some notes and tips first before defining the constraints for our storyboard:

  • Do not think of the scroll view as having a fixed width and height.
  • The contents of the scroll view will define the width and height of the scroll view (or, for more technical correctness, the content size of the scroll view).
  • The size of the contents of the scroll view must not depend on the size of the scroll view.
    β†’ For example, Content1, Content2, and Content3 must not only contain constraints that attach them to the top, bottom, left, and right edges of the Container View, but also a fixed width constraint and a fixed height constraint (each of these constraints must be defined in at least 1 of the content views). If no content view has these constraints, their sizes will depend on the size of the scroll view (since they are attached to the edges), but the scroll view also depends on the size of its contents, so an error is produced.
  • The scroll view must have at least 1 content that attaches to each of its edges, e.g. top, left, right, and bottom. This is so that the scroll view will know the bounds or limits of its content, which will determine the scroll view’s own content size.

Now, we define the constraints using the Storyboard.
Storyboard Hierarchy Image

  • Scroll View (UIScrollView): 20 leading, trailing, top, and bottom spaces to superview
    You can change this to what you want, e.g. 0 each for leading, trailing, top, and bottom spaces so that the Scroll View takes all of the main view’s space.
  • Container View (UIView): 0 leading, trailing, top, and bottom spaces to the Scroll View
    This is sort of fixed, unless you have a reason to do otherwise (e.g. to create a sort of a margin effect).
    In the screenshot, the leading, trailing, top, and bottom space constraints are all set to 0. The content views are what defines the size of the Container View, which in turn defined the size of the Scroll View (but the real size of the Scroll View on run time is not reflected in the Storyboard).
  • Content1: 20 for leading, trailing, and top, 8 for bottom (this is the space between Content1 and Content2), and fixed width and height of 240 and 100.
    Note that we defined leading and trailing constraints, together with a width constraint! If this view is inside another fixed-size View, Xcode may warn you of ambiguous or conflicting constraints.  Also, we now have a view that attaches to the top, left, and right edges of the scroll view. The only one left is the bottom edge.
  • Content2: 20 for leading and trailing, 8 for bottom (this is the space between Content2 and Content3), and fixed height of 100.
    Note that we did not add a constraint for width. This means that only Content1 will affect the content size of the scroll view.
  • Content3: 20 for leading and trailing, 20 for bottom (this is the space between Content3 and the superview, which is the Container View), and a fixed height of 100. Now, we also have a view that attaches to the bottom edge of the scroll view.

The storyboard is now complete! Try to run your app in the simulator using iPhone 3.5 inch, and see what happens.

Whaat! It does not scroll!
Don’t fret. This is expected, since our content views are still small enough to fit inside the scroll view.
To test our autolayout constraints, we can change the size of one of our content views, and see what happens.

Since I am feeling lazy right now, I will just change the width of Content1 in viewDidLoad of my ViewController.
Note that I have created IBOutlets for each of the width and height constraints of Content1, Content2, and Content3.

Run the app. You can now scroll horizontally!

iOS Simulator Screen shot Nov 14, 2013, 12.29.40 PM

Now, I will try to change the height of Content2.

Run the app, and now, you should be able to scroll vertically.

iOS Simulator Screen shot Nov 14, 2013, 12.33.02 PM

Congratulations! That’s it for autolayout and scroll views in iOS.
Note that you can use other views also, such as UILabels and UIImageViews.

If you have questions, please feel free to leave a comment below.

Happy Goals for iOS

Happy Goals for iOS

Want an app to help you track and achieve your goals, without the complex stuff, saving you from headaches? Checkout Happy Goals - Habits & Goals Tracker now in the App Store! Happy Goals has been featured in the App Store in over 32 countries. Start now, better late than never!

Β 

Thank you!

%d bloggers like this: