When developing an iPhone app I was recently presented with the challenge of displaying an image and allow for it to be zoomed in and out on while also allowing for a scroll function, up, down and side to side. To accomplish this I used xcode and created my xib with an UIImageView which I placed inside of a UIScrollView like so.
I wish that was it, but unfortunately there is a bit more to do. We need to add some code to handle the zoom and scroll functions for us. I have compiled and modified this code from various sources, mostly from stackoverflow and I want to give partial credit to this guide which may also help you if my guide is not sufficent.
We will be using the image view and scroll view delegates in our .m file so we declare them in the header file like so.
// // ImageViewController.h // sfsfum // // Created by MarkusTenghamn on 3/10/13. // Copyright (c) 2013 MarkusTenghamn. All rights reserved. // #import <UIKit/UIKit.h> @interface ImageViewController : UIViewController @property (strong, nonatomic) IBOutlet UIImageView *imgView; @property (strong, nonatomic) NSString *imgPath; @property (strong, nonatomic) IBOutlet UIScrollView *scrollView; - (IBAction)BackBtnPress:(id)sender; - (void)centerScrollViewContents; - (void)scrollViewDoubleTapped:(UITapGestureRecognizer*)recognizer; - (void)scrollViewTwoFingerTapped:(UITapGestureRecognizer*)recognizer; @end
Our .m file will handle all of the touch gestures and the manipulation of the image. I will display my full code here as I believe it is more helpful. Please note that I declare the image path when creating the view outside of this class, see an example of this at the end of the post.2f99b571cf5351992fa88b8c7f3b336d_000001
Also note that I use png files for my app but you can simply change the extension to any other extension which is supported. To call the image view I use the following code.
ImageViewController *view = [ImageViewController alloc]; view.imgPath = [[self.menus objectAtIndex:[indexPath row]] objectForKey:@"PATH"]; [self presentViewController:view animated:YES completion:nil];
I hope that helps anyone else struggling with this, if you have any questions please do let me know!