This is a iOS demo app that shows how to use an image in a scroll view with auto layout. It is written in Swift. Image can be panned and zoomed. It is centered and zoomed out initially. Adapts to device orientation change with animation.
- The job is done with auto layout constraints only.
- On each zoom we update the
constant
values for the constraints to center the image if needed. - Feel free to contact me if you are stuck (like I was).
- In your storyboard 'Use Auto Layout' setting must enabled.
- Copy ViewController.swift file into your project.
- Copy the View Controller into your storyboard, like this:
Here are things to check if something goes wrong.
- Your view controller's class is ViewController in Identity Inspector.
- Storyboard has all the controls: View, ScrollView and ImageView along with all their constraints.
- To enable zooming ScrollView's 'max zoom' should be greater than 1 (Attributes Inspector). I used 3 in this demo.
- ImageView, ScrollView, four layout constraints and 'change image' button should be linked to their outlets in
ViewController.swift
. - If you have a navigation bar clear the Adjust Scroll View Insets checkbox in the Attribute Inspector of your view controller.
- Set the Intrinsic size property to Placeholder in the Size inspector of the image view.
For each of the four auto layout constraints between the image and the scroll view: first item must be image (and not superview).
This repository replaces previous objective-c version.
-
William Warby for making the wallaby photo. http://www.flickr.com/photos/wwarby
-
cojoj for fixing layout bug in iOS 8.