This workshop will be retired on May 31, 2020.
In this video we introduce the small app we're going to build.
[MUSIC] 0:00 Hi I'm Pasan, an iOS developer with Treehouse, and 0:04 today we're going to demonstrate creating custom UI views in Swift 2.2. 0:08 If you've written an iOS app you've worked with view iViews, but 0:13 thanks to the power and flexibility of Interface Builder. 0:17 You might not have much experience customizing them programatically. 0:21 Interface Builder allows you to visually lay out an app's interface. 0:26 Then stores the specified layout as an XML file, 0:31 a storyboard or .xib file referred to generally as a nib. 0:35 Now these are called nibs both for historical reasons, and 0:41 because they're compiled into files with a .nib extension at build time. 0:45 At runtime, these nibs are instantiated directly into view objects. 0:50 And if you're working with segues, controller objects. 0:54 Since these objects never truly exist as code, they can only be 0:58 programmatically configured at runtime after they are instantiated. 1:03 Instantiating objects from static x amount representations is convenient, but 1:08 it can be limiting. 1:13 In this workshop, I'll take you through a simple example of subclassing and 1:15 programmatically defining a UIView instance using Swift 2.2. 1:19 I'll also cover the lifecycle of UI views, touch on frame vs bounds, 1:25 and show you some of what's possible with course drawing and core animation layers. 1:31 Okay, let's take a look at our project. 1:36 Our project is a mockup of a simple game called Image Riddle. 1:39 It's similar in concept to the I spy with my little eye, 1:44 something that begins with the letter A, game. 1:47 In this mobile device version, one player, let's call this player the riddle maker, 1:52 selects an image, identifies an object or a location in that image, 1:57 then shares the image and a few hints about the position selected. 2:03 For example, the riddle maker might select a point on a zebra 2:08 in a picture of different African animals. 2:12 A player would solve the riddle by selecting a location 2:15 sufficiently close to the riddle maker's choice. 2:19 In this case, somewhere close to the zebra. 2:22 A hint for this riddle might be, looks like a horse or has black and 2:25 white stripes. 2:29 Now, we don't have the time to create an entire game. 2:31 But we'll work through the implementation of the riddle maker solution 2:34 selection interface. 2:37 For this functional mockup, 2:40 we've selected an image of some prominent celebrities who happen to be Muppets. 2:42 The image riddle solution creation interface allows our riddle maker 2:47 to position a crosshair to select the riddle solution. 2:52 Now the crosshairs may seem slightly threatening but don't worry. 2:56 No Muppets were harmed in the filming of this workshop. 2:59 We'll start with a single view iOS application and a storyboard layout that 3:03 has instructions displayed in a UI label, an empty image view, and a Done button for 3:08 indicating that the riddle maker has made their solution choice. 3:14 Since this comes from a storyboard, 3:18 these interface elements were laid out in Interface Builder. 3:20 But we're going to be programmatically adding our UI view subclass on top of 3:24 the image view that we've provided. 3:29 As we're about to see, 3:31 integrating XML layouts with custom views created in Swift is quite easy. 3:32
You need to sign up for Treehouse in order to download course files.Sign up