Some recipes in this article require Mac OS X Snow Leopard 10.6.
The Trackpad preferences allow you to easily adjust many gestures that will used in the following recipes.
To make sure that your trackpad is recognizing gestures, make sure that you have set the correct preferences to enable gesture support under the Trackpad System Preference.
The pinch gesture is a gesture normally used for the zooming of a view or for changing the font size of text. In this recipe, we will create a custom view that handles the pinch gesture to resize a custom view.
In Xcode, create a new Cocoa Application and name it Pinch.
NSBezierPath *path = [NSBezierPath bezierPathWithRoundedRect:
[self bounds] xRadius:8.0 yRadius:8.0];
[path setClip];
[[NSColor whiteColor] setFill];
[NSBezierPath fillRect:[self bounds]];
[path setLineWidth:3.0];
[[NSColor grayColor] setStroke];
[path stroke];
– (void)magnifyWithEvent:(NSEvent *)event {
NSSize size = [self frame].size;
size.height = size.height * ([event magnification] + 1.0);
size.width = size.width * ([event magnification] + 1.0);
[self setFrameSize:size];
}
In our drawRect: method, we use Cocoa to draw a simple rounded rectangle with a three point wide gray stroke. Next, we implement the magnifyWithEvent: method. Because NSView inherits from NSResponder, we can override the magnifyWithEvent: method from the NSResponder class. When the user starts a pinch gesture, and the magnifyWithEvent: method is called, the NSEvent passed to us in the magnifyWithEvent: method which contains a magnification factor we can use to determine how much to scale our view. First, we get the current size of our view. We add one to the magnification factor and multiply by the frame’s width and height to scale the view. Finally, we set the frame’s new size.
You will notice when running the sample code that our view resizes with the lower-left corner of our custom view remaining in a constant position. In order to make our view zoom in and out from the center, change the magnifyWithEvent: method’s code to the following:
NSSize size = [self frame].size;
NSSize originalSize = size;
size.height = size.height * ([event magnification] + 1.0);
size.width = size.width * ([event magnification] + 1.0);
[self setFrameSize:size];
CGFloat deltaX = (originalSize.width – size.width) / 2;
CGFloat deltaY = (originalSize.height – size.height) / 2;
NSPoint origin = self.frame.origin;
origin.x = origin.x + deltaX;
origin.y = origin.y + deltaY;
[self setFrameOrigin:origin];
Basically, what we have done is moved our custom view’s origin by the difference between the original size and the new size.
The swipe gesture is detected when three or more fingers move across the trackpad. This gesture is often used to page through a series of images. In this recipe, we will create a custom view that interprets the swipe gesture in four different directions and displays the direction of the swipe in our custom view:
In Xcode, create a new Cocoa Application and name it Swipe.
NSString *direction;
NSBezierPath *path = [NSBezierPath bezierPathWithRoundedRect:
[self bounds] xRadius:8.0 yRadius:8.0];
[path setClip];
[[NSColor whiteColor] setFill];
[NSBezierPath fillRect:[self bounds]];
[path setLineWidth:3.0];
[[NSColor grayColor] setStroke];
[path stroke];
if (direction == nil) {
direction = @””;
}
NSAttributedString *string = [[[NSAttributedString alloc]
initWithString:direction] autorelease];
NSPoint point = NSMakePoint(([self bounds].size.width / 2) –
([string size].width / 2), ([self bounds].size.height / 2) –
([string size].height / 2));
[string drawAtPoint:point];
– (void)swipeWithEvent:(NSEvent *)event {
if ([event deltaX] > 0) {
direction = @”Left”;
} else if ([event deltaX] < 0) {
direction = @”Right”;
} else if ([event deltaY] > 0) {
direction = @”Up”;
} else if ([event deltaY] < 0){
direction = @”Down”;
}
[self setNeedsDisplay:YES];
}
As we did in the other recipes in this article, we draw a simple rounded rectangle in the drawRect: method of the view. However, we will also be drawing a string denoting the direction of the swipe in the middle of our view.
In order to handle the swipe gesture, we override the swipeWithEvent: method from the NSResponder class which NSView inherits. By inspecting the values of deltaX and deltaY of the NSEvent passed into the swipeWithEvent: method, we can determine the direction of the swipe. We set the direction string with the direction of the swipe so we can draw it in the drawRect: method. Finally, we call setNeedsDisplay:YES to force our view to redraw itself.
You might have noticed that we do not need to override the acceptsFirstResponder: method in our view in order to handle the gesture events. When the mouse is located within our view, we automatically receive the gesture events. All we need to do is implement the methods for the gestures we are interested in.
The rotate gesture can be used in any number of ways in a custom view. From rotating the view itself or simulating a rotating dial in a custom control. This recipe will show you how to implement the rotate gesture to rotate a custom view. Using your thumb and index finger, you will be able to rotate the custom view around its center:
In Xcode, create a new Cocoa Application and name it Rotate.
NSBezierPath *path = [NSBezierPath bezierPathWithRoundedRect:
[self bounds] xRadius:8.0 yRadius:8.0];
[path setClip];
[[NSColor whiteColor] setFill];
[NSBezierPath fillRect:[self bounds]];
[path setLineWidth:3.0];
[[NSColor grayColor] setStroke];
[path stroke];
– (void)rotateWithEvent:(NSEvent *)event {
CGFloat currentRotation = [self frameCenterRotation];
[self setFrameCenterRotation:(currentRotation + [event
rotation])];
}
As we did in the previous recipe, we will create a simple rounded rectangle with a three-point stroke to represent our custom view.
Our custom view overrides the rotateWithEvent: method from NSResponder to handle the rotation gesture. The rotation property of the NSEvent passed to us in the rotateWithEvent: contains the change in rotation from the last time the rotateWithEvent: method was called. We simply add this value to our view’s frameCenterRotation value to get the new rotation.
The value returned from NSEvent‘s rotation will be negative when the rotation is clockwise and positive when the rotation is counter-clockwise.
I remember deciding to pursue my first IT certification, the CompTIA A+. I had signed…
Key takeaways The transformer architecture has proved to be revolutionary in outperforming the classical RNN…
Once we learn how to deploy an Ubuntu server, how to manage users, and how…
Key-takeaways: Clean code isn’t just a nice thing to have or a luxury in software projects; it's a necessity. If we…
While developing a web application, or setting dynamic pages and meta tags we need to deal with…
Software architecture is one of the most discussed topics in the software industry today, and…