Can not load image into scrollview for zooming and scrolling

Question

I'm trying to load an image into a scrollview and adding gesturerecognizer to the image so it can be zoomed in and scrolled. but somehow i can not get this one to work. I've build the app with the xib file. At first i put the scrollview on top of the view in xib file, but because it didn't work out (gave me a blank black screen) then I tried to put the scrollview programmatically on the .m file. but now it gives me a blank white screen. I'm downloading the image with SDWebImage. Here's my code:

    #import "ZoomAndPanViewController.h"
#import "UIImageView+WebCache.h"

@interface ZoomAndPanViewController ()
@property (nonatomic, strong) UIImageView *imageView;
@property (nonatomic, strong) UIImage *image;

- (void)centerScrollViewContents;
- (void)scrollViewDoubleTapped:(UITapGestureRecognizer*)recognizer;
- (void)scrollViewTwoFingerTapped:(UITapGestureRecognizer*)recognizer;

@end

@implementation ZoomAndPanViewController

@synthesize scrollView = _scrollView;

@synthesize imageView = _imageView;

- (void)centerScrollViewContents {
    CGSize boundsSize = self.scrollView.bounds.size;
    CGRect contentsFrame = self.imageView.frame;

    if (contentsFrame.size.width < boundsSize.width) {
        contentsFrame.origin.x = (boundsSize.width - contentsFrame.size.width) / 2.0f;
    } else {
        contentsFrame.origin.x = 0.0f;
    }

    if (contentsFrame.size.height < boundsSize.height) {
        contentsFrame.origin.y = (boundsSize.height - contentsFrame.size.height) / 2.0f;
    } else {
        contentsFrame.origin.y = 0.0f;
    }

    self.imageView.frame = contentsFrame;
}

- (void)scrollViewDoubleTapped:(UITapGestureRecognizer*)recognizer {
    // Get the location within the image view where we tapped
    CGPoint pointInView = [recognizer locationInView:self.imageView];

    // Get a zoom scale that's zoomed in slightly, capped at the maximum zoom scale specified by the scroll view
    CGFloat newZoomScale = self.scrollView.zoomScale * 1.5f;
    newZoomScale = MIN(newZoomScale, self.scrollView.maximumZoomScale);

    // Figure out the rect we want to zoom to, then zoom to it
    CGSize scrollViewSize = self.scrollView.bounds.size;

    CGFloat w = scrollViewSize.width / newZoomScale;
    CGFloat h = scrollViewSize.height / newZoomScale;
    CGFloat x = pointInView.x - (w / 2.0f);
    CGFloat y = pointInView.y - (h / 2.0f);

    CGRect rectToZoomTo = CGRectMake(x, y, w, h);

    [self.scrollView zoomToRect:rectToZoomTo animated:YES];
}

- (void)scrollViewTwoFingerTapped:(UITapGestureRecognizer*)recognizer {
    // Zoom out slightly, capping at the minimum zoom scale specified by the scroll view
    CGFloat newZoomScale = self.scrollView.zoomScale / 1.5f;
    newZoomScale = MAX(newZoomScale, self.scrollView.minimumZoomScale);
    [self.scrollView setZoomScale:newZoomScale animated:YES];
}


- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    CGRect scrollFrame = [[UIScreen mainScreen]applicationFrame];
    self.scrollView = [[UIScrollView alloc]initWithFrame:scrollFrame];
    self.scrollView.delegate = self;

    // Set a nice title
    self.title = @"Image";
    self.imageView = [[UIImageView alloc] init];
    self.image = [[UIImage alloc]init];
    __block UIActivityIndicatorView *activityIndicator;
    [self.imageView setImageWithURL:[NSURL URLWithString:@"http://blablabla"] placeholderImage:nil options:SDWebImageProgressiveDownload progress:^(NSUInteger receivedSize, long long expectedSize)
     {
         if (!activityIndicator)
         {
             NSLog(@"setting up the indicator");
             [self.imageView addSubview:activityIndicator = [UIActivityIndicatorView.alloc initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray]];
             activityIndicator.center = self.imageView.center;
             [activityIndicator startAnimating];
             NSLog(@"indicator start animating");
         }
     }
                          completed:^(UIImage *uiimage, NSError *error, SDImageCacheType cacheType)
     {
         NSLog(@"download image completed");
         [activityIndicator removeFromSuperview];
         activityIndicator = nil;
         self.image = uiimage;
         [self.imageView setImage:self.image];
         NSLog(@"image vs uiimage : %f x %f vs %f vs %f", self.image.size.width, self.image.size.height, uiimage.size.width, uiimage.size.height);
     }];

    // Set up the image we want to scroll & zoom and add it to the scroll view


    self.imageView.frame = (CGRect){.origin=CGPointMake(0.0f, 0.0f), .size=self.image.size};
    [self.scrollView addSubview:self.imageView];

    // Tell the scroll view the size of the contents
    self.scrollView.contentSize = self.image.size;
    NSLog(@"scrollview contentsize %f x %f",  self.image.size.width,  self.scrollView.contentSize.height);
    UITapGestureRecognizer *doubleTapRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(scrollViewDoubleTapped:)];
    doubleTapRecognizer.numberOfTapsRequired = 2;
    doubleTapRecognizer.numberOfTouchesRequired = 1;
    [self.scrollView addGestureRecognizer:doubleTapRecognizer];

    UITapGestureRecognizer *twoFingerTapRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(scrollViewTwoFingerTapped:)];
    twoFingerTapRecognizer.numberOfTapsRequired = 1;
    twoFingerTapRecognizer.numberOfTouchesRequired = 2;
    [self.scrollView addGestureRecognizer:twoFingerTapRecognizer];
    //[self.view addSubview:self.scrollView];
    [SDWebImageManager.sharedManager.imageDownloader setValue:@"SDWebImage Demo" forHTTPHeaderField:@"AppName"];
    SDWebImageManager.sharedManager.imageDownloader.queueMode = SDWebImageDownloaderLIFOQueueMode;

}

