Detecting iOS 6 iPad Touch Screen Gesture Motions - Revision history

Neil: Text replacement - "" to "
"
2016-10-27T19:59:58Z
Text replacement - "<table border="0" cellspacing="0">" to "<table border="0" cellspacing="0" width="100%">"

← Older revision Revision as of 19:59, 27 October 2016
Line 1: Line 1:

−
<table border="0" cellspacing="0">
+
<table border="0" cellspacing="0" width="100%">

<tr>

<tr>

<td width="20%">[[Identifying iPad Gestures using iOS 6 Gesture Recognizers|Previous]]<td align="center">[[iPad iOS 6 Development Essentials|Table of Contents]]<td width="20%" align="right">[[An iPad iOS 6 Gesture Recognition Tutorial|Next]]</td>

<td width="20%">[[Identifying iPad Gestures using iOS 6 Gesture Recognizers|Previous]]<td align="center">[[iPad iOS 6 Development Essentials|Table of Contents]]<td width="20%" align="right">[[An iPad iOS 6 Gesture Recognition Tutorial|Next]]</td>

Line 110: Line 110:

−
<table border="0" cellspacing="0">
+
<table border="0" cellspacing="0" width="100%">

<tr>

<tr>

<td width="20%">[[Identifying iPad Gestures using iOS 6 Gesture Recognizers|Previous]]<td align="center">[[iPad iOS 6 Development Essentials|Table of Contents]]<td width="20%" align="right">[[An iPad iOS 6 Gesture Recognition Tutorial|Next]]</td>

<td width="20%">[[Identifying iPad Gestures using iOS 6 Gesture Recognizers|Previous]]<td align="center">[[iPad iOS 6 Development Essentials|Table of Contents]]<td width="20%" align="right">[[An iPad iOS 6 Gesture Recognition Tutorial|Next]]</td>

Neil: Text replacement - "" to "
"
2016-05-05T14:34:48Z
Text replacement - "<table border="0" cellspacing="0" width="100%">" to "<table border="0" cellspacing="0">"

← Older revision Revision as of 14:34, 5 May 2016
Line 1: Line 1:

−
<table border="0" cellspacing="0" width="100%">
+
<table border="0" cellspacing="0">

<tr>

<tr>

<td width="20%">[[Identifying iPad Gestures using iOS 6 Gesture Recognizers|Previous]]<td align="center">[[iPad iOS 6 Development Essentials|Table of Contents]]<td width="20%" align="right">[[An iPad iOS 6 Gesture Recognition Tutorial|Next]]</td>

<td width="20%">[[Identifying iPad Gestures using iOS 6 Gesture Recognizers|Previous]]<td align="center">[[iPad iOS 6 Development Essentials|Table of Contents]]<td width="20%" align="right">[[An iPad iOS 6 Gesture Recognition Tutorial|Next]]</td>

Line 110: Line 110:

−
<table border="0" cellspacing="0" width="100%">
+
<table border="0" cellspacing="0">

<tr>

<tr>

<td width="20%">[[Identifying iPad Gestures using iOS 6 Gesture Recognizers|Previous]]<td align="center">[[iPad iOS 6 Development Essentials|Table of Contents]]<td width="20%" align="right">[[An iPad iOS 6 Gesture Recognition Tutorial|Next]]</td>

<td width="20%">[[Identifying iPad Gestures using iOS 6 Gesture Recognizers|Previous]]<td align="center">[[iPad iOS 6 Development Essentials|Table of Contents]]<td width="20%" align="right">[[An iPad iOS 6 Gesture Recognition Tutorial|Next]]</td>

Neil: Text replacement - "BUY_IOS6_IPAD" to "ios9_upgrade"

2016-02-01T21:20:05Z

Text replacement - "<google>BUY_IOS6_IPAD</google>" to "<htmlet>ios9_upgrade</htmlet>"

Neil at 14:23, 14 December 2012

2012-12-14T14:23:26Z

Neil: Removing all content from page

2012-12-14T14:15:58Z

Removing all content from page

Show changes

Neil: New page:

