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