Gold Challenge - My Solution


#1

Hi together,
I can’t see anyone’s solution for the Gold Challenge here so here’s my solution:

ImageViewController.h:

//
//  ImageViewController.h
//  Homepwner
//
//  Created by Joerg Kirchhof on 26.08.12.
//  Copyright (c) 2012 Joerg Kirchhof. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface ImageViewController : UIViewController <UIScrollViewDelegate> {
    __weak IBOutlet UIImageView *imageView;
    __weak IBOutlet UIScrollView *scrollView;
}

@property (nonatomic, strong) UIImage *image;

@end

And the implementation file:

//
//  ImageViewController.m
//  Homepwner
//
//  Created by Joerg Kirchhof on 26.08.12.
//  Copyright (c) 2012 Joerg Kirchhof. All rights reserved.
//

#import "ImageViewController.h"

@interface ImageViewController ()

@end

@implementation ImageViewController
@synthesize image;

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        // Custom initialization
    }
    return self;
}

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view from its nib.
}

- (void)viewDidUnload
{
    scrollView = nil;
    imageView = nil;
    [super viewDidUnload];
    // Release any retained subviews of the main view.
    // e.g. self.myOutlet = nil;
}

- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear];
    
    CGSize sz = [[self image] size];
    [scrollView setContentSize:CGSizeMake(600, 600)];
    [imageView setFrame:CGRectMake([scrollView frame].size.width/2-sz.width/2, [scrollView frame].size.height/2-sz.height/2, sz.width, sz.height)];
    [scrollView setMinimumZoomScale:5.0];
    [scrollView setMaximumZoomScale:1.0];
    [scrollView setContentSize:sz];
    [scrollView setDelegate:self];
    
    [imageView setImage:[self image]];
    [scrollView addSubview:imageView];
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    return (interfaceOrientation == UIInterfaceOrientationPortrait);
}

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
    return imageView;
}

@end

Hope everything works and my solution could help you :wink:

Greetings
Joerg


#2

Thx……JoergK


#3

I had trouble getting any zooming to occur in the iPad simulator. I had grabbed the previous posting’s code (from JoergK) and was using that for my experimentation. Further comparison to other solutions showed that the above solution has an extra line in ImageViewController.m: “[scrollView addSubview:imageView];”. I took it out, and played around more with zooming, but I finally realized I needed to have both pinch/zoom points inside the popover box for any zooming to occur (I guess either point outside the popover counts as an outside click and dismisses it). I now see that zooming works with or without this line. So, what suggested that the line should have been added? Also, I’m surprised that it actually works with the line, since I would think adding another subview would step on the inherent UIImageView inside the UIScrollView implied by the xib file. So should this line make any difference? Thanks.


#4

I’m using the current implementation above, but I find when I’m running the code and try to pan to the left, it bounces back, and panning to the right has introduced white space to the image. Still digging deeper to find out to solve for this.


#5

The solution to correct the panning issue is below. The key was using [scrollView setContentOffset] and leaving the imageView setFrame the same.

- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear];
    
    CGSize sz = [[self image] size]; 
    CGSize sv = [scrollView frame].size;
    
    [scrollView setContentSize:sz];
    [scrollView setContentOffset:CGPointMake(sz.width/2 - sv.width/2, sz.height/2 - sv.height/2)];
    [scrollView setMinimumZoomScale:0.5];
    [scrollView setMaximumZoomScale:10];
    [scrollView setDelegate:self];
      
    [imageView setFrame:CGRectMake(0, 0, sz.width, sz.height)];
    [imageView setImage:[self image]];
}

#6

This was driving me nuts, thanks for the help.

To add to this you might have uncheck “use Autolayout” to get the content to pan properly.

Open the .xib hit alt+cmd+1 then uncheck “use Autolayout”.