BigBinary Blog
We write about Ruby on Rails, React.js, React Native, remote work, open source, engineering and design.
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.
class ImageViewController < UIViewController
def initWithImage(image)
@image = image
end
end
Now, we will add a UIScrollView
with frame size set to full screen size and some other properties as listed below.
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.
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 explains this behavior.
We need to add the above imageView as a subview to our scrollView.
scrollView.addSubview(imageView)
self.view.addSubview(@scrollView)
This is how our controller looks with all the above additions.
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
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.
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.
There is one more thing to do if we want to support orientations changes. We need to add the following methods:
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.