Image and color literals

- [Instructor] You've probably seen them in the auto complete Nexus, but have you ever used the image literals? Image literals pop images directly into code, without initializing the UI image. While easy, they do have their drawbacks. Let's take a look at porting code with image literals. You're most likely going to use an image literal in a Swift Playground for Ipad, so I popped one up here, and you can download this project from GitHub, and install the Swift Playground into an Ipad Playground. I've set up a simple photo background in ViewDidLoad, and we're going to add one missing line to this code, which is ImageView dot image equals and then instead of putting a UI image, you'll find at the bottom auto complete a small icon with a mountain and the sun.

That's the image literal button. Go ahead and tap that, and up comes some images. You can get rid of the keyboard, and you'll see them a little better, and I'm going to go ahead and pick the first one here, which is a fish dinner, and go ahead and hit Use, and you'll see the literal now as the image for image view image. Now go ahead and run the code, and up in the live view shows the fish.

I can go ahead and hit that literal again, click the other picture, which is an ocean scene, click Use, run that code, and I get an ocean scene. So that's this code in Ipad Playgrounds. Now you may want to go ahead and take that to a Playground on XCode. You can save this, and then open it up in XCode, and you'll see the same code as you've got now. I usually have this set to manually run over here, so I'm going to turn that back on, and go ahead and run this Playground, and if you open up the live view with the assistant editor, you'll see our ocean scene, just like we had before.

And there's our little image. Close up the assistant editor. Go over here, Backspace over the image literal, and type Fish, and you'll notice in the auto complete there is no Fish. That's because for XCode Playgrounds, you have to use UI image named, but this requires a string, so to get that string, if you hit Command + One, you'll get a navigator, and you'll see over here there's a folder called Resources, which holds those images in there, and you'll see there's one called Fish.

All I have to do in the UI image is make that Fish. I'll run this Playground, show the assistant editor, and there's my fish. So for an XCode Playground, you can't use an image literal, but you can in Ipad Playground, so let's add one more element to this, and that's XCode itself. And we're going to start a new file, New, XCode project.

We'll use the single view application, hit Next, and go ahead and name this Image Literals. Leave the team, organization name, organization identifier, all the same as you normally would have them, we'll use Swift for the language, and leave all the stuff on the bottom unchecked. Go ahead and hit Next. I'm going to save it to the desktop, and there ya go. We're not going to need any attributes here, so I'm going to shut that off right away, and head over to the view controller, and I'm going to replace this view controller with the view controller I had from my Playground, so I'll go back over to Window, pull up the Playground, copy this view controller, Window, go to the original XCode one, and paste that into place.

Alright, with that done, we can go ahead and run this, and I'm going to set this to a simulator for Iphone 8 plus, run this, and you see nothing. Well that's because you don't have any images yet. So go ahead and stop this. Go back, Window, Image Literals, to the fish and ocean, okay.

I'm going to go to Resources here, and I'm going to show in Finder, so I can have those two open, and in Resources, there's our fish and ocean. Now that I have that into place, I'm going to go back to XCode, and copy them into my Assets folder. They have to be in the Assets folder in order to use the image literals. So I can go to Window, Image Literals, Assets, pull up my finder, throw the fish in there, throw the ocean in there.

Okay, now I've got the fish and the ocean. Go ahead and run. And there's my fish. Stop the simulator, and I'm going to go ahead and change that to ocean now. Now here you can actually use image literals, OC, and you can just see even with OC, it already tells me ocean, and there it is, I can just click it here, and then run again, and you can see it's got the nice little image in there.

And the ocean appears. Now image literals are very convenient, but they are inconsistent in use, particularly with the XCode Playgrounds. When porting a project from an Ipad Playground, know where the resource folder is, and the resources you used, so you can convert your code to UI image named for XCode Playgrounds. When working with an XCode project, feel free to use any image you put into the Asset folder. Just remember to move the Asset folder when moving code around.