Chapter 14 : Recogizing Gestures

Yujiin · April 10th, 2011, 09:35 AM

Hello,

First let me tell you thanks for this great book. I have a question about recognizing gestures, i use your code on this chapter to try to display images on full screen when i double tape or pinching. Here is my code but i have a lot of difficulty to accomplish this, so thanks for helping.

Code:

@interface ImageFullScreen : NSObject
{
	IBOutlet UIImageView *myImage;
}

@property (nonatomic, retain) IBOutlet UIImageView *myImage;

@end

@implementation ImageFullScreen
@synthesize myImage;

- (void)viewDidLoad {
	//---tap gesture---
    UITapGestureRecognizer *tapGesture =
	[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleTapGesture:)];
	
    tapGesture.numberOfTapsRequired = 2;
    [imageView addGestureRecognizer:tapGesture];
    [tapGesture release];
	
	//---pinch gesture---
    UIPinchGestureRecognizer *pinchGesture = 
	[[UIPinchGestureRecognizer alloc] initWithTarget:self action:@selector(handlePinchGesture:)];
	
    [imageView addGestureRecognizer:pinchGesture];
    [pinchGesture release];   
	
	[super viewDidLoad];
}

//---handle tap gesture---
-(IBAction) handleTapGesture:(UIGestureRecognizer *) sender {
	// HOW TO ACCOMPLISH THIS PART
    if (myImage.image IS IN FULL SCREEN MODE)
        myImage.image TO ORIGINAL SIZE MODE
    else
        myImage.image TO FULL SCREEN MODE
}

//---handle pinch gesture---
-(IBAction) handlePinchGesture:(UIGestureRecognizer *) sender {	
    CGFloat factor = [(UIPinchGestureRecognizer *) sender scale];	
    	
    if (sender.state == UIGestureRecognizerStateEnded){
        if (factor > 1) {
			//---pinching in---
            myImage.image TO FULL SCREEN
        } else {
			//---pinching out---
            myImage.image TO ORIGINAL SIZE
        }       
    }   
}


@end

Many thanks.

thepianoguy · April 11th, 2011, 11:21 PM

When you refer to "Full Screen Mode" do you me aspect fit, aspect fill or scale to fill?

Bob

Yujiin · April 13th, 2011, 08:16 AM

Thanks for the reply, i want to maintain the aspect ratio the resolution is not important. Thanks.

thepianoguy · April 13th, 2011, 09:11 PM

This is a simple way to implement the behavior you want-

Code:

#import <UIKit/UIKit.h>

@interface OriginalOrFullScreenViewController : UIViewController {
    
    UIImageView *theImage;
}
@property (nonatomic, retain) IBOutlet UIImageView *theImage;

-(void)resetImageInView;
-(void)expandImageToFullScreen;

@end

and

Code:

#import "OriginalOrFullScreenViewController.h"

@implementation OriginalOrFullScreenViewController
@synthesize theImage;

- (void)dealloc
{
    [theImage release];
    [super dealloc];
}

- (void)didReceiveMemoryWarning
{
    // Releases the view if it doesn't have a superview.
    [super didReceiveMemoryWarning];
    
    // Release any cached data, images, etc that aren't in use.
}

#pragma mark - View lifecycle

- (void)viewDidLoad {
    [theImage setUserInteractionEnabled:YES];
    float scaleFactor = theImage.image.size.height * 300.0; // 300 is an arbitrary width for the imageView width

    CGRect newSize =  CGRectMake(theImage.frame.origin.x, theImage.frame.origin.y, 300.0, scaleFactor/theImage.image.size.width);
    theImage.frame = newSize;   //The imageview is sized to fit the scaled image. 
    theImage.center = self.view.center;
    
    
	//---tap gesture---
    UITapGestureRecognizer *tapGesture =
	[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleTapGesture:)];
	
    tapGesture.numberOfTapsRequired = 2;
    [theImage addGestureRecognizer:tapGesture];
    [tapGesture release];
	
	//---pinch gesture---
    UIPinchGestureRecognizer *pinchGesture = 
	[[UIPinchGestureRecognizer alloc] initWithTarget:self action:@selector(handlePinchGesture:)];
	
    [theImage addGestureRecognizer:pinchGesture];
    [pinchGesture release];  
	
	[super viewDidLoad];
}

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

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    // Return YES for supported orientations
    return YES;
}


