How to Zoom image by double Tap and By two finger in IOS.

Image Zoom

In most of Time, we need to Zoom image by double tap on Screen or we can stretch the image by two fingers for this we have to use some function .

follow this steps.

1: Take two UIScrollview to manage the image. here I am writing a function where you can touch image then this function will be called.

- (void)zoomAction:(UITapGestureRecognizer *)tap{
    
    
    UIView *homeDimView = [[UIView alloc] initWithFrame:CGRectMake(0,0,SCREEN_WIDTH,SCREEN_HEIGHT)];
    homeDimView.backgroundColor = [UIColor whiteColor] ;   //colorWithAlphaComponent:0.7];
    homeDimView.tag = 888;
    currentWindow = [UIApplication sharedApplication].keyWindow;
    homeDimView.frame = currentWindow.bounds;
    
    UIImageView *cancel = [[UIImageView alloc] initWithFrame:CGRectMake(SCREEN_WIDTH-50,30,30 ,30)];
    cancel.image = [UIImage imageNamed:@"ic_cancel.png"];
    cancel.userInteractionEnabled = TRUE;
    [homeDimView addSubview:cancel];
    UITapGestureRecognizer *cancelTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(closeZoomTap:)];
    [cancelTap setNumberOfTapsRequired:1];
    [cancel addGestureRecognizer:cancelTap];
    
    float  X= 0;
    
    parentZoomingScrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 70 ,SCREEN_WIDTH, SCREEN_HEIGHT -120)];
    parentZoomingScrollView.userInteractionEnabled = YES;
    parentZoomingScrollView .tag = 888888;
    parentZoomingScrollView.delegate = self;
    [homeDimView addSubview:parentZoomingScrollView];
    
    for (int i = 0;i<[mainCollection[@"imageGallery"] count];i++){
        NSDictionary *productImageDict = [mainCollection[@"imageGallery"] objectAtIndex:i];
        childZoomingScrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(X, 0 ,SCREEN_WIDTH, SCREEN_HEIGHT -120)];
        childZoomingScrollView.userInteractionEnabled = YES;
        childZoomingScrollView .tag = 9000 +i;
        childZoomingScrollView.delegate = self;
        [parentZoomingScrollView addSubview:childZoomingScrollView];
        imageZoom = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT -120)];
        UIImage *largeImage = [imageCache objectForKey:productImageDict[@"largeImage"]];
        
        imageZoom.image = [UIImage imageNamed:@"ic_placeholder.png"];
        if(largeImage)
            imageZoom.image = largeImage;
        else{
            [_queue addOperationWithBlock:^{
                NSData * imageData = [[NSData alloc] initWithContentsOfURL:[NSURL URLWithString:productImageDict[@"largeImage"]]];
                UIImage *largeImage = [UIImage imageWithData: imageData];
                if(largeImage){
                    [[NSOperationQueue mainQueue] addOperationWithBlock:^{
                        imageZoom.image = largeImage;
                    }];
                    [imageCache setObject:largeImage forKey:productImageDict[@"largeImage"]];
                }
            }];
        }
        
        imageZoom.userInteractionEnabled = TRUE;
        imageZoom.tag = 10;
        [childZoomingScrollView addSubview:imageZoom];
        
        [childZoomingScrollView setMaximumZoomScale:5.0];
        [childZoomingScrollView setClipsToBounds:YES];
        childZoomingScrollView.contentSize = CGSizeMake(SCREEN_WIDTH ,SCREEN_HEIGHT -120);
        UITapGestureRecognizer *doubleTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleDoubleTap:)];
        [doubleTap setNumberOfTapsRequired:2];
        [imageZoom addGestureRecognizer:doubleTap];
        
        X +=SCREEN_WIDTH;
    }
    parentZoomingScrollView.contentSize = CGSizeMake(X ,SCREEN_WIDTH);
    parentZoomingScrollView.pagingEnabled = TRUE;
    
    float  Y = 70+ SCREEN_HEIGHT -120 +5;
    
    pager = [[UIPageControl alloc] initWithFrame:CGRectMake(0,Y,SCREEN_WIDTH,50)]; //SET a property of UIPageControl
    
    pager.backgroundColor = [UIColor clearColor];
    pager.numberOfPages = [mainCollection[@"imageGallery"] count]; //as we added 3 diff views
    pager.currentPage = 0;
    pager.highlighted = TRUE;
    pager.pageIndicatorTintColor = [GlobalData colorWithHexString:@"CCCCCC"];
    pager.currentPageIndicatorTintColor = [GlobalData colorWithHexString:GLOBAL_COLOR];
    
    [homeDimView addSubview:pager];
    
    [currentWindow addSubview:homeDimView];
    
}