- (void)viewDidUnload
{
    [super viewDidUnload];
    // Release any retained subviews of the main view.
}

- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];

    // Set up the minimum & maximum zoom scales
    CGRect scrollViewFrame = self.scrollView.frame;
    CGFloat scaleWidth = scrollViewFrame.size.width / self.scrollView.contentSize.width;
    CGFloat scaleHeight = scrollViewFrame.size.height / self.scrollView.contentSize.height;
    CGFloat minScale = MIN(scaleWidth, scaleHeight);

    self.scrollView.minimumZoomScale = minScale;
    self.scrollView.maximumZoomScale = 1.0f;
    self.scrollView.zoomScale = minScale;

    [self centerScrollViewContents];
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

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

- (UIView*)viewForZoomingInScrollView:(UIScrollView *)scrollView {
    // Return the view that we want to zoom
    return self.imageView;
}

- (void)scrollViewDidZoom:(UIScrollView *)scrollView {
    // The scroll view has zoomed, so we need to re-center the contents
    [self centerScrollViewContents];
}

@end

Any clue in what I did wrong in my codes and any help would be greatly appreciated.

Thanks!

Answer 1

Just create 2 classes named CustomScroll.h and .m

In CustomScroll.h write

@interface CustomScroll : UIScrollView
{

}

@property (nonatomic,strong) IBOutlet UIView *imageContainer;

And in .m write the following Code:

@synthesize imageContainer;

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{

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

}

// Override layoutSubviews to center content

- (void)layoutSubviews 
{

    [super layoutSubviews];

    // center the image as it becomes smaller than the size of the screen

    CGSize boundsSize = self.bounds.size;

    CGRect frameToCenter = imageContainer.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;

    imageContainer.frame = frameToCenter;

    NSLog(@"imageContainer.frame.height=== %f",imageContainer.frame.size.height);

}

-(BOOL)shouldAutorotateToInterfaceOrientation:UIInterfaceOrientation)interfaceOrientation
{

    // Return YES for supported orientations
    return (interfaceOrientation == UIInterfaceOrientationPortrait);

}

And In class where you want to scroll the image in .h file import CustomScroll.h and make object like

CustomScroll *customScrl;

and in your view take ScrollView and put imageview inside it and bind scrollview with customScrl (Don't forget to bind delegate and add UIScrollViewDelegate in .h file)and in custom class tab write CustomScroll as class.

Now in .m file write when you want to display image Or in viewDidLoad:

// Zoom image inside Scrol view //
// outputImage is my imageview inside Scrollview
    self.customScrl.contentSize= CGSizeMake(outputImage.frame.size.width, outputImage.frame.size.height);
    self.customScrl.maximumZoomScale=5.0;
    self.customScrl.minimumZoomScale=1.0;
    self.customScrl.clipsToBounds=YES;
    self.customScrl.delegate=self;
    [self.customScrl addSubview:outputImage];
    self.customScrl.imageContainer=outputImage;

    [self.view addSubview:customScrl];


#pragma ImageZooming Function

-(UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
    UIImageView *zoomImg = outputImage;
    //NSLog(@"zoom img=== %@",zoomImg);

    return zoomImg;
}

Just do as written. It'll definitely work for you also. :)