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?

Solution 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;
    }
}

Solution 2

The code from @AzzUrr1, small error corrections (brackets) and tapper implemented slightly different.

Worked for me. Now it would be great to have this implemented with a scrollView, that the user can zoom in/out if the picture is bigger.. Any suggestion?

ViewController.h

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController  <UIGestureRecognizerDelegate>{
    UITapGestureRecognizer *tap;
    BOOL isFullScreen;
    CGRect prevFrame;
}
@property (nonatomic, strong) UIImageView *imageView; 

@end

ViewController.m

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    isFullScreen = FALSE;
    tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(imgToFullScreen)];
    tap.delegate = self;
    self.view.backgroundColor = [UIColor purpleColor];

    _imageView = [[UIImageView alloc] initWithFrame:CGRectMake(10, 10, 300, 200)];
    _imageView.contentMode = UIViewContentModeScaleAspectFill;
    [_imageView setClipsToBounds:YES];
    _imageView.userInteractionEnabled = YES;
    _imageView.image = [UIImage imageNamed:@"Muppetshow-2.png"];

    UITapGestureRecognizer *tapper = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(imgToFullScreen:)];
    tapper.numberOfTapsRequired = 1;

    [_imageView addGestureRecognizer:tapper];

    [self.view addSubview:_imageView];
}

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

Solution 3

I ended up using MHFacebookImageViewer. Integration is easy, no subclassing UIImageView, and it also has image zooming and flick dismiss.

Although it requires AFNetworking (for loading larger image from URL), you can comment out some code (about 10 lines) to remove this dependency. I can post my AFNetworking-free version if someone needs it. Let me know :)

Solution 4

One possible implementation would be to use a modal view controller with UIModalPresentationFullScreen presentation style.

View more solutions

Comments

[murze]

how would that imgToFullScreen method look like?

[arnoapp]

see edit. You may need to work with an array of prevFrames and isFullScreen Bools if you have more than one specfic imgviews in your table. But this should be easy ;)