All right, guys. 1
So currently, we have succeeded in making the world's most boring app because all it does is it changes 2
the dice's images when it loads up, and when we press the Roll button, it changes the dice faces two DiceFour. 3
And that's it. 4
There's nothing else that happens. So this won't do. 5
How can we make it better? 6
Well, it would be great if these images could actually change every time we press the Roll button. 7
So in order to do that, though, we need to have a sequence of all our images lined up so that we can pick 8
and choose which one we want to show. 9
So how can we create a sequence of things? 10
Well, we need to use something called an Array. Delete everything that you currently have inside your 11
viewDidLoad. 12
So remember, inside means inside the curly braces. And do the same in the Roll button pressed IBAction. 13
Now, instead, we're going to create an Array. Now, an Array is simply an ordered sequence of items. And the 14
type of items that I want to put in a sequence is, of course, all six of our dice face images. 15
So I'm gonna go ahead and simply create an image literal and I'm going to add my DiceOne. 16
So now I have a single image literal and I'm going to put it inside an Array. And I do that by putting 17
a set of square brackets around it. 18
So now I have an array with one item. And it's important to note that while you're programming, you can 19
see there's a whole bunch of different types of brackets, right? 20
We've seen round brackets like these, curly brackets like these, and now we're looking at square brackets. 21
Just remember that in Swift, square brackets are pretty much exclusively used for holding a collection 22
of items. 23
And in our case, it's going to be a collection of image literals. 24
So we've got the first image down, but now I'm going to select it, hit command C to copy it, and then I'm 25
going to add a comma, and then paste it. 26
So I have a second one. And I'm going to do this until I have a six image literals on screen like so. 27
So now I have an Array, but I have an Array of the same image. 28
So instead, I'm going to double click on the second one, change it to image two. Third one is going to be 29
three, 30
and so on and so forth. Until I've created myself an array of all the possible images, I could place into 31
my image view. 32
So all six dice faces. 33
Now, once I've created my array, you can see that I'm getting a yellow warning that says expression of 34
type, an array of UI images is unused. 35
So at the moment, it's kind of just sitting there, kind of unloved and unused. 36
So let's use it and make it feel useful. And we're going to do that by setting the diceImageView1 37
to show one of these images from the array. 38
So I'm gonna write diceImageView1.image, of course, to change the image property, and I'm gonna 39
set it equal to the value. 40
But, of course, I can't set it equal to the entire Array and Xcode tells me as much. I can't set six images 41
into one image slot, 42
right? 43
Which one is it going to show? 44
Instead, I have to specify the actual item in this Array that I want to show in my diceImageView. 45
And I do that by adding another set of square brackets. 46
Now, inside the set of square brackets, I can specify which item I want out of this Array. 47
So if I add the number 1 right here, then you might think that we will get the first image out of the 48
Array. 49
But in fact, if I run the app and press the roll button, you can see that, strangely enough, it's showing 50
me the second image. And you can see that if you change this to 2, it's going to show DiceThree. 51
And if you change it to 3, then it's going to show number four. 52
So what's going on? 53
Well, it's because programmers like to count from zero. 54
So we like to use the full ten digits from 0 to 9. 55
This one is actually at that position zero. 56
And this one is at position 1, 2, 3, et cetera. 57
So once you adjust that, then if I put in zero, then that's going to pick out the first item. 58
Here's a challenge. 59
Change the code that you see right now so that you display the six dice image. 60
All right. 61
So let's try this out. So 0, 1, 2, 3, 4, 5. 62
So if we change that to 5 and then run our app, then we get those six showing up. So easy enough. 63
Now, I'm gonna set that position number back down to 1, so that we get the second dice image being shown. 64
But now I want to be able to give this value a name so that I can refer to it in exactly the same way 65
that I can refer to my diceImageView1 or diceImageView2 because they have a name. 66
I'm going to go right up here just below my IBOutlets 67
and I'm going to create a variable, and I do that using the var keyword, 68
and then I'm going to give my variable a name and I'm going to call it leftDiceNumber 69
and I'm gonna set it to equal this value. 70
So I'm gonna cut that value from here and paste it in here instead. 71
So now that value is now stored inside a named variable called leftDiceNumber and I can refer to that 72
value if I ever need to by using its name which is 73
leftDiceNumber. 74
. 75
So now our code works exactly the same way as before. 76
And when the diceImageView needs to figure out what image to display, it gets the value 77
of leftDiceNumber. 78
So this gets replaced by 1 and then it picks out the zero, 1, 79
so that particular image to put into its image view. 80
So what has this achieved? It seems like we've just written some extra code and it hasn't really changed 81
anything about our app. 82
So what was the point? 83
Well, now that we have a variable and we have a name pointing to a specific piece of data, we can now 84
keep track of this piece of data, and we can change it, 85
we can vary it essentially. 86
So down here, after we've assigned the image view and image, the next task, we're going to get it to do 87
is to increase the leftDiceNumber. 88
So we're going to set the leftDiceNumber to equa,l the current value of leftDiceNumber which is, of 89
course, 1. We're gonna set it to equal that value plus 1. 90
So now let's imagine ourselves as the computer. When we first press the Roll button, we know that this 91
block of code gets triggered, and the first thing that happens is we set the diceImageViews image to 92
the number 1 position from the Array, 93
so this particular image. The next thing that happens is we increase that number to 1 + ! which 94
is 2. 95
So that means this variable now is holding the value 2. And the next time we press the roll button, 96
well, this is now 2, 97
so it's going to pick out the third image from our Array. 98
And this goes on and on until we get to the very end of our Array. 99
So if you run your app at this point and you click on the Roll button, it changes to the second image, and 100
then the third, and then the fourth the fifth, until it runs out of images because there is no seventh 101
image. 102
And this is the point when our app will crash because we're out of range. 103
We're out of images to show. But that's fine. 104
We've achieved the goal of actually making our user interface do something different every time we press 105
the Roll button. 106
And we've achieved this by having a value that we keep track of and we give it a starting value of 1. 107
But now every time the Roll button gets pressed, we increase its value. 108
And so we can go through our sequence one by one and display all of the images that are inside. 109
Now, here's a question for you. 110
What happens if I cut this line of code and paste it into my rollButtonPressed? 111
What do you think will happen if you had to guess? Now pause the video and run the app as it is and see 112
if your guess was correct. 113
Now, 114
what happens here is that when we press on the Roll button, it puts that number 1 into here, and we 115
pick out the second image which is the one that we're seeing on screen. 116
But watch what happens when I press on the roll button again. Absolutely nothing. 117
So why is that? 118
Well, remember that we said this line of code where you have the var keyword, 119
well, that creates a variable and it gives it a value at the point of creation. 120
So it's set to equal 1. That 1 gets put in here and now leftDiceNumber is increased by 1. 121
So at this point in the code, leftDiceNumber actually equals 2 122
But the next time that you press the Roll button, we recreate our leftDiceNumber and we set it back 123
down to 1 again. 124
So now at this point, the leftDiceNumber is now equal to 1 again. 125
And you can actually confirm this by using that print statement that we learned earlier on by printing 126
the leftDiceNumber there and printing the leftDiceN umber down here as well. 127
And when you run your code and you press the Roll button, you can see that the first print statement 128
gets fired and 1 is printed, and then it continues until the second print statement gets fired and 129
2 shows up. 130
But if I press on the Roll button again, it's still 1 and 2, 1 and 2. 131
Whereas if I move this part where I create the variable and give it an initial value back up to the 132
top of the file, 133
well, then, when I run my app and we take a look at what's being printed, then you can see when I press 134
the Roll button the first time, the leftDiceNumber starts out being 1, 135
but then it gets changed to 2. 136
Now, if I press the Roll button again, then the leftDiceNumber at this point is now 2, 137
and then it gets changed to 3, and then 3 to 4, 4 to 5, 138
and that's why our images keep changing. 139
So remember that when you press the roll button, all of the code inside this block gets triggered again. 140
So print statements are really helpful when our code is not doing what we expect it to do. 141
And it can help you diagnose the problems by looking at what your expectations are, 142
so what would you expect 143
the leftDiceNumber to be at this point, and what would you expect it to be here, 144
and then looking at the reality. And, of course, you can use a string interpolation to actually make this 145
a lot easier on the eye by saying leftDiceNumber at beginning equals, and then we're going to add that 146
backslash and parentheses, and put in the name of that variable to be printed. And then down here, we're 147
going to write leftDiceNumber at the end is equal to. 148
And so we won't get so confused by just looking at numbers. 149
So when I press Roll, you can see at beginning = 1, at the end = 2, at beginning = 2, at the end 150
= 3. 151
This is really, really helpful for us to diagnose problems. All right. 152
So here's a challenge for you. At the moment, our left dice will increase in number until the number six. 153
At which point, when we press the roll button, our app will crash. 154
This is fine. But as a challenge, I want you to figure out how you can change the code to get the right 155
image view involved as well. 156
But it's not as simple as simply repeating what we did with the left side. 157
Now, when you run your app, what we want to happen is when I press Roll, the left side goes to two, but the right 158
side goes to six, and then the right side will count down while the left side goes up, until your app 159
crashes when the left side reaches six, and the right side reaches 2. Pause the video and see if you 160
can complete this challenge. 161
So here's what we would do. 162
Let me go ahead and delete these comments and print statements to declutter our code and notice how 163
I'm currently inside the ViewControl.swift, instead of being inside Main.storyboard where we have 164
the split view. And this is because when your code editor has a very, very small amount of width, it will 165
wrap the code on the different lines, making it quite confusing to see what's going on. 166
So when you're done usually with designing your app and creating the IBOutlets, I tend to recommend 167
students to head straight for the view controller, 168
so you get as much space as possible to be able to write your code. 169
So the first thing we're going to do is we're going to start out the diceImageView2 with the sixth 170
image. Right here when we have the rollButtonPressed, 171
we're going to tap into the diceImageView2 and set the image property to equal the sixth image 172
in this Array. 173
So I'm simply going to copy this line of code here to save myself a bit of time.And instead of 174
leftDiceNumber, if I want to pick out the sixth image, I have to put the number 5 here. 175
So what if instead of having this number 5 hardcoded which I can't change because I don't have access 176
to it using a reference like the leftDiceNumber, what if I create a reference to it? 177
So I create a variable called rightDiceNumber and I set that equal to the value I have here. 178
So I'll cut it from here and I'll paste it in here. 179
So now I've got this thing called rightDiceNumber and it holds that value 5. So I can now use that 180
rightDiceNumber here, instead of that number5. When I run my app right now and I press the Roll 181
button, my dice ImageView2 is now showing the fifth item in our Array which is, of course, dice 6. 182
Now, all I have to do is figure out how to step down this number by 1 each time. 183
Well, that's where we're going to vary our variable right here. 184
So after it has displayed the image, we're going to set the rightDiceNumber to equal the current value which 185
is 5, and then instead of plus 1, we're going to minus 1. 186
So now it's equal to 4 and then it's equal to 3, and then 2, and then 1. 187
So if I run my app right now and I press my Roll button, it shows exactly the behavior I showed you earlier 188
on. Did you manage to get that? 189
If not, be sure to continue to the next lesson where we do another Swift Deep Dive on Variables and Arrays. 190
But if all of that made a lot of sense and you already know about Variables and Arrays, then feel free 191
to skip the next lesson and continue building out the app.