-(UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView{
    UIScrollView *scroll = [scrollView viewWithTag:9000+currentTag];
    UIImageView *image = [scroll viewWithTag:10];
    return  image;
}

-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
    CGFloat pageWidth = parentZoomingScrollView.frame.size.width;
    int page = floor((parentZoomingScrollView.contentOffset.x - pageWidth / 2 ) / pageWidth) + 1; //this provide you the page number
    currentTag = page;
    pager.currentPage = page;
}



- (void)handleDoubleTap:(UIGestureRecognizer *)gestureRecognizer {
    UIScrollView *scroll =[parentZoomingScrollView viewWithTag:888888];
    UIScrollView *childScroll = [scroll viewWithTag:9000+currentTag];
    float newScale = [scroll zoomScale] * 1.5;
    CGRect zoomRect = [self zoomRectForScale:newScale withCenter:[gestureRecognizer locationInView:gestureRecognizer.view]];
    [childScroll zoomToRect:zoomRect animated:YES];
}

- (CGRect)zoomRectForScale:(float)scale withCenter:(CGPoint)center {
    
    CGRect zoomRect;
    
    // the zoom rect is in the content view's coordinates.
    //    At a zoom scale of 1.0, it would be the size of the imageScrollView's bounds.
    //    As the zoom scale decreases, so more content is visible, the size of the rect grows.
    UIScrollView *scroll =[parentZoomingScrollView viewWithTag:888888];
    UIScrollView *childScroll = [scroll viewWithTag:9000+currentTag];
    zoomRect.size.height = [childScroll frame].size.height / scale;
    zoomRect.size.width  = [childScroll frame].size.width  / scale;
    
    // choose an origin so as to get the right center.
    zoomRect.origin.x    = center.x - (zoomRect.size.width  / 2.0);
    zoomRect.origin.y    = center.y - (zoomRect.size.height / 2.0);
    
    return zoomRect;
}

- (void)closeZoomTap:(UIGestureRecognizer *)gestureRecognizer {
    [[currentWindow viewWithTag:888] removeFromSuperview];
    
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

- (void)zoomAction:(UITapGestureRecognizer *)tap{

UIView *homeDimView = [[UIView alloc] initWithFrame:CGRectMake(0,0,SCREEN_WIDTH,SCREEN_HEIGHT)];

homeDimView.backgroundColor = [UIColor whiteColor] ; //colorWithAlphaComponent:0.7];

homeDimView.tag = 888;

currentWindow = [UIApplication sharedApplication].keyWindow;

homeDimView.frame = currentWindow.bounds;

UIImageView *cancel = [[UIImageView alloc] initWithFrame:CGRectMake(SCREEN_WIDTH-50,30,30 ,30)];

cancel.image = [UIImage imageNamed:@"ic_cancel.png"];

cancel.userInteractionEnabled = TRUE;

[homeDimView addSubview:cancel];

UITapGestureRecognizer *cancelTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(closeZoomTap:)];

[cancelTap setNumberOfTapsRequired:1];

[cancel addGestureRecognizer:cancelTap];

float X= 0;

parentZoomingScrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 70 ,SCREEN_WIDTH, SCREEN_HEIGHT -120)];

parentZoomingScrollView.userInteractionEnabled = YES;

parentZoomingScrollView .tag = 888888;

parentZoomingScrollView.delegate = self;

[homeDimView addSubview:parentZoomingScrollView];

for (int i = 0;i<[mainCollection[@"imageGallery"] count];i++){

NSDictionary *productImageDict = [mainCollection[@"imageGallery"] objectAtIndex:i];

childZoomingScrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(X, 0 ,SCREEN_WIDTH, SCREEN_HEIGHT -120)];

childZoomingScrollView.userInteractionEnabled = YES;

childZoomingScrollView .tag = 9000 +i;

childZoomingScrollView.delegate = self;

[parentZoomingScrollView addSubview:childZoomingScrollView];

imageZoom = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT -120)];

UIImage *largeImage = [imageCache objectForKey:productImageDict[@"largeImage"]];

imageZoom.image = [UIImage imageNamed:@"ic_placeholder.png"];

if(largeImage)

imageZoom.image = largeImage;

