A Brief Overview:
So today I will be telling you how to zoom an image present in UIScrollView. UIScrollView is a subclass of UIView and thus it also has Multi-Touch supported.
We’ll be using the Multi-Touch to zoom into an image(UIImageView) present as a subview of the UIScrollView. We’ll also need a delegate of UIScrollView.
Delegation:
It is a design pattern to easily implement custom classes. So let’s get started.
1. Setting up the project.
Fire up Xcode and create a new project.
Select a Single View Application and name it Zoom.
2. Time for Some Coding
Go to your ViewController.h and paste the following code
@interface ViewController: UIViewController //1
{
IBOutlet UIScrollView *scrollView;
IBOutlet UIImageView *imageView;
}
@property(nonatomic, retain) IBOutlet UIScrollView *scrollView; //2
@property(nonatomic, retain) IBOutlet UIImageView *imageView; //2
@end
Now the explanation
1. We add the UIScrollViewDelegate.
2. We set the properties(getter and setter) both the IBOutlets.
Now switch to ViewController.m
@synthesize imageView, scrollView;
Replace your viewDidLoad method with the code give below
– (void)viewDidLoad
{
imageView = [[UIImageView alloc] initWithImage:[UIImage imageWithData:
[NSData dataWithContentsOfURL:
[NSURL URLWithString:
@”http://www.pixlatedstudios.com/blog/images/twitter/1pic.png”]]]]; // 1
[scrollView addSubview:imageView]; // 2
[scrollView setContentSize:CGSizeMake(700, 525)]; // 3
[scrollView setScrollEnabled:YES]; // 4
[scrollView setMaximumZoomScale:10]; // 5
[scrollView setMinimumZoomScale:0.75]; // 6
scrollView.delegate = self; // 7
[super viewDidLoad];
}
Time for explanation:-
1. We allocate the UIImageView we declared earlier which takes the image from the URL.
2. Now we add imageView as a subview of imageView.
3. We use the method of UIScrollView setContentSize:. As the name suggests it sets the size of the content inside the UIScrollView. Basically it is the size of the image that we are downloading from the site and putting into it.
4. We set the scrollEnabled property to YES.
5. Setting the maximum zoom scale. Setting it to a value 10 means that we can zoom into the image unto 10 times the original image.
6. Setting the minimum zoom scale. Setting it to a value 0.75 means that we can zoom out the image unto 0.75 times the original image.
It’s time to implement the UIScrollViewDelegate method. Place the following code just after the viewDidLoad method.
-(UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView{ return imageView; // 1 }
1. This method returns imageView. This one is quite simple.
Hard part is done now we have to connect their interface.
2. Setting up the Connections.
Go to your ViewController.xib and drag a ScrollView on your View.
Now connect the IBOutlet scrollView from the File’s Owner tab to the UIScrollView you just placed.
That’s all for the Interface Builder.
3. Final Step
Build and run!!! and hope that it works.
It Works!
4. Source Code
Feeling lazy download the source code here.
Visit http://www.pixlatedstudios.com/ for more tutorials.
