Iphone Zoom image with UIScrollView and UIImageView
Hi.
To make zoom and scroll, we can use the UIScrollView, in this post I will explain how to combine the UIViewScroll with image (UIImageView, UIImage) to make a zoom image feature.
Suppose that we have a ViewController called ZoomViewController:
The interface should be:
1 2 3 4 5 6 7 8 9 10 11 12 13 | #import <uikit /UIKit.h> @interface ZoomViewController : UIViewController <uiscrollviewdelegate> { IBOutlet UIScrollView *scroll; UIImageView *image; } @property (nonatomic, retain) UIScrollView *scroll; @end </uiscrollviewdelegate></uikit> |
In the interface of ZoomViewController we tell that the class must implement the interface of UIScrollViewDelegate.
And create two attributes one is the UIScrollView that we named *scroll and the another one is the UIImageView that we named *image.
And we set the setter and getter for the *scroll.
Let’s go implement this interface:
First we must set our UIScrollView and our UIImageView, then in the viewDidLoad method
1 2 3 4 5 | // Implement viewDidLoad to do additional setup after loading the view, typically from a nib. - (void)viewDidLoad { image = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"img_body.png"]]; [super viewDidLoad]; } |
We create the image, and so going to interface builder and drag one UIScrollView to the interface and connect this one with our IBOutlet attribute that is the *scroll
After that we must add our image inside our UIScrollView and config the scroll so we do:
1 2 3 4 5 6 7 8 9 10 11 | // Implement viewDidLoad to do additional setup after loading the v iew, typically from a nib. - (void)viewDidLoad { image = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"img_body.png"]]; scroll.contentSize = image.frame.size; [scroll addSubview:image]; scroll.minimumZoomScale = 0.4; scroll.maximumZoomScale = 4.0; scroll.delegate = self; [scroll setZoomScale:scroll.minimumZoomScale]; [super viewDidLoad]; } |
We set the contentSize of scroll for the same of the image original so we will have all image to show inside the scroll view, we add the image as a subview in the scroll, and set the configs of our scroll, like the minimum and maximum zoom scale and pass the delegate of the scroll as our class.
Now we must set our response of the image when have some zoom or drag the image should response so let’s implement the method:
1 2 3 | - (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView { return image; } |
In the end we have this class, and we have our feature a image inside a UIScrollView and this image have the feature to drag and zoom.
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 53 54 55 56 57 58 59 60 61 62 63 64 | // ZoomViewController.m #import "ZoomViewController.h" @implementation ZoomViewController @synthesize scroll; /* // The designated initializer. Override if you create the controller programmatically and want to perform customization that is not appropriate for viewDidLoad. - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil { if ((self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil])) { // Custom initialization } return self; } */ // Implement viewDidLoad to do additional setup after loading the v iew, typically from a nib. - (void)viewDidLoad { image = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"img_body.png"]]; scroll.contentSize = image.frame.size; [scroll addSubview:image]; scroll.minimumZoomScale = 0.4; scroll.maximumZoomScale = 4.0; scroll.delegate = self; [scroll setZoomScale:scroll.minimumZoomScale]; [super viewDidLoad]; } - (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView { return image; } /* // Override to allow orientations other than the default portrait orientation. - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation { // Return YES for supported orientations return (interfaceOrientation == UIInterfaceOrientationPortrait); } */ - (void)didReceiveMemoryWarning { // Releases the view if it doesn't have a superview. [super didReceiveMemoryWarning]; // Release any cached data, images, etc that aren't in use. } - (void)viewDidUnload { [super viewDidUnload]; // Release any retained subviews of the main view. // e.g. self.myOutlet = nil; } - (void)dealloc { [super dealloc]; } @end |
