Must get better at Flappy Birds. 1
Okay, I'm still not any good at this game. But what I do know about is how to create apps. 2
So now that we've cloned our starting project, we're ready to continue building it out. 3
So if we head into our Main.storyboard, we can get started building out the user interface. 4
So I'm going to zoom out a little bit, so I can see my entire view controller. And the first thing we're 5
gonna do is we're going to grab an Image view to cover the entire area of the app, so that we give our 6
app a background image. As previously, we're gonna go to the object library up here and we're going to 7
search for an Image View. 8
Now, again, you can scroll through if you want or you can simply just search for it. But we're going to 9
place it on the top right corner and we're going to drag the toggles so that it fills the entire screen. 10
So, now we have an Image View which is going to act as the background. And in order to add an image into 11
it, we, of course, have to change one of its properties. 12
If you navigate into the Assets.xcassets folder, you can see we've already got this green background 13
setup for you with the 1x, 2x, and 3x images. 14
So we want to place this as our background for our app. In order to do that, 15
we, of course, have to select our Image View, head over to our Attribute Inspector 16
on the right and we're going to change one of its properties. 17
We're not going to change its background color or anything else, but we want to change the image that's 18
displayed in there. 19
Given that we know our image is called green background, I can start typing for it, and it filters through 20
all the possibilities until it lands on the one I want. 21
Alternatively, in our case, given that we don't have all that many to choose from, you can simply click 22
the dropdown button and find the one that we want. 23
Now, when I first put that image in, you can see that it's not taking up the entire space that's available. 24
In fact, because the original image that we have is a square, 25
so it's a one to one aspect ratio image. 26
Well, it's going to display itself like this because we have the content mode set to aspect fit. 27
So, again, this is a property of the Image View. 28
And if we want to get the image to cover the entire area, well, then we're either gonna have to stretch 29
it in the vertical axis or we're going to have to increase the size of this so much so that it becomes 30
a square 31
that's about this large so that it covers the entire screen. 32
Now, what's the difference between those two approaches? 33
Well, let's see. 34
So, firstly, if we choose Scale to Fill, it will stretch the image up and down until it fills the entire 35
area which doesn't look so bad actually. 36
But notice that if you zoom in, you can see that it looks a little bit stretched. 37
Now, this background was sort of meant to evoke a sort of felt-ish kind of material like the material 38
that you get in sort of casino tables because we have a dice rolling up. But it's now being stretched. 39
And in this case, it's actually not so obvious. 40
But let's have something that has a little bit of text. 41
Say, this one, you can see clearly when these images scale to fill, it looks really weird and awful. 42
So the other option that we have is the aspect fill. 43
Now, this keeps the aspect ratio of the image while scaling it to fit the entire Image View. 44
If we go back to our green background image, then you can see in this case, the felt stays as it is without 45
changing its proportions. 46
Essentially, these are the top three choices that we'll be choosing from in pretty much all cases. Aspect 47
Fit where we keep the aspect ratio and make sure the entire image is visible, Scale to Fill which scales 48
the image so that it fills the entire Image View, and Aspect Fill where it fills the entire Image View 49
but keeps the aspect ratio of the image intact. 50
So depending on the effect that you're going for, you might want to choose one of those. 51
And in this case, it really doesn't matter whether if you choose Scale to Fill or Aspect to Fill as long 52
as the entire background is covered, then it's good enough. 53
All right. 54
So the next thing we want to do is we want to be able to place that image, the Dicee logo somewhere near 55
the top of the app. 56
So as a challenge, I want you to head into the object library and use an Image View to put that logo 57
into the upper third of the app. 58
So pause the video and try that now. Okay, so this is gonna be pretty easy. 59
We're gonna press the plus button and either search or scroll to find an Image View and drag it onto 60
the screen, and then in the image property setting for this Image View, I'm gonna change it to that Dicee 61
logo image. 62
Brilliant. 63
So now we have our logo inside an Image View near the upper third of our app. The next challenge is to 64
put the first dice, 65
DiceOne to show up somewhere near the middle of the app on the left. And I want you to change its size 66
so that it's 120 x 120 points. 67
So it should be a square roughly about this size. 68
Pause the video and give that a go. 69
Okay. 70
So, again, as before, we need an Image View to display an image 71
and we're going to choose the image that is the DiceOne image. 72
So that's going in there. But our Image View at the moment is a rectangle. 73
So I want to be able to change the size of it, 74
and we did this in the last module by going to these size Inspector. Whenever you need to change anything 75
about a User Interface Element, it's going to be somewhere in the right-hand pane, and you might just have 76
to click through some of the different tabs to see what they each do before you get familiar with where 77
to find the exact thing to change. 78
Here, we're going to change the width to 120 x 120, so that we have pit perfectly square Image View, and 79
we're gonna place it somewhere in the middle of our app. 80
Now, the next thing I want to do is because I want to have a two dice app, I want a copy of pretty much 81
exactly the same thing as this. I want an Image View with the dice in it with 120 x 120 82
in terms of its size. Now, I don't want to go through the entire process of replicating that. 83
So what can I do? 84
Well, a really simple trick, an X code, is if you hold down the option or the alt key and then you click 85
on this element and drag, and then be sure to let go of your mouse before you let go of the option key, 86
then you end up with a perfect copy of the previous element. And you can do this lots of times. 87
So, for example, if I select both of these that I've just created and I do the same trick again, then I 88
end up with four and then I can end up with eight, and you can quickly create lots and lots of copies of 89
the same thing if that's what you need. 90
The last thing we're going to do for our design is we're going to add a button to our screen. Similar 91
to before, we go to our object library and we try and search for a Button. 92
And then we simply drag and drop it onto the screen somewhere near the middle and we're going to change 93
a number of properties for that button. 94
For example, I might want to change the title of the button, which is under the title property, and I'm 95
going to call it roll, because this is going to be the button that the user is going to click on when 96
they want to roll the dice. 97
I'm just gonna make it a little bit bigger so it's easier to see for you. 98
And, of course, that also means changing the font size. 99
So we're going to click on that T button and change the font size to, let's say, maybe a 30 point font. 100
That should be large enough to see. 101
Now, I'm going to change the text color to white. 102
And finally, maybe change the button's background color. 103
Now, feel free to choose whatever color you like. But here's a cool trick, now often with design, it's good 104
to have a consistent color theme. 105
So if we wanted the background for our button to be exactly the same color as the background of our 106
dice faces, then we can go to custom, and then use the color dropper tool to simply select that color. 107
And then that becomes the background of our button. 108
So it all looks very, very coherent and very well put together. 109
And we're now ready to move on to the next step to actually use code to change the properties of our 110
User Interface Elements. Instead of using the Attribute Inspector and changing it manually by clicking 111
around, 112
we're going to use our ViewController.swift to automatically do that for us by running some code. 113
For all of that and more, 114
I'll see you on the next lesson.