Scale images with Pinch Gesture in iOS with Swift

The UIKit framework provides predefined gesture recognizers that detect common gestures. Gesture recognizers are objects that you attach to a view, which allows the view to respond to actions. In this tutorial we will display an image, which can be scaled up and down with the pinch gesture. This tutorial is written in Swift so you will need Xcode 6. It can be downloaded at Apple's developer portal.

Open Xcode and create a new Single View Application. For product name, use iOS8SwiftScalingViewsTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and make sure only iPhone is selected in Devices.

We will need an image to scale, so download the following image, and add the image to the project. Select the Copy items if needed checkbox.

Go to the storyboard. In Xcode 6 view controllers are now square by default, so that you can create one user interface use just for multiple devices. In iOS8 you can layout the storyboard using constraints and size classes. Since this app is only going to be for the iPhone, you can disable size classes. In the File Inspector untick Use Size Classes.

Choose Keep size class data for: iPhone, and click Disable Size Classes.

Drag an Image View inside the View Controller. In the Attribute Inspector in the Image View section select our image in the Image field.

To resize the Image View to the dimensions of the image, go to the Editor menu and choose Size to Fit Content.

Next, drag a Pinch Gesture Recognizer to the Image View, this will attach the pinch gesture to our image. User Interaction is not enabled by default on an Image View, so select the Image View and go to the Attributes Inspector. In the View section enable the User Interface Enabled checkbox.

When the user starts a pinch gesture we need a callback method to handle the pinch and to alter the image. Open the Assistant editor to view the ViewController.swift file next to the Storyboard. Ctrl + drag from the Pinch Gesture Recognizer to the ViewController class and create the following Action.

In viewDidLoad change the background color of the main view to white.

override func viewDidLoad() {
  view.backgroundColor = UIColor.whiteColor()

Next, implement the scaleImage Action method

@IBAction func scaleImage(sender: UIPinchGestureRecognizer) {
    self.view.transform = CGAffineTransformScale(self.view.transform, sender.scale, sender.scale)
    sender.scale = 1

Every view has a transform that is applied to it, this is information of the rotation,translation and scale that can be applied to the current view.The CGAffineTransformScale function is used to scale the view's transform based on the gesture. Since the view will update each time the gesture updates, the scale need to be reset to the default value(which is 1). Otherwise the transform scale will continue to grow. Build and Run the project on an iOS device instead of the  Simulator, because it is a lot easier to pinch on a real device. Try to scale the image back and forth using the pinch gesture.

You can download the source code of the iOS8SwiftScalingViewsTutorial at the ioscreator repository on github.