How to animate a UIImageview to display fullscreen by tapping on it?

Question

I have an UIImageView in a UITableviewCell. When it is tapped, the UIImageView should animated to be displayed fullscreen. When the image is tapped when it is fullscreen it should shrink back to the original position.

How can this be achieved?

Answer 1

Add a gesture recognizer to the view controller.

Add the gesture Recognizer to your header file

@interface viewController : UIViewController <UIGestureRecognizerDelegate>{
    UITapGestureRecognizer *tap;
    BOOL isFullScreen;
    CGRect prevFrame;
}

In your viewDidLoad add this:

isFullScreen = false;
tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(imgToFullScreen)];
tap.delegate = self;

Add the following delegatemethod:

- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldReceiveTouch:(UITouch *)touch;
{
    BOOL shouldReceiveTouch = YES;

    if (gestureRecognizer == tap) {
        shouldReceiveTouch = (touch.view == yourImageView);
    }
    return shouldReceiveTouch;
}

Now you just need to implement your imgToFullScreen method. Make sure you work with the isFullScreen Bool (fullscreen if it is false and back to old size if it's true)

The imgToFullScreen method depends on how you want to make the image become fullscreen. One way would be: (this is untested but should work)

-(void)imgToFullScreen{
    if (!isFullScreen) {
        [UIView animateWithDuration:0.5 delay:0 options:0 animations:^{
            //save previous frame
            prevFrame = yourImageView.frame;
            [yourImageView setFrame:[[UIScreen mainScreen] bounds]];
        }completion:^(BOOL finished){
            isFullScreen = true;
        }];
        return;
    } else {
        [UIView animateWithDuration:0.5 delay:0 options:0 animations:^{
            [yourImageView setFrame:prevFrame];
        }completion:^(BOOL finished){
            isFullScreen = false;
        }];
        return;
    }
}