Add media assets to your framework

- [Instructor] Now let's put together everything we've learned so far about making a reusable framework. We want to enable our camera to be able to capture still images. The first thing we want to do is make sure that we have a nice looking button on the UI of our framework so that we can easily capture those still images. This means we'll need to add a media asset to our reusable framework. In order to do this, we need to first add a media catalog to our reusable framework. Click on CameraViewController.swift in your project tree to make sure you're in the right scope, go to the top bar, click file, new file, and scroll down until you get to the asset catalog icon underneath the resource tab.

Click next, make sure that you're in the right folder tree so that you're in your reusable framework group. You can leave it named media and click create. You'll notice that underneath here it's giving you an empty catalog to star importing assets. In your exercise files folder, go to the resources folder and you'll see that there's a file called trigger.png. What you want to do is take that and drag it into the left column on the left hand side of your media catalog. Now we'll automatically generate an image set for you, where you would also be able to add two X and three X size assets if you wanted to.

For this course we'll only work with the one sized asset. This now means that you have an asset ready to go and import into your framework. Now go back into your CameraViewController.swift file. Scroll up underneath where you created your cancel button. Underneath here we're going to add another button called the shutter button. Start with your private instance variable. Make sure you specify that it is of type UIButton, which is optional.

Then we want to create our regular stored property. We'll call it shutter button, which is of type UIButton, and we'll compute the output. Just like we did with the cancel button, we want to check to see if we already have something in our private instance variable, so we type if let current button equals underscore shutterButton, then we simply return that current button. Otherwise we need to make a new instance. So, we type let button equals UIButton. Instead of setting a title and text for this button, we want to set the image now that we have an asset we can draw in.

So, we type in button.setImage and we'll specify of UIImage. Open your parenthesis and we'll type in named and we'll specify in a string trigger. Autocomplete might not work exactly as you expect it to here, so let's make sure that you're typing everything correctly as you see here on your screen. Type a comma after the trigger then type in in colon capitol bundle, open parenthesis, for colon camera view controller dot self.

Close that first parenthesis, type another comma and a space, then type compatible colon nil, then you can tab over to where you have autocomplete for your UIControlState and you can type in dot normal. Take a second to make sure you've type this correctly. What this means we're doing is we're loading the trigger asset from the bundle assigned to our framework. Because we're no longer working with the scope of a simple iOS application, we need to make sure that the right resource bundle is loaded here.

This means that we're going into the bundle associated with our reusable framework looking for an asset called trigger and pulling that in to set the image. After you do this, you'll want to assign this button that you're creating to your private instance variable and return your button that you've created. The last two things we'll need to do is scroll down to your extension where you're worried about your UI. Underneath where you add the subview of the cancel button, type in self.view.addsubview self.shutterbutton.

This means that the same way that we added the cancel button to our UI, we're now also adding the shutter button to our UI. Scroll down to the update button frames function and since we didn't declare a CG rect for our shutter button here initially, we can do this here as well. For this you'll type self.shutterbutton.frame equals CGRect with a constructor. Go ahead and follow along with what I type for the frame for this. It's important to know that you can make this whatever you want, we're choosing to make it like this for the sake of this course.

After you've assigned the frame, go ahead and build your sample application to make sure everything is working so far. Once you see that your sample application builds just fine, go ahead and run it so that we can take a look at how our UI looks now. If you look at the bottom center of your UI, you'll notice that the image asset we've pulled in is assigned there and ready to use to capture a still image.