0 1 00:00:00,090 --> 00:00:07,020 Now that we're done designing our app in Xcode, it's time to add an image into that Image View and we're 1 2 00:00:07,020 --> 00:00:11,670 going to do that by incorporating some of our own image assets. 2 3 00:00:11,700 --> 00:00:17,460 The first thing to know about an Image View is to simply view it as a picture frame. 3 4 00:00:17,460 --> 00:00:21,420 It's a picture frame where you can put images into it. 4 5 00:00:21,420 --> 00:00:24,870 And this picture frame has lots of different properties, 5 6 00:00:24,960 --> 00:00:27,300 so things that you can change about it. 6 7 00:00:27,300 --> 00:00:29,840 For example, you could change the size of it. 7 8 00:00:29,880 --> 00:00:32,010 You could change the color of it. 8 9 00:00:32,010 --> 00:00:36,560 And most importantly, you can change the picture that goes inside. 9 10 00:00:36,600 --> 00:00:43,080 So if you select the Image View in the document outline and head over to the Attribute Inspector tab 10 11 00:00:43,080 --> 00:00:49,140 here, then you can see all of these properties that we talked about. Say, for example, we could change 11 12 00:00:49,140 --> 00:00:54,850 the background of the Image View or as you saw earlier on, we changed its width and height. 12 13 00:00:55,020 --> 00:00:59,400 But the one that we're really interested in is this image property. 13 14 00:00:59,400 --> 00:01:07,320 Now you can see that it's expecting me to type the name of an image. But where do I get that image from? 14 15 00:01:07,320 --> 00:01:14,400 Well, if you take a look over here in the navigator pane, you can see that we've got a folder called 15 16 00:01:14,580 --> 00:01:16,400 Assets.xcodeassets. 16 17 00:01:16,620 --> 00:01:20,990 And if you click on it, you can see that it's completely blank at the moment. 17 18 00:01:21,090 --> 00:01:29,280 It has one template that is always there which is the app icon template and these are the slots for 18 19 00:01:29,280 --> 00:01:32,780 all of the app icon images that you need to provide. 19 20 00:01:32,880 --> 00:01:34,790 And we're going to look at that in the next lesson. 20 21 00:01:34,800 --> 00:01:40,950 We're going to be filling all of these up. But right now, what I want is to start adding some other image 21 22 00:01:40,980 --> 00:01:44,010 assets into this folder. 22 23 00:01:44,010 --> 00:01:47,610 Now we've prepared some assets for you ahead of time already. 23 24 00:01:47,640 --> 00:01:56,100 So if you head over to appbrewery.co/p/ios-course-resources, here you'll find all 24 25 00:01:56,100 --> 00:02:02,670 the links that you'll need during the course. And I recommend bookmarking it, so you can get to it easily. 25 26 00:02:02,670 --> 00:02:08,190 I'll be referring to the course resources or the course links regularly during the course and we'll 26 27 00:02:08,190 --> 00:02:11,090 try to post lots of links to this page to help you. 27 28 00:02:11,130 --> 00:02:16,020 But essentially, if you head over here and you click on where it says, "I Am Rich Image Assets," 28 29 00:02:16,080 --> 00:02:23,190 then it should automatically download a zipped file of all the image assets that we've 29 30 00:02:23,190 --> 00:02:24,950 created for you. 30 31 00:02:24,960 --> 00:02:32,220 So now if you go ahead and unzip that file. And once you open that folder, you should see a whole bunch 31 32 00:02:32,220 --> 00:02:33,260 of images. 32 33 00:02:33,270 --> 00:02:39,390 Now some of these are named Icon are the ones that we're going to be using as the app icon for this 33 34 00:02:39,660 --> 00:02:43,370 I Am Rich app. And we're going to be dealing with that in the next lesson. 34 35 00:02:43,950 --> 00:02:48,110 But the one that we want is this one called diamond.png. 35 36 00:02:48,270 --> 00:02:54,750 And as you can see, it's just a simple image of a diamond that we're going to incorporate into the design 36 37 00:02:54,810 --> 00:02:56,120 of our app. 37 38 00:02:56,130 --> 00:03:03,960 So once you've got Xcode open and if you either command-tab or simply open up your finder from the 38 39 00:03:03,960 --> 00:03:09,870 dock, then you can click and drag this image over here into your 39 40 00:03:09,870 --> 00:03:12,150 Assets.xcassets folder. 40 41 00:03:12,150 --> 00:03:18,540 Now notice how as soon as you do that, it gets dropped in at the 1x position. 41 42 00:03:18,540 --> 00:03:19,610 What does that mean? 42 43 00:03:19,620 --> 00:03:24,070 What does it mean when it says 1x, 2 x, and 3x? 43 44 00:03:24,120 --> 00:03:26,080 Now you could think about it this way. 44 45 00:03:26,220 --> 00:03:32,220 Let's say, we have a picture here of the settings icon in the app in iOS. 45 46 00:03:32,460 --> 00:03:40,080 Now if I had blown that up to a gigantic size, then you can see that it's super pixilated and it's not 46 47 00:03:40,080 --> 00:03:42,190 very clear at all. 47 48 00:03:42,210 --> 00:03:46,830 So how can we make things look sharp on a screen? 48 49 00:03:46,830 --> 00:03:56,250 Well, if you had, say, a fixed number of pixels, say, in this case, we have 3x3 pixels and each 49 50 00:03:56,250 --> 00:03:59,220 pixel can only have one color, 50 51 00:03:59,220 --> 00:03:59,490 right? 51 52 00:03:59,490 --> 00:04:00,930 So this one's a light blue. 52 53 00:04:00,930 --> 00:04:02,430 This one's a white. 53 54 00:04:02,430 --> 00:04:07,400 And we can try and represent a picture by changing the colors of each of these dots. 54 55 00:04:07,410 --> 00:04:08,990 Kind of like a mosaic. 55 56 00:04:09,330 --> 00:04:16,620 But if we had double the number of pixels, say, in this case, instead of having a single tile, we had four 56 57 00:04:16,620 --> 00:04:23,180 tiles, then we would be able to have far more fine-grained control over what the image looks like. 57 58 00:04:23,310 --> 00:04:26,580 And that means that it will look sharper to the human eye. 58 59 00:04:27,480 --> 00:04:32,040 So where do these 1x, 2x, and 3x sizes come from? 59 60 00:04:32,040 --> 00:04:37,800 Well, let's imagine we have three boxes and they each a centimeter by centimeter. 60 61 00:04:37,800 --> 00:04:41,850 Now, let's say, in the first case it's a 1x image. 61 62 00:04:41,910 --> 00:04:47,250 Well, we only have one pixel, just one color square to represent it. 62 63 00:04:47,280 --> 00:04:54,210 Now let's say that in the second image, we were able to use for squares to represent it. Well, we could 63 64 00:04:54,240 --> 00:04:57,520 now add a little bit more detail to our picture. 64 65 00:04:57,540 --> 00:05:01,750 You can see that there's a little white bit top right corner. 65 66 00:05:01,820 --> 00:05:07,850 And what if we went even further and we actually had nine tiles, we could see that there's a white bit, 66 67 00:05:07,900 --> 00:05:12,930 it's actually not just a white bit, it's actually got a sort of shape associated with it. 67 68 00:05:13,730 --> 00:05:19,130 So this is how Apple managed to increase the screen resolution. 68 69 00:05:19,130 --> 00:05:27,290 If you remember almost 10 years ago, when the Apple iPhones first came out, they had a 1x resolution, 69 70 00:05:27,440 --> 00:05:29,510 and everything was super pixelated. 70 71 00:05:29,510 --> 00:05:32,730 You can even see the pixels with your human eyes. 71 72 00:05:32,870 --> 00:05:41,240 But then over many many years and many iterations, we now have much fancier iPhones including the X series 72 73 00:05:41,270 --> 00:05:43,680 as well as the plus series. 73 74 00:05:43,760 --> 00:05:52,340 And now they've managed to cram nine times as many pixels into the same space on the screen as they 74 75 00:05:52,340 --> 00:05:53,920 had before. 75 76 00:05:53,930 --> 00:06:01,930 So this means that the images are way sharper on the latest iPhones than the older ones. When we think 76 77 00:06:01,930 --> 00:06:10,180 back to this 1x, 2x. and 3x images, well, the 3 x image is actually three times as large as the 1x, 77 78 00:06:10,690 --> 00:06:13,350 and the 2x is 2 times as large. 78 79 00:06:13,420 --> 00:06:20,140 But if you have an image that's three times as large that's then shrunken to a third of its size, then 79 80 00:06:20,140 --> 00:06:24,820 it's obviously going to have smaller pixels and it's gonna be sharper. 80 81 00:06:24,820 --> 00:06:29,830 So how do we create each of these image sizes? 81 82 00:06:29,850 --> 00:06:37,020 Well, you could start with an image that's, let's say, 300 x 300 pixels, and then you would save it as 82 83 00:06:37,020 --> 00:06:46,000 the 3x version, and then you would scale it down to 200 x 200 pixels, and save that as the 2x version. 83 84 00:06:46,170 --> 00:06:53,220 And then, finally, scale it down to 100 x 100 pixels and that will be your 1x version. 84 85 00:06:53,220 --> 00:07:01,770 So if your 3x version is 300 x 300, then the maximum size that you can actually use it in your app 85 86 00:07:01,890 --> 00:07:09,180 is going to be 100 x 100 because, eventually, what's going to happen is that the iPhone depending 86 87 00:07:09,180 --> 00:07:18,810 on where it's being displayed, an iPhone 4 or an iPhone 5 or an iPhone 6 Plus, then it will scale down 87 88 00:07:18,840 --> 00:07:20,050 these two images. 88 89 00:07:20,100 --> 00:07:26,580 Both of these are going to be squeezed down to this size. So you can imagine that this one which started 89 90 00:07:26,580 --> 00:07:34,170 out being super large, if it squeezed into a smaller space, it's going to look a lot sharper than the 90 91 00:07:34,170 --> 00:07:38,070 one which only has 100 x 100 pixels to display. 91 92 00:07:39,220 --> 00:07:46,750 When you're creating assets for your app, you can either do this manually or if you're using software 92 93 00:07:46,750 --> 00:07:49,480 such as sketch or illustrator, 93 94 00:07:49,480 --> 00:07:57,700 then you have existing tools that allow you to export images in their 1x, 2x, and 3x sizes. 94 95 00:07:57,710 --> 00:08:02,920 Now what if you don't have sketch or illustrator and you're not familiar with design software? 95 96 00:08:02,920 --> 00:08:09,400 Well, the simplest way of generating image assets is to simply use an online tool called App Icon Generator 96 97 00:08:09,490 --> 00:08:16,570 and you can go to appicon.co, and this will be in the course resources as well as the link. 97 98 00:08:16,740 --> 00:08:21,880 And if you head over to image sets, then you can select your design base size. 98 99 00:08:22,060 --> 00:08:24,260 So ours only go up to 3x. 99 100 00:08:24,280 --> 00:08:29,140 We're going to select that and then we're going to select the platform that we need the images for which 100 101 00:08:29,140 --> 00:08:30,610 is gonna be IOs. 101 102 00:08:30,640 --> 00:08:39,220 So that's gonna be 1x, 2x, 3x, then we can uncheck Android. And now all you have to do is if we take our 102 103 00:08:39,220 --> 00:08:47,980 diamond.png as an example image, then we can just click and drag it and drop it on to the App Icon Generator 103 104 00:08:48,070 --> 00:08:49,610 and click generate. 104 105 00:08:49,840 --> 00:08:56,950 And now it's going to create a set of images that are already modified. So you can see this 1x is 105 106 00:08:56,950 --> 00:09:05,650 67 kilobytes, the 2x is just a bit more than double its size, and the 3x is way, way bigger. So you can 106 107 00:09:05,650 --> 00:09:12,010 see these resolution differences. And the website has already scaled these down for us and added all those 107 108 00:09:12,010 --> 00:09:14,130 necessary prefixes. 108 109 00:09:14,260 --> 00:09:21,970 So now we can go back to Xcode. Let's delete our diamond image and let's head over to those images that 109 110 00:09:21,970 --> 00:09:30,280 we just downloaded, and let's click and drop it into here. And Xcode is clever enough to take those post 110 111 00:09:30,280 --> 00:09:35,590 fixes at 2x, at 3x, and simply put them into the right slots. 111 112 00:09:35,590 --> 00:09:43,090 So we're now finally ready to use these assets. If we head back over to the Main.storyboard, we can 112 113 00:09:43,180 --> 00:09:50,230 select our image view again. And here, when we get to select the image that's gonna go in the image view, 113 114 00:09:50,770 --> 00:09:57,070 we can click the dropdown and we can see that we've got the diamond image that comes from our project. 114 115 00:09:57,070 --> 00:10:03,220 So this is reading that folder here, the assets, the xcassets. And if you have more images in there, 115 116 00:10:03,220 --> 00:10:05,680 then it'll show you all the possibilities. 116 117 00:10:06,130 --> 00:10:10,710 So if you have loads of them, then you can also just simply search as well, 117 118 00:10:10,900 --> 00:10:14,600 and that makes it easier to narrow down on the one you want. 118 119 00:10:14,620 --> 00:10:19,440 So once we've selected diamond, then that goes right inside our image view. 119 120 00:10:19,450 --> 00:10:25,890 So the frame is, obviously, see-through and our image is now on screen. 120 121 00:10:25,960 --> 00:10:26,680 Brilliant. 121 122 00:10:26,680 --> 00:10:28,170 We're almost done. 122 123 00:10:28,210 --> 00:10:34,530 All we need to do now is just to add an app icon and we're going to do that in the next lesson. 123 124 00:10:34,570 --> 00:10:35,500 So I'll see you there.