Zoomable image view for iPhone in Xcode 4.6

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.

Scrollable image view

 

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!

About Markus Tenghamn

avatar
Markus Tenghamn is a programmer and entrepreneur currently studying computer science at M√§lardalens University (MDH), Sweden, in addition to being a big part of several new and innovative startups. Markus has pursued web development for over 10 years and started his first ecommerce website at the age of 17. At the moment Markus is responsible for developing MDH Schedule iPhone app (unofficial) and sync server which let's students see their course schedules right on their phone. In addition to other projects, he is a volunteer for SFSFUM (Meeting for student unions in Sweden) where he developed an app for iPhone, Android and Windows Phone 7 which gives participants maps with direction and event information. He has also been a finalist for the Rising Star scholarship awarded by √Ėstsvenska Handelskammaren for course projects at MDH. Markus's latest startup is called Anveto AB (Anveto.com), an innovative analytics and marketing platform which will bring truly unique and new ideas to companies looking to increase revenue. In his spare time Markus prefers to write about web development, app development and startups on his blog at MarkusTenghamn.com. When he is not doing that he loves to read about AI, chaos theory, space and quantum mechanics.

Leave a Reply

Scroll To Top