tijo

Double Tap to Zoom

In Code on March 13, 2011 at 9:29 am

Hello,

My recent work in UX design for the iOS has led me to frustration with many apps out there emulating the Photos.app-like feel for photo viewers. This zooming, panning, gallery view controller is often hard to recreate, and I’m not sure why Apple doesn’t simply provide one (c’mon, Apple), but I’ve noticed that one feature gets left out more than the rest in these third-party reproductions: double tap to zoom. With the introduction of UIGestureRecognizer (specifically UITapGestureRecognizer) in iOS 3.2, integration of this feature is very easy, however many apps still fail to include this feature. I’ve included a code snippet of this in hopes that maybe it will be integrated more often, I’d like to walk through it from a high level.

 

1. On loadView (or viewDidLoad), add a UITapGestureRecognizer to the scrollView on which you’re placing your image to zoom and pan around. Set the minimum number of taps to 2 (i.e. double tap), and point it at a method that takes a UIGestureRecognizer as a parameter (i.e. doubleTap:(UIGestureRecognizer *)recognizer).

2. Within the method created check that (1) the gesture recognizer is the one corresponding to the correct scroll view and (2) that the gesture recognizer is in the UIGestureRecognizerStateEnded state, otherwise you’ll get two zooms for every double tap.

3. After this check, examine the zoomScale of your scroll view. If it is not equal to 1, then set the zoom scale to 1. If it is equal to 1, use the locationInView: method on the gesture recognizer and call zoomToRect: on the scroll view from this location.

 

BOOM! Double tap to zoom in your own, home-made image viewer. Code outlining this is attached.

 

Double Tap To Zoom Code Snippet

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: