Pinch

Detect a two-finger pinch or spread. To detect multiple touches, the initWithFrame method of class View has to set the multipleTouchEnabled property of the View to YES.

To simulate two fingers in the iPhone Simulator, hold down the option key and keep it down while you click and/or drag. To keep the distance between the fingers constant, hold down the shift key too.

Source code in Pinch.zip

1. main.m
2. Class PinchAppDelegate
3. Class View.

The allObjects method of class NSSet returns an NSArray to which you can then apply objectAtIndex:. If touchesMoved:withEvents: sees that the distance between the fingers has increased from 100 to 103 pixels, it will multiply the distance by a ratio of 1.03.

drawRect: uses the cast (int) and the format %d to print the distance as an int.

Things to try

1. Use a UILabel instead of a subclass of UIView. See Gone. You must set the userInteractionEnabled property of the UILabel to YES.


2. Create a little yellow view inside of the View, like the little yellow view inside of the View here. Give class View the following instance variable in View.h.

   	UIView *view;
   

   Initialize the little view in the initWithFrame: method of class View, immediately after we set the distance. We scale the little view as in Thing to try #8.

   		CGRect b = self.bounds;
   		CGFloat h = 40;	//height and width
   		CGFloat w = 2 * h;
   
   		//Center the little view in the View.
   		CGRect f = CGRectMake(
   			b.origin.x + (b.size.width - w) / 2,
   			b.origin.y + (b.size.height - h) / 2,
   			w,
   			h
   		);
   
   		view = [[UIView alloc] initWithFrame: f];
   		view.backgroundColor = [UIColor yellowColor];
   
   		view.transform = CGAffineTransformMakeScale(
   			distance / 50,
   			distance / 50
   		);
   
   		[self addSubview: view];
   

   In the touchesMoved:withEvents: method of class View, insert the following code after we update the distance.

   		view.transform = CGAffineTransformMakeScale(
   			distance / 50,
   			distance / 50
   		);
   

   Then comment out drawRect: completely.


3. Pinch Bashar al-Assad. Add the file assad.jpg to the project. (Better yet, convert it first to png.) Change the little yellow view to a UIImageView. An UIImageView is a UIView that is specialized for displaying one image, as the UILabel we saw here was specialized for displaying one line of text. In View.h, change the declaration of the view instance variable to

   	UIImageView *view;
   

   Change the initialization of view in the initWithFrame: method of class View to the following.

   		UIImage *image = [UIImage imageNamed: @"assad.jpg"];
   		if (image == nil) {
   			NSLog(@"could not create image");
   			return nil;
   		}
   		view = [[UIImageView alloc] initWithImage: image];
   
   		//Keep the UIImageView the same size,
   		//but center it in the View.
   
   		CGRect b = self.bounds;
   
   		view.center = CGPointMake(
   			b.origin.x + b.size.width / 2,
   			b.origin.y + b.size.height/ 2
   		);
   
   		view.transform = CGAffineTransformMakeScale(
   			distance / 50,
   			distance / 50
   		);
   
   		[self addSubview: view];