//---handle tap gesture---
-(IBAction) handleTapGesture:(UIGestureRecognizer *) sender {
    NSLog(@"Handling the tap");
    if (theImage.frame.size.width == self.view.frame.size.width || theImage.frame.size.height == self.view.frame.size.height) {
        [self resetImageInView];
    }else
        [self expandImageToFullScreen];
        
    
}
    

//---handle pinch gesture---
-(IBAction) handlePinchGesture:(UIGestureRecognizer *) sender {	
    NSLog(@"Handling the pinch");
    CGFloat factor = [(UIPinchGestureRecognizer *) sender scale];	
    
    if (sender.state == UIGestureRecognizerStateEnded){
        if (factor > 1) {
			//---pinching in---
            [self expandImageToFullScreen];
        } else {
			[self resetImageInView];
        }       
    }   
}

-(void)expandImageToFullScreen
{
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:0.25];
	CGRect frame = [self.view frame];
	CGRect imageRect = [theImage frame];
	float transformFactor;
    
    //Checks to see whether the image is wider or taller. If wider, the expansion ends when the image width equals the view width
    //If the image is taller, the expansion ends when the image height equals the view height
    
    if (imageRect.size.width/frame.size.width >= imageRect.size.height/frame.size.height) {
        transformFactor = frame.size.width/imageRect.size.width;
    }else{
        transformFactor = frame.size.height/imageRect.size.height;
    }


    [theImage setTransform:CGAffineTransformMakeScale(transformFactor, transformFactor)];
    [UIView commitAnimations];
}

-(void)resetImageInView
{
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:0.1];
    [theImage setTransform:CGAffineTransformIdentity];
    [UIView commitAnimations];
    
}

@end

Just a reminder, that User Interaction for the UIImageView has to be enabled. That can be done either in the .xib file or, as I did, in the controller.

Bob

Yujiin · April 14th, 2011, 08:33 AM

Thank you very much thepianoguy

for the complete and comprehensive reply, but this doesn't display the image on full screen on ipad, i test with this code :

Code:

FullscreenPinchTapViewController.h

Code:

 
#import <UIKit/UIKit.h>

@interface FullscreenPinchTapViewController : UIViewController {
	IBOutlet UIImageView *theImage;
}

@property (nonatomic, retain) IBOutlet UIImageView *theImage;

-(void)resetImageInView;
-(void)expandImageToFullScreen;

@end

Code:

FullscreenPinchTapViewController.m

Code:

 
#import "FullscreenPinchTapViewController.h"

@implementation FullscreenPinchTapViewController

@synthesize theImage;

- (void)dealloc
{
    [theImage release];
    [super dealloc];
}

- (void)didReceiveMemoryWarning
{
    // Releases the view if it doesn't have a superview.
    [super didReceiveMemoryWarning];
    
    // Release any cached data, images, etc that aren't in use.
}

#pragma mark - View lifecycle

- (void)viewDidLoad {
	// Loading our test image
	theImage.image = [UIImage   imageNamed:@"Bridge.jpeg"];
    [theImage setUserInteractionEnabled:YES];
    float scaleFactor = theImage.image.size.height * 300.0; // 300 is an arbitrary width for the imageView width
	
    CGRect newSize =  CGRectMake(theImage.frame.origin.x, theImage.frame.origin.y, 300.0, scaleFactor/theImage.image.size.width);
    theImage.frame = newSize;   //The imageview is sized to fit the scaled image. 
    theImage.center = self.view.center;
    
    
	//---tap gesture---
    UITapGestureRecognizer *tapGesture =
	[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleTapGesture:)];
	
    tapGesture.numberOfTapsRequired = 2;
    [theImage addGestureRecognizer:tapGesture];
    [tapGesture release];
	
	//---pinch gesture---
    UIPinchGestureRecognizer *pinchGesture = 
	[[UIPinchGestureRecognizer alloc] initWithTarget:self action:@selector(handlePinchGesture:)];
	
    [theImage addGestureRecognizer:pinchGesture];
    [pinchGesture release];  
	
	[super viewDidLoad];
}

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

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    // Return YES for supported orientations
    return YES;
}


//---handle tap gesture---
-(IBAction) handleTapGesture:(UIGestureRecognizer *) sender {
    NSLog(@"Handling the tap");
    if (theImage.frame.size.width == self.view.frame.size.width || theImage.frame.size.height == self.view.frame.size.height) {
        [self resetImageInView];
    }else
        [self expandImageToFullScreen];
	
    
}


//---handle pinch gesture---
-(IBAction) handlePinchGesture:(UIGestureRecognizer *) sender {	
    NSLog(@"Handling the pinch");
    CGFloat factor = [(UIPinchGestureRecognizer *) sender scale];	
    
    if (sender.state == UIGestureRecognizerStateEnded){
        if (factor > 1) {
			//---pinching in---
            [self expandImageToFullScreen];
        } else {
			[self resetImageInView];
        }       
    }   
}

-(void)expandImageToFullScreen
{
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:0.25];
	CGRect frame = [self.view frame];
	CGRect imageRect = [theImage frame];
	float transformFactor;
    
    //Checks to see whether the image is wider or taller. If wider, the expansion ends when the image width equals the view width
    //If the image is taller, the expansion ends when the image height equals the view height
    
    if (imageRect.size.width/frame.size.width >= imageRect.size.height/frame.size.height) {
        transformFactor = frame.size.width/imageRect.size.width;
    }else{
        transformFactor = frame.size.height/imageRect.size.height;
    }
	
	
    [theImage setTransform:CGAffineTransformMakeScale(transformFactor, transformFactor)];
    [UIView commitAnimations];
}

-(void)resetImageInView
{
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:0.1];
    [theImage setTransform:CGAffineTransformIdentity];
    [UIView commitAnimations];
    
}

@end

I test it in landscape and portrait mode and it seems that it just grow the size of the image not display it in full screen. Again thanks for the reply. Hope you can help me to fix that.

thepianoguy · April 14th, 2011, 10:35 AM

Sorry, rather careless on my part, since I never checked the methods in landscape mode.

There are a few steps to take. Assuming you want the the image to have a consistent "original" size and stay centered, in the .xib file Size inspector turn off all arrows and bars. If this is not done the image will resize and/or relocate depending on the orientation.
An interesting point to note is that regardless of the orientation, the container view always considers the width to be the short side of the device, and the height to be the long side (even in landscape mode).
This is the revised code, with the changes in bold:

Code:

#import "OriginalOrFullScreenViewController.h"

@implementation OriginalOrFullScreenViewController
@synthesize theImage;

- (void)dealloc
{
    [theImage release];
    [super dealloc];
}

- (void)didReceiveMemoryWarning
{
    // Releases the view if it doesn't have a superview.
    [super didReceiveMemoryWarning];
    
    // Release any cached data, images, etc that aren't in use.
}

#pragma mark - View lifecycle

- (void)viewDidLoad {
    
    [theImage setUserInteractionEnabled:YES];
    float scaleFactor = theImage.image.size.height * 300.0; // 300 is an arbitrary width for the imageView width

    CGRect newSize =  CGRectMake(theImage.frame.origin.x, theImage.frame.origin.y, 300.0, scaleFactor/theImage.image.size.width);
    theImage.frame = newSize;   //The imageview is sized to fit the scaled image. 
    theImage.center = self.view.center;
    
    
	//---tap gesture---
    UITapGestureRecognizer *tapGesture =
	[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleTapGesture:)];
	
    tapGesture.numberOfTapsRequired = 2;
    [theImage addGestureRecognizer:tapGesture];
    [tapGesture release];
	
	//---pinch gesture---
    UIPinchGestureRecognizer *pinchGesture = 
	[[UIPinchGestureRecognizer alloc] initWithTarget:self action:@selector(handlePinchGesture:)];
	
    [theImage addGestureRecognizer:pinchGesture];
    [pinchGesture release];  

    
	
	[super viewDidLoad];
}

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

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



//---handle tap gesture---
-(IBAction) handleTapGesture:(UIGestureRecognizer *) sender {
    NSLog(@"Handling the tap");
    if (theImage.frame.size.width == self.view.frame.size.width || theImage.frame.size.height == self.view.frame.size.height) {
        [self resetImageInView];
    }else
        [self expandImageToFullScreen];
        
    
}
    

//---handle pinch gesture---
-(IBAction) handlePinchGesture:(UIGestureRecognizer *) sender {	
    NSLog(@"Handling the pinch");
    CGFloat factor = [(UIPinchGestureRecognizer *) sender scale];	
    
    if (sender.state == UIGestureRecognizerStateEnded){
        if (factor > 1) {
			//---pinching in---
            [self expandImageToFullScreen];
        } else {
			[self resetImageInView];
        }       
    }   
}

-(void)expandImageToFullScreen
{
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:0.25];
	CGRect frame = [self.view frame];
	CGRect imageRect = [theImage frame];
	float transformFactor;

    
    //Checks to see whether the image is wider or taller. If wider, the expansion ends when the image width equals the view width
    //If the image is taller, the expansion ends when the image height equals the view height
    if ([self interfaceOrientation] == UIDeviceOrientationPortrait || [self interfaceOrientation] == UIDeviceOrientationPortraitUpsideDown )  {
        NSLog(@"in portrait mode");

    if (imageRect.size.width/frame.size.width >= imageRect.size.height/frame.size.height) {
        transformFactor = frame.size.width/imageRect.size.width;
    }else{
        transformFactor = frame.size.height/imageRect.size.height;
    }
    }
    //Resizing in Landscape mode. Note that the image height is compared to the device width, which in landscape mode is physically the height
    else{
        if (imageRect.size.height/frame.size.width >= imageRect.size.width/frame.size.height) {
            transformFactor = frame.size.width/imageRect.size.height;
        }else{
            transformFactor = frame.size.height/imageRect.size.width;
        }
        
    }


    [theImage setTransform:CGAffineTransformMakeScale(transformFactor, transformFactor)];
    [UIView commitAnimations];
}

-(void)resetImageInView
{
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:0.25];
    [theImage setTransform:CGAffineTransformIdentity];
    [UIView commitAnimations];
    
}

@end

Bob

Yujiin · April 14th, 2011, 12:15 PM

Thanks but still not displaying on full screen (you can test it). Here you can see a screenshot of the result before, after and the original image.

Before :

http://img853.imageshack.us/i/beforei.png/

After:

http://img593.imageshack.us/i/afterp.png/

Original image :

http://img825.imageshack.us/i/bridgeq.jpg/

thepianoguy · April 14th, 2011, 12:52 PM

The picture is not the same aspect ratio as the screen. The screen is 1004 x 768, the picture 800 x 400, so it will not fill the screen without clipping. When the picture is 1004 wide ( the physical horizontal screen width in landscape) it will be 502 high, leaving borders on the top and bottom of 251 pixels each; the white band that you see. If you don't want the band the picture will either be clipped on the sides (if the picture is sized to eliminate the top and bottom bands the image height will be 768 and the width 1536 which is greater than the width of the screen) or distorted, since the height will be stretched in relation to the width. In my original reply I asked whether you wished to maintain the aspect ratio, and you replied "YES". There is no way to maintain the aspect ratio and completely fill the screen unless the picture's width and height are proportional to the screen. Since the image size is not in proportion to the screen size, if the aspect ratio is retained there will either be clipping or bands.
The example I supplied maximizes the dimensions while maintaining the aspect ratio. If this is not what you actually want, you need to decide whether you wish to clip the image or distort it.

Bob

thepianoguy · April 14th, 2011, 02:06 PM

For what it is worth, there is an issue with my solution. When the image is maximized and the device rotated the image is not displayed correctly in the new orientation. The following resolves that issue

Code:

#import <UIKit/UIKit.h>

@interface OriginalOrFullScreenViewController : UIViewController {
    
    UIImageView *theImage;
    BOOL fullScreen;
}
@property (nonatomic, retain) IBOutlet UIImageView *theImage;
@property (nonatomic, assign, getter = isFullScreen) BOOL fullScreen;

-(void)resetImageInView;
-(void)expandImageToFullScreen;

@end

and

Code:

#import "OriginalOrFullScreenViewController.h"

@implementation OriginalOrFullScreenViewController
@synthesize theImage;
@synthesize fullScreen;

- (void)dealloc
{
    [theImage release];
    [super dealloc];
}

- (void)didReceiveMemoryWarning
{
    // Releases the view if it doesn't have a superview.
    [super didReceiveMemoryWarning];
    
    // Release any cached data, images, etc that aren't in use.
}