Previous [[iPad iOS 6 Development Ess...
2012-12-14T14:10:29Z

New page: <table border="0" cellspacing="0" width="100%"> <tr> <td width="20%">Previous<td align="center">[[iPad iOS 6 Development Ess...

New page
<table border="0" cellspacing="0" width="100%">
<tr>
<td width="20%">[[An Example iOS 6 iPad Touch, Multitouch and Tap Application|Previous]]<td align="center">[[iPad iOS 6 Development Essentials|Table of Contents]]<td width="20%" align="right">[[An iPad iOS 6 Gesture Recognition Tutorial|Next]]</td>
<tr>
<td width="20%">An Example iOS 6 iPad Touch, Multitouch and Tap Application<td align="center"><td width="20%" align="right">An iPad iOS 6 Gesture Recognition Tutorial</td>
</table>
<hr>

<google>BUY_IOS6_IPAD</google>

In the chapter entitled [[Detecting iOS 6 iPad Touch Screen Gesture Motions]] we looked at how to track the motion of contact with the iPad screen. In practice, an application will need to respond to specific motions that take place during the course of a gesture. The swiping of a finger across the screen might, for example, be required slide a new view onto the display. Similarly, a pinching motion is typically used in iPad applications to enlarge or reduce an image or view.

Prior to iOS 4, the identification of a gesture was the responsibility of the application developer and typically involved the creation of complex mathematical algorithms. In recognition of this complexity and given the importance of gestures to user interaction with the iPad Apple introduced the UIGestureRecognizer class in iOS 4 thereby making the task of identifying the types of gestures a much easier task for the application developer.

The goal of this chapter, therefore, is to provide an overview of gesture recognition within the context of iOS 6 and the iPad. The next chapter will work through [[An iPad iOS 6 Gesture Recognition Tutorial]].

== The UIGestureRecognizer Class ==

The UIGestureRecognizer class is used as the basis for a collection of subclasses, each designed to detect a specific type of gesture. These subclasses are as follows:

* '''UITapGestureRecognizer''' – This class is designed to detect when a user taps on the screen of the device. Both single and multiple taps may be detected based on the configuration of the class instance.
* '''UIPinchGestureRecognizer''' – Detects when a pinching motion is made by the user on the screen. This motion is typically used to zoom in or out of a view or to change the size of a visual component.
* '''UIPanGestureRecognizer''' – Detects when a dragging or panning gesture is made by the user.
* '''UISwipeGestureRecognizer''' – Used to detect when the user makes a swiping gesture across the screen. Instances of this class may be configured to detect motion only in specific directions (left, right, up or down).
* '''UIRotationGestureRecognizer''' – Identifies when the user makes a rotation gesture (essentially two fingers in contact with the screen located opposite each other and moving in a circular motion).
* '''UILongPressGestureRecognizer''' – Used to identify when the user touches the screen with one or more fingers for a specified period of time (also referred to as “touch and hold”).

These gesture recognizers must be attached to the view on which the gesture will be performed via a call to the view object’s addGestureRecognizer: method. Recognizers must also be assigned an action method that is to be called when the specified gesture is detected. Gesture recognizers may subsequently be removed from a view via a call to the view’s removeGestureRecognizer: method, passing through as an argument the recognizer to be removed.

== Recognizer Action Messages ==

The iOS 6 gesture recognizers use the target-action model to notify the application of the detection of a specific gesture. When an instance of a gesture recognizer is created it is provided with the reference to the method to be called in the event that the corresponding gesture is detected.

== Discrete and Continuous Gestures ==

Gestures fall into two distinct categories – discrete and continuous. A discrete gesture results in only a single call being made to the corresponding action method. Tap gestures (including multiple taps) are considered to be discrete because they only trigger the action method once. Gestures such as swipes, pans, rotations and pinches are deemed to be continuous in that they trigger a constant stream of calls to the corresponding action methods until the gesture ends.

== Obtaining Data from a Gesture ==

Each gesture action method is passed as an argument a UIGestureRecognizer sender object which may be used to extract information about the gesture. For example, information about the scale factor and speed of a pinch gesture may be obtained by the action method. Similarly, the action method assigned to a rotation gesture recognizer may ascertain the amount of rotation performed by the user and the corresponding velocity.

== Recognizing Tap Gestures ==

Tap gestures are detected using the UITapGestureRecognizer class. This must be allocated and initialized with an action selector referencing the method to be called when the gesture is detected. The number of taps that must be performed to constitute the full gesture may be defined by setting the numberOfTapsRequired property of the recognizer instance. The following code, for example, will result in a call to the tapsDetected method when two consecutive taps are detected on the corresponding view:

<pre>
UITapGestureRecognizer doubleTap =
[[UITapGestureRecognizer alloc]
initWithTarget:self
action:@selector(tapDetected:)];
doubleTap.numberOfTapsRequired = 2;
[self.view addGestureRecognizer:doubleTap];
</pre>

A template method for the action method for this and other gesture recognizers is as follows:

<pre>
- (IBAction)tapDetected:(UIGestureRecognizer )sender {
// Code to respond to gesture here
}
</pre>

== Recognizing Pinch Gestures ==

Pinch gestures are detected using the UIPinchGestureRecognizer class. For example:

<pre>
UIPinchGestureRecognizer pinchRecognizer =
[[UIPinchGestureRecognizer alloc]
initWithTarget:self
action:@selector(pinchDetected:)];
[self.view addGestureRecognizer:pinchRecognizer];
</pre>

== Detecting Rotation Gestures ==

Rotation gestures are recognized by the UIRotationGestureRecognizer, the sample code for which is as follows:

<pre>
UIRotationGestureRecognizer rotationRecognizer =
[[UIRotationGestureRecognizer alloc]
initWithTarget:self
action:@selector(rotationDetected:)];
[self.view addGestureRecognizer:rotationRecognizer];
</pre>

== Recognizing Pan and Dragging Gestures ==

Pan and dragging gestures are detected using the UIPanGestureRecognizer class. Pan gestures are essentially any continuous gesture. For example, the random meandering of a finger across the screen will generally be considered by the recognizer as a pan or drag operation:

<pre>
UIRotationGestureRecognizer panRecognizer =
[[UIPanGestureRecognizer alloc]
initWithTarget:self
action:@selector(panDetected:)];
[self.view addGestureRecognizer:panRecognizer];
</pre>

If both swipe and pan recognizers are attached to the same view it is likely that most swipes will be recognized as pans. Caution should be taken, therefore, when mixing these two gesture recognizers on the same view.

== Recognizing Swipe Gestures ==

Swipe gestures are detected using the UISwipeGestureRecognizer class. All swipes, or just those in a specific direction, may be detected by assigning one of the following constants to the direction property of the class:

UISwipeGestureRecognizerDirectionRight
* UISwipeGestureRecognizerDirectionLeft
* UISwipeGestureRecognizerDirectionUp
* USwipeIGestureRecognizerDirectionDown

If no direction is specified the default is to detect rightward swipes. The following code configures a UISwipeGestureRecognizer instance to detect upward swipes:

<pre>
UISwipeGestureRecognizer swipeRecognizer =
[[UISwipeGestureRecognizer alloc]
initWithTarget:self
action:@selector(swipeDetected:)];
swipeRecognizer.direction = UISwipeGestureRecognizerDirectionUp;
[self.view addGestureRecognizer:swipeRecognizer];
</pre>

== Recognizing Long Touch (Touch and Hold) Gestures ==

Long touches are detected using the UILongPressGestureRecognizer class. The requirements for the gesture may be specified in terms of touch duration, number of touches, number of taps and allowable movement during the touch. These requirements are specified by the minimumPressDuration, numberOfTouchesRequired, numberOfTapsRequired and allowableMovement properties of the class respectively. The following code fragment configures the recognizer to detect long presses of 3 seconds or more involving one finger. The default allowable movement is not set and therefore defaults to 10 pixels:

<pre>
UILongPressGestureRecognizer longPressRecognizer =
[[UILongPressGestureRecognizer alloc]
initWithTarget:self
action:@selector(longPressDetected:)];
longPressRecognizer.minimumPressDuration = 3;
longPressRecognizer.numberOfTouchesRequired = 1;
[self.view addGestureRecognizer:longPressRecognizer];
</pre>

== Summary ==

In this chapter we have provided an overview of gesture recognizers and provided some examples of how to detect the various types of gesture typically used by iPad users. In the next chapter we will work step-by-step through a tutorial designed to show these theories in practice.

<google>BUY_IOS6_IPAD</google>

<hr>
<table border="0" cellspacing="0" width="100%">
<tr>
<td width="20%">[[An Example iOS 6 iPad Touch, Multitouch and Tap Application|Previous]]<td align="center">[[iPad iOS 6 Development Essentials|Table of Contents]]<td width="20%" align="right">[[An iPad iOS 6 Gesture Recognition Tutorial|Next]]</td>
<tr>
<td width="20%">An Example iOS 6 iPad Touch, Multitouch and Tap Application<td align="center"><td width="20%" align="right">An iPad iOS 6 Gesture Recognition Tutorial</td>
</table>

← Older revision		Revision as of 21:20, 1 February 2016
Line 8:		Line 8:


−	<~~google~~>~~BUY_IOS6_IPAD~~</~~google~~>	+	<htmlet>ios9_upgrade</htmlet>


Line 107:		Line 107:


−	<~~google~~>~~BUY_IOS6_IPAD~~</~~google~~>	+	<htmlet>ios9_upgrade</htmlet>

← Older revision	Revision as of 14:23, 14 December 2012
Line 1:	Line 1:
	+	<table border="0" cellspacing="0" width="100%">
	+	<tr>
	+	<td width="20%">[[Identifying iPad Gestures using iOS 6 Gesture Recognizers\|Previous]]<td align="center">[[iPad iOS 6 Development Essentials\|Table of Contents]]<td width="20%" align="right">[[An iPad iOS 6 Gesture Recognition Tutorial\|Next]]</td>
	+	<tr>
	+	<td width="20%">Identifying iPad Gestures using iOS 6 Gesture Recognizers<td align="center"><td width="20%" align="right">An iPad iOS 6 Gesture Recognition Tutorial</td>
	+	</table>
	+	<hr>

	+
	+	<google>BUY_IOS6_IPAD</google>
	+
	+
	+	The next area of iOS touch screen event handling that we will look at in this book involves the detection of gestures involving movement. As covered in a previous chapter, a gesture refers the activity that takes place in the time between a finger touching the screen and the finger then being lifted from the screen. In the chapter entitled [[An Example iOS 6 iPad Touch, Multitouch and Tap Application]] we dealt with touches that did not involve any movement across the screen surface. We will now create an example that tracks the coordinates of a finger as it moves across the screen.
	+
	+	Note that the assumption is made throughout this chapter that the reader has already reviewed the [[An Overview of iOS 6 iPad Multitouch, Taps and Gestures]] chapter of this book.
	+
	+	== The Example iOS 6 iPad Gesture Application ==
	+
	+	This example application will detect when a single touch is made on the screen of the iPad and then report the coordinates of that finger as it is moved across the screen surface.
	+
	+	== Creating the Example Project ==
	+
	+	Start the Xcode environment and select the option to create a new project using the Single View Application template option for the iPad and name the project and class prefix TouchMotion with Storyboard support and Automatic Reference Counting enabled.
	+
	+	== Designing the Application User Interface ==
	+
	+	The application will display the X and Y coordinates of the touch and update these values in real-time as the finger moves across the screen. When the finger is lifted from the screen, the start and end coordinates of the gesture will then be displayed on two label objects in the user interface. Select the MainStoryboard.storyboard file and, using Interface Builder, create a user interface such that it resembles the layout in Figure 48-1:
	+
	+
	+	[[Image:ipad_ios_5_gesuture_ui.jpg\|The UI of an example iOS 6 motion detection app]]
	+
	+	Figure 48-1
	+
	+
	+	Be sure to stretch the labels so that they both extend to cover most of the width of the view.
	+
	+	Select the top label object in the view canvas, display the Assistant Editor panel and verify that the editor is displaying the contents of the TouchMotionViewController.h file. Ctrl-click on the same label object and drag to a position just below the @interface line in the Assistant Editor. Release the line and in the resulting connection dialog establish an outlet connection named xCoord. Repeat this step to establish an outlet connection to the second label object named yCoord.
	+
	+	Next, select the TouchMotionViewController.h file, verify that the outlets are correct, then declare a property in which to store coordinates of the start location on the screen:
	+
	+	<pre>
	+	#import <UIKit/UIKit.h>
	+
	+	@interface TouchMotionViewController : UIViewController
	+	@property (strong, nonatomic) IBOutlet UILabel *xCoord;
	+	@property (strong, nonatomic) IBOutlet UILabel *yCoord;
	+	@property CGPoint startPoint;
	+	@end
	+	</pre>
	+
	+	== Implementing the touchesBegan Method ==
	+
	+	When the user first touches the screen the location coordinates need to be saved in the startPoint instance variable and the coordinates reported to the user. This can be achieved by implementing the touchesBegan method in the TouchMotionViewController.m file as follows:
	+
	+	<pre>
	+	- (void) touchesBegan:(NSSet *)touches
	+	withEvent:(UIEvent *)event {
	+	UITouch *theTouch = [touches anyObject];
	+	_startPoint = [theTouch locationInView:self.view];
	+	CGFloat x = _startPoint.x;
	+	CGFloat y = _startPoint.y;
	+	_xCoord.text = [NSString stringWithFormat:@"x = %f", x];
	+	_yCoord.text = [NSString stringWithFormat:@"y = %f", y];
	+	}
	+	</pre>
	+
	+	== Implementing the touchesMoved Method ==
	+
	+	When the user’s finger moves across the screen the touchesMoved event will be called repeatedly until the motion stops. By implementing the touchesMoved method in our view controller, therefore, we can detect the motion and display the revised coordinates to the user:
	+
	+	<pre>
	+	- (void) touchesMoved:(NSSet *)touches
	+	withEvent:(UIEvent *)event {
	+	UITouch *theTouch = [touches anyObject];
	+	CGPoint touchLocation =
	+	[theTouch locationInView:self.view];
	+	CGFloat x = touchLocation.x;
	+	CGFloat y = touchLocation.y;
	+	_xCoord.text = [NSString stringWithFormat:@"x = %f", x];
	+	_yCoord.text = [NSString stringWithFormat:@"y = %f", y];
	+	}
	+	</pre>
	+
	+	== Implementing the touchesEnded Method ==
	+
	+	When the user’s finger lifts from the screen the touchesEnded method of the first responder is called. The final task, therefore, is to implement this method in our view controller such that it displays the start and end points of the gesture:
	+
	+	<pre>
	+	- (void) touchesEnded:(NSSet *)touches
	+	withEvent:(UIEvent *)event {
	+	UITouch *theTouch = [touches anyObject];
	+	CGPoint endPoint = [theTouch locationInView:self.view];
	+	_xCoord.text = [NSString stringWithFormat:
	+	@"start = %f, %f", _startPoint.x, _startPoint.y];
	+	_yCoord.text = [NSString stringWithFormat:
	+	@"end = %f, %f", endPoint.x, endPoint.y];
	+	}
	+	</pre>
	+
	+	== Building and Running the iPad Gesture Example ==
	+
	+	Build and run the application using the Run button located in the toolbar of the main Xcode project window. When the application starts (either in the iOS Simulator or on a physical device) touch the screen and drag to a new location before lifting your finger from the screen (or mouse button in the case of the iOS Simulator). During the motion the current coordinates will update in real time. Once the gesture is complete the start and end locations of the movement will be displayed.
	+
	+	== Summary ==
	+
	+	Simply by implementing the standard touch event methods the motion of a gesture can easily be tracked by an iPad application. Much of an iPad user’s interaction with applications, however, involves some very specific gesture types such as swipes and pinches. To write code to correlate finger movement on the screen with a specific gesture type would be extremely complex. Fortunately, iOS 6 makes this task easy with the introduction of gesture recognizers. In the next chapter, entitled [[Identifying iPad Gestures using iOS 6 Gesture Recognizers]], we will look at this concept in more detail.
	+
	+
	+	<google>BUY_IOS6_IPAD</google>
	+
	+
	+	<table border="0" cellspacing="0" width="100%">
	+	<tr>
	+	<td width="20%">[[Identifying iPad Gestures using iOS 6 Gesture Recognizers\|Previous]]<td align="center">[[iPad iOS 6 Development Essentials\|Table of Contents]]<td width="20%" align="right">[[An iPad iOS 6 Gesture Recognition Tutorial\|Next]]</td>
	+	<tr>
	+	<td width="20%">Identifying iPad Gestures using iOS 6 Gesture Recognizers<td align="center"><td width="20%" align="right">An iPad iOS 6 Gesture Recognition Tutorial</td>
	+	</table>

@@ Line 1: / Line 1: @@
-<table border="0" cellspacing="0">
+<table border="0" cellspacing="0" width="100%">
 <tr>
 <td width="20%">[[Identifying iPad Gestures using iOS 6 Gesture Recognizers|Previous]]<td align="center">[[iPad iOS 6 Development Essentials|Table of Contents]]<td width="20%" align="right">[[An iPad iOS 6 Gesture Recognition Tutorial|Next]]</td>
@@ Line 110: / Line 110: @@
-<table border="0" cellspacing="0">
+<table border="0" cellspacing="0" width="100%">
 <tr>
 <td width="20%">[[Identifying iPad Gestures using iOS 6 Gesture Recognizers|Previous]]<td align="center">[[iPad iOS 6 Development Essentials|Table of Contents]]<td width="20%" align="right">[[An iPad iOS 6 Gesture Recognition Tutorial|Next]]</td>