Tài liệu Lập trình iPhone part 13 docx

If the first responder doesn't handle the event, it passes the event to its view controller.. Most table view cells don’t respond to gestures, however, and if they don’t, the event proce

Taps, Touches,

and Gestures

he iPhone screen, with its crisp, bright, 160 pixels per inch, touch-sensitive dis- play, is truly a thing of beauty and a masterpiece of engineering The iPhone's multitouch screen is one of the key factors in iPhone's tremendous usability

Because the screen can detect multiple touches at the same time and track

them independently, applications are able to detect a wide range of gestures, giving the user power that goes beyond the interface

Suppose you are in the Mail application exploring your inbox, and you decide

to delete an e-mail You could tap the Edit button, select the row, and then tap the Delete button: that’s three steps Or you could just swipe your finger across the row you want to delete and then tap the Delete button that pops up—two steps

This example is just one of the countless gestures that are made possible by

iPhone multitouch screen You can pinch your fingers together to zoom into

a picture or reverse pinch to zoom out You can double-tap a frame in Mobile Safari to zoom so that the frame takes up your entire screen You can swipe

two fingers across a scrollable view, such as a long web page or e-mail mes-

sage, and the view will scroll, up and down, along with your fingers

In this chapter, we're going to look at the underlying architecture that lets you detect gestures You'll learn how to detect the most common ones and learn

how to create and detect a completely new gesture

Multitouch Terminology

Before we dive into the architecture, let’s go over some basic vocabulary First, a gesture is any sequence of events that happens from the time you touch the screen with one or more fingers until you lift your fingers off the screen No matter how long it takes, as long as one

or more fingers are still against the screen, you are still inside a gesture (unless a system event, such as an incoming phone call, interrupts it) A gesture is passed through the sys- tem inside an event Events are generated when you interact with the iPhone's multitouch screen and contain information about the touch or touches that occurred

The term touch, obviously, refers to a finger being placed on the iPhone's screen The num- ber of touches involved in a gesture is equal to the number of fingers on the screen at the same time You can actually put all five fingers on the screen, and as long as they aren't too close to each other, the iPhone can recognize and track them all Now, there aren’t many useful five-finger gestures, but it’s nice to know the iPhone can handle one if it needs to

A tap happens when you touch the screen with a single finger and then immediately lift your finger off the screen without moving it around The iPhone keeps track of the number

of taps and can tell you if the user double-tapped or triple-tapped or even twenty-tapped

It handles all the timing and other work necessary to differentiate between two single-taps and a double-tap, for example It’s important to note that the iPhone only keeps track of taps when one finger is used If it detects multiple touches, it resets the tap count to one

The Responder Chain

Since gestures get passed through the system inside of events, and events get passed through the responder chain, you need to have an understanding of how the responder chain works in order to handle gestures properly If you’ve worked with Cocoa for Mac OS

X, you're probably familiar with the concept of a responder chain, as the same basic mecha- nism is used in both Cocoa and Cocoa Touch If this is new material, don’t worry; we'll explain how it works

Several times in this book, we’ve mentioned the first resoonder, which is usually the object with which the user is currently interacting The first responder is the start of the responder chain There are other responders as well Any class that has UIResponder as one of its superclasses is a responder UIVi ew is a subclass of UTResponder and UIControl is a sub- class of UIView, so all views and all controls are responders UIViewControl ler is also

a subclass of UIResponder, meaning that it is a responder, as are all of its subclasses like UINavigationController and UITabBarControl ler Responders, then, are so named because they respond to system-generated events, such as screen touches

If the first resoonder doesn’t handle a particular event, such as a gesture, it passes that event

up the responder chain If the next object in the chain responds to that particular event, it will usually consume the event, which stops the event’s progression through the responder chain In some cases, if a responder only partially handles an event, that responder will take

an action and forward the event to the next responder in the chain That's not usually what happens, though Normally, when an object responds to an event, that’s the end of the line for the event If the event goes through the entire responder chain and no object handles the event, the event is then discarded

Here’s another, more specific look at the responder chain The first responder is almost always

a view or control and gets the first shot at responding to an event If the first responder doesn't handle the event, it passes the event to its view controller If the view controller doesn’t con- sume the event, the event is then passed to the first responder’s parent view If the parent view doesn't respond, the event will go to the parent view’s controller, if it has one The event will proceed up the view hierarchy, with each view and then that view’s controller getting a chance

to handle the event If the event makes it all the way up through the view hierarchy, the event

