This post demonstrates how to use UIScrollView with Auto Layout. The Scroll View will contain one smaller view.
In my example, I will be using a UIImageView as the sole content of the scroll view.

If you need a multiple views inside the Scroll View, please refer to the following link instead:
iOS: How to use UIScrollView with Autolayout (Pure Autolayout Approach) – Multiple Content Views

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. I have the following structure:

  • View (main view of my UIViewController)
    • Scroll View (UIScrollView)
      • Container View (UIView)
        • Content View (e.g. UIImageView)

Next, define the constraints using the Storyboard.

  • Scroll View (UIScrollView): 0 leading, trailing, top, and bottom spaces to superview
    You can change this to what you want, e.g. 20 each for leading, trailing, top, and bottom spaces
  • 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).
  • Content View (UIImageView): 0 leading, trailing, top, and bottom spaces to the Container View
    This will make the container view expand when our UIImageView expands, which in turn automatically sets the contentSize of our Scroll View.
    Our UIImageView size will depend on the image we put into it.  Note that a UIImage must be set for the UIImageView so that the storyboard can compute the size. If you do not specify a UIImage, then storyboard will display “has ambiguous scrollable content” errors.

Storyboard

That’s it! Compile and run your app.

You can test the above by assigning a small-sized, medium-sized, and large-sized image to your UIImageView.
To add zooming, you need to set your UIViewController as the delegate of the UIScrollView, then return your Container View in the following delegate method:

References:

https://developer.apple.com/library/ios/technotes/tn2154/_index.html

http://stackoverflow.com/questions/13499467/uiscrollview-doesnt-use-autolayout-constraints

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: