View source for Detecting iOS 8 Touch Screen Gesture Motions in Swift

{{#pagetitle: Detecting iOS 10 Touch Screen Gesture Motions }}
<seo title="Detecting iOS 10 Touch Screen Gesture Motions" titlemode="replace" keywords="ios 10, swift 3, touch, xcode 8"  description="A guide to detecting touch motion on an iOS device screen."></seo>
<table border="0" cellspacing="0" width="100%">
<tr>
<td width="20%">[[An Example Swift iOS 8 Touch, Multitouch and Tap Application|Previous]]<td align="center">[[iOS 8 App Development Essentials|Table of Contents]]<td width="20%" align="right">[[Identifying Gestures using iOS 8 Gesture Recognizers|Next]]</td>
<tr>
<td width="20%">An Example Swift iOS 10 Touch, Multitouch and Tap Application<td align="center"><td width="20%" align="right">Identifying Gestures using iOS 10 Gesture Recognizers</td>
</table>
<hr>


<htmlet>ios10</htmlet>


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 to 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 10 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 Example Swift iOS 8 Touch, Multitouch and Tap Application|An Overview of iOS 10 Multitouch, Taps and Gestures]] chapter of this book.

== The Example iOS 10 Gesture Application ==

This example application will detect when a single touch is made on the screen of the iPhone or 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. Name the project TouchMotion, select the Universal device setting and choose Swift as the programming language. 

== Designing the Application User Interface ==
<htmlet>adsdaqbox_flow</htmlet>
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 Main.storyboard file and, using Interface Builder, create a user interface such that it resembles the layout in Figure 54 1.

Be sure to stretch the labels so that they both extend to cover a little over half of the width of the view layout. 

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 ViewController.swift file. Ctrl-click on the same label object and drag to a position just below the class declaration 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.
 

[[Image:xcode_8_ios_10_gesture_ui.png|The UI for the touch motion example iOS app]]

Figure 54-1


Next, review the ViewController.swift file to 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

class ViewController: UIViewController {

    @IBOutlet weak var xCoord: UILabel!
    @IBOutlet weak var yCoord: UILabel!

    var startPoint: CGPoint?
.
.
.
}
</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 those coordinates reported to the user. This can be achieved by implementing the touchesBegan method in the ViewController.swift file as follows:

<pre>
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
    if let theTouch = touches.first {
        startPoint = theTouch.location(in: self.view)
        let x = startPoint!.x
        let y = startPoint!.y
        xCoord.text = ("x = \(x)")
        yCoord.text = ("y = \(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>
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
    if let theTouch = touches.first {

        let touchLocation = theTouch.location(in: self.view)
        let x = touchLocation.x
        let y = touchLocation.y

        xCoord.text = ("x = \(x)")
        yCoord.text = ("y = \(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 end point of the gesture:

<pre>
override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
    if let theTouch = touches.first {

        let endPoint = theTouch.location(in: self.view)
        let x = endPoint.x
        let y = endPoint.y

        xCoord.text = ("x = \(x)")
        yCoord.text = ("y = \(y)")
    }
}
</pre>

== Building and Running the 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 end location 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 iOS application. Much of a 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 10 makes this task easy through the use of gesture recognizers. In the next chapter, entitled [[Identifying Gestures using iOS 8 Gesture Recognizers|Identifying Gestures using iOS 10 Gesture Recognizers]] we will look at this concept in more detail.


<htmlet>ios10</htmlet>



<htmlet>ezoicbottom</htmlet>
<hr>
<table border="0" cellspacing="0" width="100%">
<tr>
<td width="20%">[[An Example Swift iOS 8 Touch, Multitouch and Tap Application|Previous]]<td align="center">[[iOS 8 App Development Essentials|Table of Contents]]<td width="20%" align="right">[[Identifying Gestures using iOS 8 Gesture Recognizers|Next]]</td>
<tr>
<td width="20%">An Example Swift iOS 10 Touch, Multitouch and Tap Application<td align="center"><td width="20%" align="right">Identifying Gestures using iOS 10 Gesture Recognizers</td>
</table>