UIScrollView and Zoom

UIScrollView and Zoom
As I wrote on my last post, this one would be a simple tutorial with UIScrollView and Zoom, right? OK, let’s create a new View-based Xcode project and name it Zoom.
Open the ZoomViewController, and create your UIScrollView in the loadView method.
– (void)loadView {
UIScrollView *scroll = [[UIScrollView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]];
scroll.backgroundColor = [UIColor blackColor];
scroll.delegate = self;
image = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@”image.JPG”]];
scroll.contentSize = image.frame.size;
[scroll addSubview:image];
scroll.minimumZoomScale = scroll.frame.size.width / image.frame.size.width;
scroll.maximumZoomScale = 2.0;
[scroll setZoomScale:scroll.minimumZoomScale];
self.view = scroll;
[scroll release];
}
What’s being done here is:
  • Creating a UIScrollView with the same size as the main screen
  • Setting the background color to black
  • Assigning the delegate to self
  • Creating an UIImageView with  a image that’s already added on the project, don’t forget to declare the UIImageView on your .h file.
  • Setting the contentsize to the full size of the image
  • Adding the image to the UIScrollView
  • Setting the minimum zoom scale to fit the iPhone screen horizontally, so the image with the lowest zoom level, will fit the screen
  • Setting the maximum zoom to be 2 times the image size
  • Setting the UIScrollView to start with the minimum zoom scale
  • Assigning the UIScrollView to the UIViewController’s UIView
  • Releasing the UIScrollView
OK, with that ready there’s only one thing missing here, we have to implement a UIScrollView delegate method called
– (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
And what does it do? Simple, just go to the documentation and you’ll see : “Asks the delegate for the view to scale when zooming is about to occur in the scroll view.” So, all we need to do here is return our image, like so:
– (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
return image;
}
pretty simple, huh?
That’s it, that’s all you need to do to have a simple and functional UIScrollView with zooming 🙂 But wait, there’s one more thing…

One More Thing

If you run your project, you may realize that the image is not on the center of your screen, even if you zoom, and here’s how you can center your view on UIScrollView while zooming. But no worries, I will help you out, just copy this method:

– (CGRect)centeredFrameForScrollView:(UIScrollView *)scroll andUIView:(UIView *)rView {
CGSize boundsSize = scroll.bounds.size;
CGRect frameToCenter = rView.frame;
// center horizontally
if (frameToCenter.size.width < boundsSize.width) {
frameToCenter.origin.x = (boundsSize.width – frameToCenter.size.width) / 2;
}
else {
frameToCenter.origin.x = 0;
}
// center vertically
if (frameToCenter.size.height < boundsSize.height) {
frameToCenter.origin.y = (boundsSize.height – frameToCenter.size.height) / 2;
}
else {
frameToCenter.origin.y = 0;
}
return frameToCenter;
}
This method will receive your UIScrollView and the UIView that you are zooming and calculate the correct frame for your UIView and return a CGRect. All you have to do is call this method on your scrollViewDidZoom delegate, that’s get called everytime that there’s some zooming, and you are ready 🙂
– (void)scrollViewDidZoom:(UIScrollView *)scrollView {
image.frame = [self centeredFrameForScrollView:scrollView andUIView:image];;
}
Now enjoy your centralized UIView in your UIScrollView
Advertisements

24 thoughts on “UIScrollView and Zoom

  1. hey great tutorial u got here.
    i have a question if you dont mind answering,
    if i want the scroll view to start zooming in a particular area in the image when the view loads and from there the user will be able to zoom out to see the entire image,
    how is it done?

  2. Erm i have a question again >.<"
    actually i tried to put a toolbar and a navigation bar on the view using the xib interface but it dint show up.
    can u please enlighten me?

    • tried some stuffs out after doing research but still couldn’t get it right.
      please help me out here.
      a million thanks in advanced.

  3. hey great tutorial here. i have a question on uiscrollview if you dont mind helping out. this is part of the code:

    – (void)viewDidLoad {

    [super viewDidLoad];

    scrollView2.contentSize = CGSizeMake(2100,1000);
    scrollView2.clipsToBounds = YES;
    [scrollView2 setScrollEnabled:YES];
    scrollView2.setcon
    }

    the problem is i want it to scroll from right to left because the default is scroll from left to right.
    like when it loads the picture will start from the right and able to scroll to the left.
    is it possible?
    if yes can u help me out here.

    thank you for ur time.

    • The source code is available in the post. At the end of the post where it says “Now enjoy your centralized UIView in your UIScrollView
      Download the project here”

  4. Hey iDev, I am trying to get the elements from a view controller on the initial screen after logging into the App through Login screen but couldn’t (Accessibility is set). I tried the timeouts from a friend’s suggestion but even this doesn’t seem to work. Can you give me some inputs on how to get the elements from multiple screens? Thanks in advance…

    • Hi.
      I’m not sure what is your problem, you want to get some data from a UIViewController and it’s not working?
      Well, you want to make sure that the ViewController is initialized correctly and your view is loaded.
      It’s data or UI componentes that you want to retrieve? If it’s something related to the UI, make sure that the viewDidLoad method is being called, and you are retrieving the data after this method.

  5. Would you be willing to update this for xCode 4 and iOS 5, assuming the controllers and views were created in a storyboard?

    • Hi, DWmF.
      I’m not a big fan of using IB or StoryBoard. I don’t like it’s maintenance, and I think it’s very easy to make mistakes using it. I don’t know about storyboard but IB saved the .xibs in a binary file, making hard to use git with it as well.

      The pros of using those tools simply can’t overcome the cons, at least in my point of view.

      I like to do it all in code, I think it’s easier to follow what the developer intent was without going back and forward checking the nib and the source, and it’s easier to make components without IB, less files to import to projects and so on.

      I know some people to like to use it, and I can see some advantages, but the overall experience that I had using it wasn’t very pleasant 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s