Touch Events

To capture touch events, we'll need to override touchesBegan. 0:00 This method is one you UI view inherits from its parent class UI responder. 0:04 So below drawrect, start typing out touchesBegan 0:10 to auto complete, touchesBegan takes two parameters. 0:16 A set of UITouches as you can see here, and a UIEvent object. 0:21 touchesBegan is called whenever a new touch event occurs within the bounds 0:27 of the UIView, which implements it. 0:32 In this case, our target view object. 0:35 The call receives a set of UI touches. 0:37 Since the relatively large fingers of users. 0:41 As compared to the size of the capacitive 0:44 sensors in the display can generate multiple touch positions. 0:47 We have a set of touches here, but we're interested and only need just one. 0:53 So we'll take the first touch from that set. 0:57 Now remember sets are an unordered collection type. 1:01 So taking the first is really the same as choosing any one at random. 1:04 So in here we'll say if let touche = touches.first. 1:09 Using the UI touches location in view method. 1:15 We convert the touch event into a CG point within the bounds of the view 1:21 passed as an argument. 1:26 So we can say let cross hair Position 1:27 equal touch.locationInView. 1:32 And we'll say self to get the location in the target view. 1:36 Now we can actually long this. 1:40 So we'll say print touch position. 1:42 And then we can say crosshair Position.x. 1:47 And similarly, we can get the y position, as well. 1:54 Keep in mind the actual touch event was registered by the hardware device, 1:59 the touch screen. 2:03 Thankfully, location in view does the job of converting that point 2:05 through all the frame transforms in the view hierarchy. 2:08 To give us a position that is meaningful in our local frame of reference. 2:12 That is, within the bounds of the target view instance. 2:16 We use this locally meaningful coordinate to then reposition the crosshairs layer. 2:20 So now that we have a position. 2:25 We know where we touched. 2:27 We can reposition the crosshair by saying 2:29 self.crosshairslayer.position equal crosshairs position. 2:32 Let's give this a try. 2:37 So stop and run the app. 2:38 And now, if you touch somewhere on the screen in the Muppets image. 2:42 You'll see that the crosshair or or the red square for now moves over to it. 2:46 And since we're longing the position. 2:50 You should get that as well. 2:52 The changes to the state of the layer are automatically animated. 2:55 As you can see it slides over instead of just disappearing and reappearing. 2:59 And this is one of the benefits of using a CA layer. 3:03 The timing and many other aspects of the animations are fully configurable. 3:07 But the layer gives a usable animation by default. 3:12 More information about what is possible using core animation layers in available 3:17 in the teacher's notes. 3:21 Now at the end of this method we need to call setNeedsDisplay. 3:23 So we'll say self.setNeedsDisplay. 3:26 It's not strictly necessary yet. 3:29 But once we have a busier path drawing code. 3:33 We'll want to make sure draw rect is called again 3:35 after each time that we reposition the layer. 3:38 One detail to know is that a dragging gesture 3:42 does not generate an additional call to touches begin. 3:45 UI responder implements another method touchesMoved, 3:49 which receives these separate events, these dragging events. 3:53 If we wanted the user to be able to drag the layer. 3:57 We also need to override this method. 3:59 It's worth knowing that touch of events may also be managed at a slightly 4:02 higher level of abstraction by using UI gesture recognizers on the view. 4:06 Rather than directly overriding the UI responder's touch methods. 4:11