---
title: "How to setup Pinch to Zoom for an image in RubyMotion"
description:
  "Pinching and then zooming is a common user interaction in ios apps. This blog
  details how to build that feature."
canonical_url: "https://www.bigbinary.com/blog/pinch-to-zoom-for-an-image-in-rubymotion"
markdown_url: "https://www.bigbinary.com/blog/pinch-to-zoom-for-an-image-in-rubymotion.md"
---

# How to setup Pinch to Zoom for an image in RubyMotion

Pinching and then zooming is a common user interaction in ios apps. This blog
details how to build that feature.

- Author: Neeraj Singh
- Published: August 27, 2013
- Categories: Ruby

In this post we will see how to build "pinch to zoom" functionality to zoom in
an image in RubyMotion.

First let's add a `UIViewController` that is initialized with an image.

```ruby
class ImageViewController < UIViewController
  def initWithImage(image)
    @image = image
  end
end
```

## UIScrollView and UIImageView

Now, we will add a `UIScrollView` with frame size set to full screen size and
some other properties as listed below.

```ruby
scrollView = UIScrollView.alloc.initWithFrame(UIScreen.mainScreen.bounds)
scrollView.scrollEnabled = false
scrollView.clipsToBounds = true
scrollView.contentSize = @image.size
scrollView.minimumZoomScale = 1.0
scrollView.maximumZoomScale = 4.0
scrollView.zoomScale = 0.3
```

Create a new `UIImageView` and add it to the scrollView created above.

```ruby
imageView = UIImageView.alloc.initWithImage(@image)
imageView.contentMode = UIViewContentModeScaleAspectFit
imageView.userInteractionEnabled = true
imageView.frame = scrollView.bounds
```

We are setting the image view's content mode to
`UIViewContentModeScaleAspectFit`. Content mode can be set to either
`UIViewContentModeScaleToFill`, `UIViewContentModeAspectFill` or
`UIViewContentModeScaleAspectFit` depending on what suits your app. By default,
`contentMode` property for most views is set to `UIViewContentModeScaleToFill`,
which causes the view’s contents to be scaled to fit the new frame size.
[This Apple doc](https://developer.apple.com/library/ios/documentation/windowsviews/conceptual/viewpg_iphoneos/WindowsandViews/WindowsandViews.html)
explains this behavior.

We need to add the above imageView as a subview to our scrollView.

```ruby
scrollView.addSubview(imageView)
self.view.addSubview(@scrollView)
```

This is how our controller looks with all the above additions.

```ruby
class ImageViewController < UIViewController

  def initWithImage(image)
    @image = image
    scrollView = UIScrollView.alloc.initWithFrame(UIScreen.mainScreen.bounds)
    scrollView.scrollEnabled = false
    scrollView.clipsToBounds = true
    scrollView.contentSize = @image.size
    scrollView.minimumZoomScale = 1.0
    scrollView.maximumZoomScale = 4.0
    scrollView.zoomScale = 0.3
    scrollView.delegate = self

    imageView = UIImageView.alloc.initWithImage(@image)
    imageView.contentMode = UIViewContentModeScaleToFill
    imageView.userInteractionEnabled = true
    imageView.frame = scrollView.bounds
    init
  end

end
```

## ScrollView delegate

We must set a delegate for our scroll view to support zooming. The delegate
object must conform to the `UIScrollViewDelegate` protocol. This is the reason
we are setting scrollView.delegate = self above. The delegate class must
implement `viewForZoomingInScrollView` and `scrollViewDidZoom` methods.

```ruby
def viewForZoomingInScrollView(scrollView)
  scrollView.subviews.first
end

def scrollViewDidZoom(scrollView)
  if scrollView.zoomScale != 1.0
    scrollView.scrollEnabled = true
  else
    scrollView.scrollEnabled = false
  end
end
```

These two methods added above allow the scrollView to support pinch to zoom.

## Supporting orientation changes

There is one more thing to do if we want to support orientations changes. We
need to add the following methods:

```ruby
def shouldAutorotateToInterfaceOrientation(*)
  true
end

def viewDidLayoutSubviews
  @scrollView.frame = self.view.bounds
end
```

We have to set the scrollView's frame to view bounds in `viewDidLayoutSubviews`
so that the scrollView frame is resized when the device orientation changes.

That's it. With all those changes now our app supports orientation change and
now we are able to pinch and zoom images.

## Links

- [Human page](https://www.bigbinary.com/blog/pinch-to-zoom-for-an-image-in-rubymotion)