else{

[_queue addOperationWithBlock:^{

NSData * imageData = [[NSData alloc] initWithContentsOfURL:[NSURL URLWithString:productImageDict[@"largeImage"]]];

UIImage *largeImage = [UIImage imageWithData: imageData];

if(largeImage){

[[NSOperationQueue mainQueue] addOperationWithBlock:^{

imageZoom.image = largeImage;

}];

[imageCache setObject:largeImage forKey:productImageDict[@"largeImage"]];

}

}];

}

imageZoom.userInteractionEnabled = TRUE;

imageZoom.tag = 10;

[childZoomingScrollView addSubview:imageZoom];

[childZoomingScrollView setMaximumZoomScale:5.0];

[childZoomingScrollView setClipsToBounds:YES];

childZoomingScrollView.contentSize = CGSizeMake(SCREEN_WIDTH ,SCREEN_HEIGHT -120);

UITapGestureRecognizer *doubleTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleDoubleTap:)];

[doubleTap setNumberOfTapsRequired:2];

[imageZoom addGestureRecognizer:doubleTap];

X +=SCREEN_WIDTH;

}

parentZoomingScrollView.contentSize = CGSizeMake(X ,SCREEN_WIDTH);

parentZoomingScrollView.pagingEnabled = TRUE;

float Y = 70+ SCREEN_HEIGHT -120 +5;

pager = [[UIPageControl alloc] initWithFrame:CGRectMake(0,Y,SCREEN_WIDTH,50)]; //SET a property of UIPageControl

pager.backgroundColor = [UIColor clearColor];

pager.numberOfPages = [mainCollection[@"imageGallery"] count]; //as we added 3 diff views

pager.currentPage = 0;

pager.highlighted = TRUE;

pager.pageIndicatorTintColor = [GlobalData colorWithHexString:@"CCCCCC"];

pager.currentPageIndicatorTintColor = [GlobalData colorWithHexString:GLOBAL_COLOR];

[homeDimView addSubview:pager];

[currentWindow addSubview:homeDimView];

}

-(UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView{

UIScrollView *scroll = [scrollView viewWithTag:9000+currentTag];

UIImageView *image = [scroll viewWithTag:10];

return image;

}

-(void)scrollViewDidScroll:(UIScrollView *)scrollView{

CGFloat pageWidth = parentZoomingScrollView.frame.size.width;

int page = floor((parentZoomingScrollView.contentOffset.x - pageWidth / 2 ) / pageWidth) + 1; //this provide you the page number

currentTag = page;

pager.currentPage = page;

}

- (void)handleDoubleTap:(UIGestureRecognizer *)gestureRecognizer {

UIScrollView *scroll =[parentZoomingScrollView viewWithTag:888888];

UIScrollView *childScroll = [scroll viewWithTag:9000+currentTag];

float newScale = [scroll zoomScale] * 1.5;

CGRect zoomRect = [self zoomRectForScale:newScale withCenter:[gestureRecognizer locationInView:gestureRecognizer.view]];

[childScroll zoomToRect:zoomRect animated:YES];

}

- (CGRect)zoomRectForScale:(float)scale withCenter:(CGPoint)center {

CGRect zoomRect;

// the zoom rect is in the content view's coordinates.

// At a zoom scale of 1.0, it would be the size of the imageScrollView's bounds.

// As the zoom scale decreases, so more content is visible, the size of the rect grows.

UIScrollView *scroll =[parentZoomingScrollView viewWithTag:888888];

UIScrollView *childScroll = [scroll viewWithTag:9000+currentTag];

zoomRect.size.height = [childScroll frame].size.height / scale;

zoomRect.size.width = [childScroll frame].size.width / scale;

// choose an origin so as to get the right center.

zoomRect.origin.x = center.x - (zoomRect.size.width / 2.0);

zoomRect.origin.y = center.y - (zoomRect.size.height / 2.0);

return zoomRect;

}

- (void)closeZoomTap:(UIGestureRecognizer *)gestureRecognizer {

[[currentWindow viewWithTag:888] removeFromSuperview];

}

it will scroll the image from right to left and you can zoom image also individually. here I have taken a complete dialogue box that will pop up on your main screen .

In this function, data is coming from the server , fetching one by one and attached to image view .

iOS UI

kunal prasad

18 Dec, 2016
Updated by - kunal prasad
4 Nov, 2016
Created by - kunal prasad

. . .

How to Zoom image by double Tap and By two finger in IOS.

Image Zoom

Leave a Comment Cancel Reply

Message Sent!