ImageView Zoom Tutorial for iPhone & iPad

Dec 16, 2011 0

Hey guys :) .  Welcome to the ImageView Zoom Tutorial for iPhone & iPad.

Ok, this vid shows you how you can take your image view (uiimageview) code that is created for you by Dapp and turn them into zoomable images for iOS (iPhone & iPad).

Of course, if you just want to create zoomable images (scale, pan) in your own code then you can use this too.

As a special treat I’ve also included a custom class that you can use in your projects :) … so if you are feeling lazy, just grab the custom class and drop it into your code.

—-> KFImageZoomView class files. <—-

For those who are extra lazy, here is the custom class code you can copy/paste and learn from.. or just use in your own iOS projects! :) .

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// You are free to do whatever you want with this code :)
// Cliff, Kerofrog
 
#import <UIKit/UIKit.h>
 
@interface KFImageZoomView : UIScrollView <UIScrollViewDelegate> {
    UIImageView *imageView;
}
 
@property (nonatomic, retain)   UIImageView     *imageView;
 
#pragma mark Initialisation
- (id)initWithImageNamed:(NSString *)imageName atLocation:(CGPoint)location;
 
@end

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
// You are free to do whatever you want with this code :)
// Cliff, Kerofrog
 
#import "KFImageZoomView.h"
 
@implementation KFImageZoomView
 
@synthesize imageView;
 
#pragma mark - Memory Management
 
- (void) dealloc {
    [self.imageView release];
    [super dealloc];
}
 
#pragma mark - Initialisation
 
- (id)initWithImageNamed:(NSString *)imageName atLocation:(CGPoint)location {
    self = [super init];
    if (self) {
        // Assign the delegate
        self.delegate = self;
 
        // Create our image view using the passed in image name
        self.imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:imageName]];
 
        // Update the ImageZoom frame to match the dimensions of passed in image
        self.frame = CGRectMake(location.x, location.y, 
                                self.imageView.frame.size.width, self.imageView.frame.size.height);
 
        // Set a default minimum and maximum zoom scale
        self.minimumZoomScale = 0.5f;
        self.maximumZoomScale = 3.0f;
 
        // Add image view as a subview
        [self addSubview:self.imageView];
    }
 
    return self;
}
 
#pragma mark - UIScrollViewDelegates
 
- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(float)scale {
 
}
 
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
    return self.imageView;
}
@end
To your app success!,
Cliff

P.S. Technology is only a small part of your app success. There is the business, sales and marketing that you need to think of too :). Which is why I also provide a bunch of free education on how to succeed on the App Store - http://kerofrog.com :).

Leave a Reply