is passed to the application's window If the window doesn’t handle the event, then it passes that event to our application’s UIApp1i cation object instance If UIApp1ication doesn't respond to it, the event goes gently into that good night

This process is important for a number of reasons First, it controls the way gestures can be handled Let's say a user is looking at a table and swipes a finger across a row of that table What object handles that gesture?

If the swipe is within a view or control that’s a subview of the table view cell, then that view

or control will get a chance to respond If it doesn’t, the table view cell gets a chance In an application like Mail, where a swipe can be used to delete a message, the table view cell probably needs to look at that event to see if it contains a swipe gesture Most table view cells don’t respond to gestures, however, and if they don’t, the event proceeds up to the table view, then up the rest of the responder chain until something responds to that event

or it reaches the end of the line

Forwarding an Event: Keeping the Responder Chain Alive

Let's take a step back to that table view cell in the Mail application We don’t know the inter- nal details of Apple’s Mail application, but let’s assume, for the nonce, that the table view cell handles the delete swipe and only the delete swipe That table view cell has to implement the methods related to receiving touch events (which you'll see in a few minutes) so that it can check to see if that event contained a swipe gesture If the event contains a swipe, then the table view cell takes an action, and that’s that; the event goes no further

If the event doesn't contain a swipe gesture, the table view cell is responsible for forwarding that event manually to the next object in the responder chain If it doesn’t do its forwarding job, the

table and other objects up the chain will never get a chance to respond, and the application may not function as the user expects That table view cell could prevent other views from recognizing

a gesture

Whenever you respond to a touch event, you have to keep in mind that your code doesn’t work ina vacuum If an object intercepts an event that it doesn’t handle, it needs to pass it along man- ually, by calling the same method on the next responder Here's a bit of fictional code:

