iOS show UIImage full screen with zooming (pinch and double tap) enabled

Question

I have an UIImage captured from the camera with UIImagePickerController.

Now after the user clicks on it, I'd like it to show full screen and be able to to zoom it in and out using pinch gestures and also the double tap gesture to zoom in a particular area. In other words, I'd like to emulate what the ios's default image browser does.

I display the captured image in an UIImageView with:

self.imageView.contentMode = UIViewContentModeScaleAspectFill;

which makes the image go full screen. But how do I implement zooming. Do I need to do it from scratch using gesture recognizers? Or maybe there's a default image display view with all that implemented I am not aware of?

Solution 1

i have create this effect for one of my app, dont forget to set delegate of your scrollview.

code for .h file

#import <UIKit/UIKit.h>

@interface ImageViewerController : UIViewController<UIScrollViewDelegate>

// The scroll view used for zooming.
@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;

// The image view that displays the image.
@property (weak, nonatomic) IBOutlet UIImageView *imageView;

// The image that will be shown.
@property (strong, nonatomic) NSString *imageUrlString;

@end

code for .m

#import "ImageViewerController.h"

@interface HNImageViewerController ()

- (IBAction)handleSingleTap:(UIButton*)tapGestureRecognizer;
@end

@implementation ImageViewerController

- (void)viewDidLoad {
[super viewDidLoad];
[self.imageView setImage:[UIImage imageNamed:@"placeholder-image"]];
self.scrollView.delegate=self;
}

- (BOOL)prefersStatusBarHidden {
return YES;
}

#pragma mark - UIScrollViewDelegate methods

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
return self.imageView;
}

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
if (self.scrollView.zoomScale == self.scrollView.minimumZoomScale) {
    [self dismissViewControllerAnimated:YES completion:nil];
}
}

#pragma mark - Private methods

- (IBAction)handleSingleTap:(UIButton *)tapGestureRecognizer {

[self dismissViewControllerAnimated:YES completion:nil];
}

Solution 2

This is very easy to implement:

- (IBAction)handlePinch:(UIPinchGestureRecognizer *)recognizer;

and then:

- (IBAction)handlePinch:(UIPinchGestureRecognizer *)recognizer {    
recognizer.view.transform = CGAffineTransformScale(recognizer.view.transform, recognizer.scale, recognizer.scale);
recognizer.scale = 1;    
} 

Comments

[ZviBar]

Do I need to set the delegate of myscrollview in interface builder in addition to doing it in ViewDidLoad? Because now nothing happens. If so, how? I can't see it.

[Pawan Rai]

no if you are setting it in viewDidLoad ,then no need to do this.

[user1872384]

need to add these into viewDidLoad as well: " self.scrollView.minimumZoomScale = 1; self.scrollView.maximumZoomScale = 6.0; self.scrollView.contentSize = self.imageView.frame.size; self.scrollView.delegate = self;"