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