#pragma mark - View lifecycle

- (void)viewDidLoad {
    self.fullScreen = NO;
    
    [theImage setUserInteractionEnabled:YES];
    float scaleFactor = theImage.image.size.height * 300.0; // 300 is an arbitrary width for the imageView width

    CGRect newSize =  CGRectMake(theImage.frame.origin.x, theImage.frame.origin.y, 300.0, scaleFactor/theImage.image.size.width);
    theImage.frame = newSize;   //The imageview is sized to fit the scaled image. 
    theImage.center = self.view.center;
    
    
	//---tap gesture---
    UITapGestureRecognizer *tapGesture =
	[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleTapGesture:)];
	
    tapGesture.numberOfTapsRequired = 2;
    [theImage addGestureRecognizer:tapGesture];
    [tapGesture release];
	
	//---pinch gesture---
    UIPinchGestureRecognizer *pinchGesture = 
	[[UIPinchGestureRecognizer alloc] initWithTarget:self action:@selector(handlePinchGesture:)];
	
    [theImage addGestureRecognizer:pinchGesture];
    [pinchGesture release];  

    
	
	[super viewDidLoad];
}

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

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

- (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration
{
    if ([self isFullScreen]) {
      //  [theImage setTransform:CGAffineTransformIdentity];
        [self resetImageInView];
     
    } 
}

- (void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration
{
    if ([self isFullScreen]) {
        NSLog(@"FullScreen is %d", [self isFullScreen]);
        
        [self performSelector:@selector(expandImageToFullScreen) withObject:self afterDelay:.2];
    }
    
}





//---handle tap gesture---
-(IBAction) handleTapGesture:(UIGestureRecognizer *) sender {
    NSLog(@"Handling the tap");
    if ([self isFullScreen]) {
        [self resetImageInView];
        self.fullScreen = NO;
    }else
    {
        [self expandImageToFullScreen];
        self.fullScreen = YES;
    }
    
    
        
    
}
    

//---handle pinch gesture---
-(IBAction) handlePinchGesture:(UIGestureRecognizer *) sender {	
    NSLog(@"Handling the pinch");
    CGFloat factor = [(UIPinchGestureRecognizer *) sender scale];	
    
    if (sender.state == UIGestureRecognizerStateEnded){
        if (factor > 1) {
			//---pinching in---
            [self expandImageToFullScreen];
            self.fullScreen = YES;
        } else {
			[self resetImageInView];
            self.fullScreen = NO;
        }       
    }   
}

-(void)expandImageToFullScreen
{
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:0.25];
	CGRect frame = [self.view frame];
	CGRect imageRect = [theImage frame];
	float transformFactor;
    
    //Checks to see whether the image is wider or taller. If wider, the expansion ends when the image width equals the view width
    //If the image is taller, the expansion ends when the image height equals the view height
    if ([self interfaceOrientation] == UIDeviceOrientationPortrait || [self interfaceOrientation] == UIDeviceOrientationPortraitUpsideDown )  {
        NSLog(@"in portrait mode");

    if (imageRect.size.width/frame.size.width >= imageRect.size.height/frame.size.height) {
        transformFactor = frame.size.width/imageRect.size.width;
    }else{
        transformFactor = frame.size.height/imageRect.size.height;
    }
    }
    //Note that the image height is compared to the device width, which in landscape mode is physically the height
    else{
        if (imageRect.size.height/frame.size.width >= imageRect.size.width/frame.size.height) {
            transformFactor = frame.size.width/imageRect.size.height;
        }else{
            transformFactor = frame.size.height/imageRect.size.width;
        }
        
    }


    [theImage setTransform:CGAffineTransformMakeScale(transformFactor, transformFactor)];
 //   theImage.center = self.view.center;

    [UIView commitAnimations];
}

-(void)resetImageInView
{
    NSLog(@"Resetting");
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:0.25];
    [theImage setTransform:CGAffineTransformIdentity];
    [UIView commitAnimations];
    
    
}

@end

Yujiin · April 14th, 2011, 03:12 PM

Really thanks for all this explanation de great code

, i see in this link that it's possible but i'm unable to do the same :

http://cocoawithlove.com/2010/09/zoo...te-uiview.html

Thanks.