This workshop will be retired on May 31, 2020.
We need a crosshair in our app to select muppets and we're going to build a single view to handle this functionality.
Okay, as discussed, here is our project that we're starting out with. 0:00 All we have in here is a story board file with a label, 0:04 an Image View and a Done button. 0:08 Now you can get this as a starter file from the project downloads 0:11 along with the video. 0:15 The first step is adding a new Cocoa Touch Class to our project. 0:17 So right click on ImageRiddle > New File and 0:22 make sure it's source, Cocoa Touch Class. 0:25 And we're going to add a subclass of UIView and we'll call it TargetView. 0:29 The new implementation file the Xcode just added contains an interesting warning 0:38 about the drawRect method. 0:43 DrawRect is the heart of the view redrawing cycle and 0:44 is called when a change within the bounds of the UIView requires it to be redrawn. 0:49 A developer can signal the need to redraw with a call to set needs display. 0:57 When this redrawing actually occurs is entirely up to the system. 1:03 DrawRect should never be called directly by the developer. 1:07 And as the warning suggests, this method should not be overridden 1:11 unless custom drawing is being done on the view. 1:15 We will be doing some drawing in this app, 1:19 so our overwriting of drawRect in TargetView is going to be justified. 1:21 Now before customizing TargetView, we're going to make a few additions to 1:26 the ViewController.swift file in order to create our view instance and 1:31 add it to the storyboard defined view hierarchy. 1:35 Now in here, since the viewDidLoad method in a ViewController is typically 1:41 the first place the developer has access to nib instantiated view objects, 1:46 this is a good place to integrate our instance of TargetView 1:52 into the existing view hierarchy. 1:56 So up at the top we'll create a stored property, we'll say var TargetView 1:59 of type TargetView that we just added and we'll make it an optional property. 2:04 Next go to your storyboard and create an outlet of 2:12 the Image View to the ViewController and 2:18 we'll call this riddleImageView. 2:23 Okay I meant to add that not to TargetView, hold on, 2:28 but at the top over here. 2:33 Okay, now if we go back to the standard editor, in viewDidLoad, 2:42 we can add the code we need. 2:46 So we're going to create a new instance of the TargetView class. 2:48 And then add it as a sub-view of the riddleImageView 2:52 from the storyboard which we just added as an outlet. 2:55 The IB outlet tag over here marks 2:58 riddleImageView as a reference to a nib instantiated view object. 3:01 The property TargetView that we added serves as a reference to the instance of 3:07 our new UIView subclass that we added. 3:11 This view will need to be the same size as and 3:14 sit directly on top of the riddlemageView. 3:17 Now, our first business in viewDidLoad is to set the riddleImageView's 3:21 image property to the appropriate UI image reference. 3:25 So inside viewDidLoad, let's get rid of this line. 3:29 And since this is an outlet that may not exist when the class is instantiated, 3:34 we'll say if let imageView = self.riddleImageView. 3:41 And then in here, we'll say a imageView.image 3:45 = UIImage (named: "). 3:52 And in your starter file you should have the Sesame-St -Characters.png. 3:56 So we will do that, Sesame-St-Characters.png. 4:02 Setting the image programmatically rather than as part of the static layout 4:11 makes sense in terms of our game. 4:16 Since when it's fully implemented, 4:17 the property will be set at run time to image of the riddle maker's choosing. 4:19 Now we can use the named initializer and use the name of the image because 4:25 it's part of our bundle in UIImage and it'll still look in our main bundle. 4:29 Okay, next, we need to create an instance of TargetView. 4:34 The init method we use to create the TargetView instance 4:38 requires a CGRect as a parameter. 4:42 So first we'll make a CGRect to get the position and 4:45 dimension of the new UIView that we want to create. 4:49 So it's a let targetViewFrame = CGReckMake. 4:53 And this is a function from Core Graphics and you can pass in an origin and 5:01 a size to create a CGRect value. 5:06 So here we'll say 0,0 and we'll get the size of the imageView's frame. 5:09 So we'll say imageView.frame.size.width. 5:15 And for the height we'll say imageView.frame.size.height. 5:20 It might seem odd to be setting the X and 5:28 Y position to 0,0 if we want this sub-view to be right on top of the parent. 5:32 So why not just use the parent's frame? 5:38 Well this is probably a good time to talk about frame inbounds in IOS views. 5:40 Let's do that in the next video. 5:45
You need to sign up for Treehouse in order to download course files.Sign up