-(void) respondToFictionalEvent: CUIEvent *)event {

The Multitouch Architecture

Now that you know a little about the responder chain, let’s look at the process of handling gestures As we've indicated, gestures get passed along the responder chain, embedded

in events That means that the code to handle any kind of interaction with the multitouch screen needs to be contained in an object in the responder chain Generally, that means

we can either choose to embed that code in a subclass of UIView or embed the code in

a UIViewControl ler

So does this code belong in the view or in the view controller?

If the view needs to do something to itself based on the user’s touches, the code prob- ably belongs in the class that defines that view For example, many control classes, such

as UISwitch and UISlider, respond to touch-related events A UISwi tch might want to turn itself on or off based on a touch The folks who created the UI Swi tch class embedded gesture-handling code in the class so the UISwi tch can respond to a gesture

Often, however, when the gesture being processed affects more than the object being touched, the gesture code really belongs in the view’s controller class For example, if the user makes

a gesture touching one row that indicates that all rows should be deleted, the gesture should be handled by code in the view controller The way you respond to touches and gestures in both situations is exactly the same, regardless of the class to which the code belongs

The Four Gesture Notification Methods

There are four methods used to notify a responder about touches and gestures When the user first touches the screen, the iPhone looks for a responder that has a method called touchesBegan:withEvent: To find out when the user first begins a gesture or taps the screen, implement this method in your view or your view controller Here’s an example of what that method might look like:

- (void) touchesBegan: (NSSet *)touches withEvent: (UIEvent *)event {

NSUInteger numTaps = [[touches anyObject] tapCount] ;

NSUInteger numTouches = [touches count];

// Do something here

This method, and all of the touch-related methods, gets passed an NSSet instance called

touches and an instance of UIEvent You can determine the number of fingers currently pressed against the screen by getting a count of the objects in touches Every object in touches is

a UITouch event that represents one finger touching the screen If this touch is part of a series

of taps, you can find out the tap count by asking any of the UITouch objects Of course, if there’s more than one object in touches, you know the tap count has to be one, because the system keeps tap counts only as long as just one finger is being used to tap the screen In the preceding example, if numTouches is 2, you know the user just double-tapped the screen

All of the objects in touches may not be relevant to the view or view controller where you've implemented this method A table view cell, for example, probably doesn’t care about touches that are in other rows or that are in the navigation bar You can get a subset of touches that has only those touches that fall within a particular view from the event, like so:

NSSet *myTouches = [event touchesForView:self.view] ;

Every UITouch represents a different finger, and each finger is located at a different position

on the screen You can find out the position of a specific finger using the UITouch object It will even translate the point into the view’s local coordinate system if you ask it to, like this:

CGPoint point = [touch locationInView:self];

You can get notified while the user is moving fingers across the screen by implementing touchesMoved:withEvent: This method gets called multiple times during a long drag, and each time it gets called, you will get another set of touches and another event In addition to being able to find out each finger’s current position from the UITouch objects, you can also find out the previous location of that touch, which is the finger’s position the last time either touchesMoved:withEvent: or touchesBegan:withEvent: was called

When the user’s fingers are removed from the screen, another event, touchesEnded: wï thEvent:,

is invoked When this method gets called, you know that the user is done with a gesture

There's one final touch-related method that responders might implement It’s called

touchesCancel led: withEvent:, and it gets called if the user is in the middle of a gesture when something happens to interrupt it, like the phone ringing This is where you can do any cleanup you might need so you can start fresh with a new gesture When this method is called, touchesEnded:withEvent: will not get called for the current gesture

OK, enough theory—let’s see some of this in action

The Touch Explorer Application

We're going to build a little application that will give you Touches Stopped

a better feel for when the four touch-related responder Seven

methods get called In Xcode, create a new project using

the view-based application template, and call the new proj-

ect TouchExplorer TouchExplorer will print messages to

the screen, containing the touch and tap count, every time

a touch-related method gets called (see Figure 13-1)

soil Carrior 10-51 PM

We need three labels for this application: one to indicate

which method was last called, another to report the cur-

rent tap count, and a third to report the number of touches

Single-click TouchExplorerViewController.h, and add three

outlets and a method declaration The method will be used to

update the labels from multiple places Figure 13-1 The Touch

#import <UIKit/UIKit h> Explorer application

@interface TouchExplorerViewController : UIViewController {

TBOutTet UILabel *messageLabel ;

TBOutTet UTLabeT *tapsLabelT ;

TBOutTet UILabel *touchesLabel ;

}

@property (nonatomic, retain) UILabel *messageLabel;

@property (nonatomic, retain) UILabel *tapsLabel;

@property (nonatomic, retain) UILabel *touchesLabel;

- (void) updateLabelsFromTouches: (NSSet *)touches;

@end

Now, double-click TouchExplorerViewController.xib to

View is not open, double-click the View icon to open it

Drag three Labels from the library to the View window Alpha —————=@ | 1.00)

You should resize the labels so that they take up the Background| —|

full width of the view and center the text, but the exact Tag Fœ=—=—=

placement of the labels doesn’t matter You can also play Drawing M Opaque [ Ì Hidden

Control-drag from the File’s Owner icon to each of the

three labels, connecting one to the messageLabel out-

let, another to the tapsLabel outlet, and the last one to

the touchesLabel outlet Finally, single-click the View Figure 13-2 Making sure that the

icon, and press $81 to bring up the attributes inspector Viewis set to receive multitouch

(see Figure 13-2) On the inspector, make sure that both events

User Interacting Enabled and Multiple Touch are checked

If Multiple Touch is not checked, your controller class's touch methods will always receive one and only one touch no matter how many fingers are actually touching the phone's screen

When you're done, save and close the nib, and head back to Xcode

Single-click TouchExplorerViewController.m, and add the following code:

- (void) updateLabelsFromTouches: (NSSet *)touches {

}

NSUTnteger numTaps = [[touches anyObject] tapCount];

NSString *tapsMessage = [[NSString alloc]

initWithFormat:@"%d taps detected", numTaps];

tapsLabel.text = tapsMessage;

[tapsMessage release];

NSUInteger numTouches = [touches count];

NSString *touchMsg = [[NSString alloc] initWithFormat:

@"%d touches detected", numTouches];

touchesLabel.text = touchMsg;

[touchMsg release];

(BOOL) shouldAutorotateToInterfaceOrientation:

(UIInterfaceOrientation)interfaceOrientation {

// Return YES for supported orientations

return CinterfaceOrientation == UIInterfaceOrientationPortrait);

(void) didReceiveMemoryWarning {

[super didReceiveMemoryWarning];

// Releases the view if it doesn't have a superview

// Release anything that's not essential, such as cached data

messageLabel.text = @''Touches Began";

[self updateLabel sFromTouches: touches];

- (void) touchesCancelled:(NSSet *)touches withEvent: (UIEvent *)event{

messageLabel text = @"Touches Cancelled";

[self updateLabel sFromTouches: touches];

- (void) touchesEnded: (NSSet *)touches withEvent: (UIEvent *)event {

messageLabel.text = @"Touches Stopped.";

[self updateLabel sFromTouches: touches];

}

- (void) touchesMoved: (NSSet *)touches withEvent: (UIEvent *)event {

messageLabel.text = @"Drag Detected";

[self updateLabel sFromTouches: touches];

@end

In this controller class, we implement all four of the touch-related methods we discussed earlier Each one sets messageLabel so the user can see when each method gets called Next, all four of them call updateLabelsFromTouches: to update the other two labels The updateLabel sFromTouches: method gets the tap count from one of the touches, figures out the number of touches by looking at the count of the touches set, and updates the labels with that information

Compile and run the application If you're running in the simulator, try repeatedly clicking the screen to drive up the tap count, and try clicking and holding down the mouse button while dragging around the view to simulate a touch and drag You can emulate a two-finger pinch in the iPhone simulator by holding down the option key while you click with the mouse and drag You can also simulate two-finger swipes by first holding down the option key to simulate a pinch, then moving the mouse so the two dots representing virtual fin- gers are next to each other, and then holding down the shift key (while still holding down the option key) Pressing the shift key will lock the position of the two fingers relative to each other, and you can do swipes and other two-finger gestures You won't be able to do gestures that require three or more fingers, but you can do most two-finger gestures on the simulator using combinations of the option and shift keys

If you're able to run this program on your iPhone or iPod touch, see how many touches you can get to register at the same time Try dragging with one finger, then two fingers, then three Try double- and triple-tapping the screen, and see if you can get the tap count to go

up by tapping with two fingers

Play around with the TouchExplorer application until you feel comfortable with what’s hap- pening and with the way that the four touch methods work Once you're ready, let’s look at how to detect one of the most common gestures, the swipe

The Swipes Application

Create a new project in Xcode using the view-based applica-

tion template again, this time naming the project Swipes

The application we're about to build does nothing more than

detect swipes, both horizontal and vertical (see Figure 13-3)

If you swipe your finger across the screen from left to right,

right to left, top to bottom, or bottom to top, Swipes will dis-

play a message across the top of the screen for a few seconds

informing you that a swipe was detected

it Caron M12 PM, =

Vertical swipe detected

Detecting swipes is relatively easy We're going to define

a minimum gesture length in pixels, which is how far the user

has to swipe before the gesture counts as a swipe We'll also

define a variance, which is how far from a straight line our

user can veer and still have the gesture count as a horizontal

or vertical swipe A diagonal line generally won't count as Figure 13-3 The Swipes

a swipe, but one that’s just a little off from horizontal or verti- —— qpplication

cal will

When the user touches the screen, we'll save the location of the first touch in a variable Then, we'll check as the user’s finger moves across the screen to see if it reaches a point where it has gone far enough and straight enough to count as a swipe Let’s build it

Click SwipesViewController.h, and add the following code:

#define kMinimumGestureLength 25

#define kMaximumVariance 5

#import <UIKit/UIKit.h>

@interface SwipesViewController : UIViewController {

TBOutTet UILabel *labeT;

CGPoint gestureStartPoint;

}

@property (nonatomic, retain) UILabel *label;

@property CGPoint gestureStartPoint;

- (void)eraseText;

@end

We start by defining a minimum gesture length of 25 pixels and a variance of 5 If the user was doing a horizontal swipe, the gesture could end up 5 pixels above or below the starting vertical position and still count as a swipe as long as the user moved 25 pixels horizontally

In a real application, you would probably have to play with these numbers a bit to find what worked in your application's interface

We also declare an outlet for our one label and a variable to hold the first spot the user touches The last thing we do is declare a method that will be used to erase the text after

a few seconds

Double-click SwipesViewController.xib to open it in Interface Builder Make sure that the view

is set to receive multiple touches using the attributes inspector, and drag a Label from the library and drop it on the View window Set up the label so it takes the entire width of the view from blue line to blue line, and feel free to play with the text attributes to make the label easier to read Next, double-click the label and delete its text Control-drag from the Files Owner icon to the label, and connect it to the label outlet Save your nib, close, and go back to Xcode

Single-click SwipesViewController.m, and add the following code We'll discuss what it’s doing when you're done:

// Return YES for supported orientations

return CinterfaceOrientation == UIInterfaceOrientationPortrait);

}

- (void)didReceiveMemoryWarning {

[super didReceiveMemoryWarning];

// Releases the view if it doesn't have a superview

// Release anything that's not essential, such as cached data

UITouch *touch = [touches anyObject];

gestureStartPoint = [touch locationInView:self.view];

}

- (void) touchesMoved: (NSSet *)touches withEvent: (UIEvent *)event {

UITouch *touch = [touches anyObject];

CGPoint currentPosition = [touch locationInView: sel f.view];

CGFloat deltaX

CGFloat deltaY

fabsf(gestureStartPoint.x - currentPosition.x); fabsf(gestureStartPoint.y - currentPosition.y) ;

if (deltaX >= kMinimumGestureLength && deltaY <= kMaximumVariance) { label.text = @"Horizontal swipe detected";

[self performSelector: @selector(eraseText)

withObject:nil afterDelay:2];

}

else if (deltaY >= kMinimumGestureLength &&

deltaX <= kMaximumVariance) {

label.text = @"Vertical swipe detected";

[self performSelector:@selector(eraseText) withObject:nil

UITouch *touch = [touches anyObject];

gestureStartPoint = [touch locationInView:self.view];

In the next method, touchesMoved:withEvent:, we do the real work First, we get the cur- rent position of the user’s finger:

UITouch *touch = [touches anyObject];

CGPoint currentPosition = [touch locationInView:self.view];

After that, we calculate how far the user's finger has moved both horizontally and vertically from its starting position The function fabsf © is from the standard C math library that returns the absolute value of a float This allows us to subtract one from the other without having to worry about which is the higher value:

CGFloat deltaX = fabsf(gestureStartPoint.x - currentPosition.x) ; CGFloat deltaY = fabsf(gestureStartPoint.y - currentPosition.y) ;

Once we have the two deltas, we check to see if the user has moved far enough in one direction without having moved too far in the other to constitute a swipe If they have, we set the label's text to indicate whether a horizontal or vertical swipe was detected We also use performSelector :withObject:afterDelay:to erase the text after it’s been on the screen for 2 seconds That way, the user can practice multiple swipes without having to worry if the label is referring to an earlier attempt or the most recent one:

if (deltaX >= kMinimumGestureLength && deltaY <= kMaximumVariance) { label.text = @"Horizontal swipe detected";

[self performSelector: @selector(eraseText)

withObject:nil afterDelay:2];

}

else if (deltaY >= kMinimumGestureLength &&

deltaX <= kMaximumVariance) {

label.text = @"Vertical swipe detected";

[self performSelector: @selector(eraseText)

withObject:nil afterDelay:2];

Go ahead and compile and run If you find yourself clicking and dragging with no visible results, be patient Click and drag straight down or straight across until you get the hang of swiping

Implementing Multiple Swipes

In the Swipes application, we only worried about single-finger swipes, so we just grabbed any object out of the touches set to figure out where the user's finger was during the swipe This approach is fine if you're only interested in single-finger swipes, which is the most com- mon type of swipe used

We have a bit of a problem, however, if we want to implement two- or three-finger swipes That problem is that we are provided the touches as an NSSet, not as an NSArray Sets are unordered collections, which means that we have no easy way to figure out which finger is which when we do comparison We can't assume that the first touch in the set, for example, is referring to the same finger that was the first touch in the set back when the gesture started

To make matters worse, it’s completely possible that, when the user does a two- or three- finger gesture, one finger will touch the screen before another, meaning that in the

touchesBegan:withEvent: method, we might only get told about one touch

We need to find a way to detect a multiple-finger swipe without falsely identifying

other gestures, such as pinches, as swipes The solution is fairly straightforward When

touchesBegan:withEvent: gets notified that a gesture has begun, we save one finger’s posi- tion just as we did before No need to save all the finger positions Any one of them will do

When we check for swipes, we loop through all the touches provided to the

touchesMoved:withEvent: method, comparing each one to the saved point If the user did a multiple-finger swipe, when comparing to the saved point, at least one of the touches

we get in that method will indicate a swipe If we find either a horizontal or vertical swipe,

we loop through the touches again and make sure that every finger is at least the mini- mum distance away from the first finger’s horizontal or vertical position, depending on the type of swipe Let's retrofit the Swipes application to detect multiple-finger swipes now In order to implement this, we need to make a minor change to the header file, so single click SwipesViewController.h, and add the following code:

- (void) touchesMoved: (NSSet *)touches withEvent: (UTEvent *)event {

SwipeType swipelype = kNoSwipe;

for C(UITouch *touch in touches) {

CGPoint currentPosition = [touch locationInView:self.view];

CGFloat deltaX fabsf (currentPosition.x-gestureStartPoint.x) ; CGFloat deltaY = fabsfCcurrentPosition.y-gestureStartPoint.y) ;

if (deltaX >= kMinimumGestureLength &&

deltaY <= kMaximumVariance) swipeType = kHorizontal Swipe;

else if (deltaY >= kMinimumGestureLength &&

deltaX <= kMaximumVariance) swipeType = kVerticalSwipe;

BOOL allFingersFarEnoughAway = YES;

if CswipeType != kNoSwipe) {