1
00:00:08,070 --> 00:00:10,500
Hey buddy what's going on this is Caleb with Deb's slopes.

2
00:00:10,500 --> 00:00:15,000
And in this video we're going to continue learning about protocols and we're going to build a little

3
00:00:15,000 --> 00:00:21,960
app that's going to allow us to use mutating functions within protocols and we're going to use it to

4
00:00:21,990 --> 00:00:24,200
modify some values is going to be really cool.

5
00:00:24,210 --> 00:00:28,650
It's just another thing we can do with protocols so let's get started.

6
00:00:28,650 --> 00:00:36,020
Go ahead and pull open X code and you should get this little view here click on Create new X code project

7
00:00:36,270 --> 00:00:41,630
and we're going to go ahead and just create a single view app and we're going to name this luck on.

8
00:00:41,840 --> 00:00:45,300
OK it's going to be like having an app having to do with light.

9
00:00:45,330 --> 00:00:47,190
So go ahead and click next.

10
00:00:47,430 --> 00:00:53,120
And we're going to save this in protocols and delegates like so.

11
00:00:53,130 --> 00:00:56,450
Boom there we go.

12
00:00:56,460 --> 00:00:58,760
So go ahead and pull this open in full screen.

13
00:00:58,760 --> 00:01:00,530
If whoops if it'll let me.

14
00:01:00,540 --> 00:01:01,600
There we go.

15
00:01:01,980 --> 00:01:04,680
And we're going to start by building the UI really quickly.

16
00:01:04,680 --> 00:01:06,480
It's a super simple interface.

17
00:01:06,510 --> 00:01:11,370
Just click on the background view set the background to be dark grey.

18
00:01:11,490 --> 00:01:18,660
We're going to drag on a label and then we're going to drag in some assets to work for some or to use

19
00:01:18,660 --> 00:01:20,290
as a button graphics.

20
00:01:20,310 --> 00:01:28,050
So go ahead and type UI label and go ahead and drag this on to the screen and center it like so we're

21
00:01:28,050 --> 00:01:33,400
going to change the font to custom the family to Avenir next.

22
00:01:33,810 --> 00:01:37,580
And we're going to set the style to be heavy.

23
00:01:37,640 --> 00:01:38,220
OK.

24
00:01:38,310 --> 00:01:41,190
And we're going to bump this all the way up to like size 100.

25
00:01:41,220 --> 00:01:43,080
It's going to be really big.

26
00:01:43,080 --> 00:01:50,580
And of course with that in mind we need to resize this whole thing like so can stretch it so that it's

27
00:01:50,580 --> 00:01:51,790
a little wider.

28
00:01:52,640 --> 00:01:53,550
There we go.

29
00:01:53,960 --> 00:01:57,540
And now what we're going to do is we're going to write the word off.

30
00:01:57,860 --> 00:01:58,110
OK.

31
00:01:58,130 --> 00:02:03,150
And you know it just for fun let's put in some emojis here let's put in the the moon.

32
00:02:03,320 --> 00:02:10,730
But we're going to make it dark so that it is like a not a full moon but whatever dark moon is and we're

33
00:02:10,730 --> 00:02:13,360
actually going to need to reduce this I guess to size 80.

34
00:02:13,370 --> 00:02:15,640
Perhaps that might help.

35
00:02:15,650 --> 00:02:17,010
Maybe 70.

36
00:02:17,290 --> 00:02:17,750
OK.

37
00:02:17,960 --> 00:02:18,730
Looks like 70s.

38
00:02:18,740 --> 00:02:19,600
Good.

39
00:02:19,970 --> 00:02:26,690
And we're going to go ahead and center that again and change the font color to be white just like so

40
00:02:27,560 --> 00:02:35,590
now we're going to go ahead and pin this to pin this but align this horizontally and vertically like

41
00:02:35,590 --> 00:02:41,440
so by selecting the item and then pinning it horizontally and vertically in the container.

42
00:02:41,830 --> 00:02:49,360
And now we're going to go ahead and add a button like so and we're going to just drop it right there.

43
00:02:49,360 --> 00:02:54,010
Now at this point we actually do need to use some assets.

44
00:02:54,010 --> 00:03:00,760
So we're going to go ahead and pull in some graphics and we're going to use these to set the values

45
00:03:00,760 --> 00:03:02,880
for our off and on button.

46
00:03:02,920 --> 00:03:09,130
So click on assets Doxey assets and then you can actually drag in these assets if you don't have these

47
00:03:09,130 --> 00:03:12,660
you can download them by tapping on the little download source code button.

48
00:03:12,670 --> 00:03:14,750
And the assets will be downloaded.

49
00:03:14,800 --> 00:03:18,810
You can airdrop them to your Mac if you're on your iPhone or if you're on your Mac.

50
00:03:18,820 --> 00:03:20,920
They just download your Downloads folder.

51
00:03:20,920 --> 00:03:25,520
So now we have an on button and off button which is really cool.

52
00:03:25,540 --> 00:03:30,490
So what we're going to do is we're going to go back to the story board and we're going to set this button

53
00:03:31,240 --> 00:03:33,530
to not have a text value.

54
00:03:33,970 --> 00:03:41,030
So delete that but we are going to set it to be off button because that's the white one with the shadow.

55
00:03:41,080 --> 00:03:47,260
Now we're going to need to resize this so go ahead and give it a height and width constraint of 50 and

56
00:03:47,260 --> 00:03:49,380
50 like so.

57
00:03:49,570 --> 00:03:54,970
But of course it's not going to do anything until we pin it horizontally in the container and then we're

58
00:03:54,970 --> 00:03:56,890
going to go ahead and we're going to pin it.

59
00:03:57,010 --> 00:03:57,660
Whoops.

60
00:03:58,000 --> 00:04:05,670
We're going to pin it 100 from the bottom like so and then it makes a nice square perfectly circular

61
00:04:05,670 --> 00:04:06,990
button which is cool.

62
00:04:07,290 --> 00:04:14,520
So that's too small for my liking so I'm actually going to change this to be 100 by 100.

63
00:04:15,020 --> 00:04:16,340
OK that looks pretty good.

64
00:04:16,740 --> 00:04:20,660
And now all we need to do is to connect the button and the label to our view controller.

65
00:04:20,730 --> 00:04:26,580
So go ahead and open the assistant editor and we're going to go ahead and make some room here and I'm

66
00:04:26,580 --> 00:04:29,090
going to connect these to this new controller.

67
00:04:29,160 --> 00:04:30,840
Get rid of the boilerplate stuff.

68
00:04:30,920 --> 00:04:31,920
You don't need it.

69
00:04:31,920 --> 00:04:34,560
And yeah let's go ahead and do this.

70
00:04:34,560 --> 00:04:44,430
So from the label right click and drag and we're going to call this on off label like so and we're going

71
00:04:44,430 --> 00:04:47,290
to right click and drag from the button and put it below.

72
00:04:47,290 --> 00:04:56,810
You did load change the connection to action and we're going to call this toggle button was pressed.

73
00:04:57,210 --> 00:05:02,200
And basically what this is going to do when we tap this button we're going to set the view to be white.

74
00:05:02,220 --> 00:05:06,720
We're going to change the font color to be black and change these and Moji used to actually be the full

75
00:05:06,720 --> 00:05:07,640
moon.

76
00:05:07,650 --> 00:05:12,480
It's basically sort of like a flashlight app but we're going to use a protocol and a mutating function

77
00:05:12,480 --> 00:05:13,620
to change its value.

78
00:05:13,640 --> 00:05:15,580
It's really really cool actually.

79
00:05:15,600 --> 00:05:19,920
So now that the interface is finished we are going to oh you know what.

80
00:05:19,940 --> 00:05:20,310
No no no.

81
00:05:20,310 --> 00:05:22,650
Sorry if we're going to change what the button looks like.

82
00:05:22,650 --> 00:05:24,570
We need an outlet for the button as well.

83
00:05:24,570 --> 00:05:29,230
So right click and drag and create an outlet called toggle button.

84
00:05:29,250 --> 00:05:30,500
Perfect.

85
00:05:30,550 --> 00:05:35,370
OK so now that our interfaces done we're actually going to go ahead and reopen these editors on the

86
00:05:35,370 --> 00:05:36,120
side.

87
00:05:36,210 --> 00:05:41,070
We're going to close the assistant editor and go into our view controller.

88
00:05:41,070 --> 00:05:45,130
So we're going to basically think what we need to do here.

89
00:05:45,150 --> 00:05:51,360
When I toggle that button we're going to need to change the background to white.

90
00:05:51,360 --> 00:05:55,690
We're going to need to change the font color to dark gray or we're going to need to replace those emojis

91
00:05:55,740 --> 00:06:00,090
with full moons instead of the Dark Moon and then change the button image as well.

92
00:06:00,090 --> 00:06:04,980
So there's a lot of things we've got to do but I think a great way to manage this would be to use an

93
00:06:04,980 --> 00:06:10,440
enumeration case so we're going to right click and create a new group we're going to call it in DMs

94
00:06:11,190 --> 00:06:15,630
while we're at it we might as well create a new group for our protocols or just create a protocol's

95
00:06:15,630 --> 00:06:22,170
group as well and then rearrange those whoops we don't want it to be in the folder we want it to be

96
00:06:22,290 --> 00:06:24,490
outside the folder.

97
00:06:25,020 --> 00:06:25,910
That's fine.

98
00:06:26,190 --> 00:06:26,450
OK.

99
00:06:26,460 --> 00:06:33,460
So anyway go ahead and right click on the folder click new file and we're going to create an enumeration.

100
00:06:33,510 --> 00:06:40,410
So I clicked on swift file and this enumeration is basically going to help us to monitor the on status

101
00:06:40,410 --> 00:06:42,290
or the off status of the button.

102
00:06:42,330 --> 00:06:46,320
So I'm going to call it switch status.

103
00:06:46,320 --> 00:06:52,100
Press enter and what we're going to do is we're going to create an enumeration with two different cases.

104
00:06:52,140 --> 00:06:54,360
OK one for on and one for off.

105
00:06:54,360 --> 00:07:03,890
So do that now by typing Inam switch status case on.

106
00:07:04,360 --> 00:07:06,510
And then we're going to type case on.

107
00:07:06,820 --> 00:07:08,800
And we actually don't need to do two separate lines.

108
00:07:08,800 --> 00:07:15,740
We can just type Khama off and that creates two separate cases for us which is really neat.

109
00:07:15,940 --> 00:07:21,880
But what I said was that we would be using mutating functions and we're going to actually create our

110
00:07:21,880 --> 00:07:24,380
protocol now so that I can explain that to you.

111
00:07:24,640 --> 00:07:31,750
So go ahead and right click on the protocols group click new file and click swift file.

112
00:07:31,840 --> 00:07:38,790
We're going to name this toggle obal and this is another convention another naming convention for protocols.

113
00:07:38,860 --> 00:07:45,910
If this protocol kind of only handles one type of behavior like toggling something you can just name

114
00:07:45,910 --> 00:07:52,000
the protocol toggle a bowl and then when we conform to this we are basically making something toggle

115
00:07:52,000 --> 00:07:54,640
able able to be toggled on or off.

116
00:07:54,640 --> 00:07:56,200
So go ahead and click Create.

117
00:07:56,740 --> 00:08:04,840
And we're going to name our protocol here like so protocol toggle label and we're going to write one

118
00:08:04,900 --> 00:08:08,340
function func toggle.

119
00:08:08,670 --> 00:08:09,500
OK.

120
00:08:09,640 --> 00:08:12,260
Now of course there's no implementation code here.

121
00:08:12,490 --> 00:08:20,140
When we call toggle somewhere else we're going to basically say hey whatever class or structure or enumeration

122
00:08:20,140 --> 00:08:26,290
we conform to targetable and we'll be able to call toggle and set up the implementation that way.

123
00:08:26,290 --> 00:08:33,600
Now I did say though that we're using a mutating function so we need to call that here mutating and

124
00:08:33,610 --> 00:08:39,850
a mutating function whatever variable we call toggle on we're actually going to change the value of

125
00:08:39,850 --> 00:08:40,860
that variable.

126
00:08:40,990 --> 00:08:43,450
And that's where our enumeration comes into play.

127
00:08:43,450 --> 00:08:49,480
So with our protocol toggle able here go back to switch status and what we're going to do is we're going

128
00:08:49,480 --> 00:08:52,840
to conform to our protocol in this enumeration.

129
00:08:53,050 --> 00:08:55,170
So go ahead and do that by typing a colon.

130
00:08:55,360 --> 00:08:58,630
And we're going to make switch status toggle obol.

131
00:08:58,630 --> 00:09:00,820
We're going to give it the capability to be toggled.

132
00:09:00,940 --> 00:09:05,710
But of course it's going to yell at us saying that we don't yet conform to this protocol.

133
00:09:05,890 --> 00:09:12,310
How do we conform to it by by implementing the mutating function toggle.

134
00:09:12,310 --> 00:09:17,180
So let's go ahead and do that beneath our cases here by typing Tuggle.

135
00:09:17,440 --> 00:09:20,960
And you'll notice that the function toggle comes in here.

136
00:09:21,010 --> 00:09:25,990
But remember we want it to be mutating so we need to declare mutating.

137
00:09:25,990 --> 00:09:32,350
Now what we're going to do is we're basically going to write a statement saying if the current case

138
00:09:32,440 --> 00:09:38,720
is on it's going to be flipped to off when we call toggle if it's off we're going to flip it to on.

139
00:09:39,010 --> 00:09:44,350
So to do this we're going to actually use a switch statement and since this is an enumeration of type

140
00:09:44,350 --> 00:09:50,480
switch status when we use self that's going to refer to whatever instance of switch status we use.

141
00:09:50,590 --> 00:09:57,120
So we can type switch self and if you have not yet use switch statements they're basically like if.

142
00:09:57,130 --> 00:10:04,030
Else or if else if statements that allow us to switch through a bunch of different cases and since our

143
00:10:04,030 --> 00:10:09,100
switched status only has two values we could technically use an if else statement.

144
00:10:09,340 --> 00:10:12,650
But I find that a switch statement can be a little more descriptive.

145
00:10:12,880 --> 00:10:17,530
So let's say that we have two separate cases for a switch which we do.

146
00:10:17,530 --> 00:10:24,800
Case one is on K and in a switch statement you need to put a colon at the end.

147
00:10:25,060 --> 00:10:27,860
Then we're going to do something.

148
00:10:28,370 --> 00:10:30,970
Ok but what if we are off.

149
00:10:30,970 --> 00:10:35,420
So case off the colon and we're going to do something else.

150
00:10:35,600 --> 00:10:35,880
OK.

151
00:10:35,890 --> 00:10:37,660
That's how a switch statement works.

152
00:10:37,720 --> 00:10:42,550
If the value comes in as on we're going to do something otherwise if the value comes in as off we'll

153
00:10:42,550 --> 00:10:43,700
do that thing.

154
00:10:43,840 --> 00:10:47,530
Now like I said this is a mutating function called toggle.

155
00:10:47,740 --> 00:10:56,080
So if the value of this switch status comes in as on what we're going to do is we're going to set self

156
00:10:56,230 --> 00:10:58,030
meaning the switch status.

157
00:10:58,120 --> 00:11:03,550
We're going to set self to be equal to off this mutating function is actually going to be able to set

158
00:11:03,550 --> 00:11:07,270
the value of whatever instance of switch status we have.

159
00:11:07,270 --> 00:11:14,470
The same thing goes for k start off we're going to set self to be equal to dot on this mutating function

160
00:11:14,530 --> 00:11:19,860
allows us to change the value of any instance of switch status which is really really cool.

161
00:11:19,930 --> 00:11:24,130
So we conformed to a protocol within our enumeration.

162
00:11:24,130 --> 00:11:26,310
And now watch what we can do.

163
00:11:26,470 --> 00:11:32,740
We can go into our view controller like so and what we can do is we can create an instance of switch

164
00:11:32,740 --> 00:11:35,200
status and set it with a default value.

165
00:11:35,200 --> 00:11:40,990
So in our interface builder let's think what status is this currently off.

166
00:11:40,990 --> 00:11:49,690
So if I want to set it to be off by default I can go like this var switch status of type switch status

167
00:11:50,260 --> 00:11:54,170
and we're going to set it to be equal to off.

168
00:11:54,160 --> 00:11:54,590
OK.

169
00:11:54,790 --> 00:11:58,140
So we're setting a default value when switch status is created.

170
00:11:58,240 --> 00:12:00,800
It is set to be off by default.

171
00:12:00,940 --> 00:12:02,740
That is going to be really helpful for.

172
00:12:02,880 --> 00:12:09,260
Because what we're going to do is we are basically going to toggle it can remember switch status.

173
00:12:09,390 --> 00:12:16,260
If I go look at the definition of switch status if I call switch status toggle it's basically going

174
00:12:16,260 --> 00:12:21,950
to take that off value and it's going to flip it to be on if it's on it will flip it to be off.

175
00:12:21,960 --> 00:12:29,580
So when the toggle button is pressed we're going to go ahead and call switch status dot toggle.

176
00:12:29,580 --> 00:12:30,860
Pretty easy right.

177
00:12:31,350 --> 00:12:32,910
And that's going to toggle the value.

178
00:12:32,910 --> 00:12:37,180
So it starts out as off and we toggle it when we press the button.

179
00:12:37,200 --> 00:12:40,380
That makes sense right just like a light switch or a push button.

180
00:12:40,380 --> 00:12:45,960
So now we're going to go ahead and use an IF statement to check if it's off and we're going to do something

181
00:12:46,350 --> 00:12:49,690
and if it's not off meaning on we're going to do something else.

182
00:12:49,740 --> 00:12:59,190
So if switch status is equal to off we're going to go ahead and we're going to set the image to be our

183
00:12:59,190 --> 00:13:05,520
off button which if you look at the assets here are off button is the white one like so and the on button

184
00:13:05,520 --> 00:13:06,550
is the black one.

185
00:13:06,600 --> 00:13:10,370
So we're going to go ahead and type if switch statuses off.

186
00:13:10,410 --> 00:13:18,360
We're going to set toggle button set image and we're going to call you I image named and we can type

187
00:13:18,600 --> 00:13:19,640
off button.

188
00:13:19,970 --> 00:13:20,360
OK.

189
00:13:20,380 --> 00:13:25,590
Now when you use your image this way you need to force unwrap it but that's going to set the image to

190
00:13:25,590 --> 00:13:28,080
be the off image if it is off.

191
00:13:28,080 --> 00:13:30,290
That's what we want now to get this to work.

192
00:13:30,300 --> 00:13:33,580
You need to set the control state to be normal.

193
00:13:33,750 --> 00:13:36,900
And that way we can actually change the image.

194
00:13:36,900 --> 00:13:43,080
Pretty cool then what we need to do is we need to think the background color in our interface builder

195
00:13:43,770 --> 00:13:46,350
is gray when it's off.

196
00:13:46,350 --> 00:13:53,070
So what I'm going to say is I'm going to go ahead and do view the background color and I'm going to

197
00:13:53,070 --> 00:13:54,480
use a color literal.

198
00:13:54,600 --> 00:13:59,460
And these are the coolest things you can actually click on it and you can set whatever color you want.

199
00:13:59,490 --> 00:14:04,590
There is my dark gray background color so I'm going to set the background to be that color literal.

200
00:14:04,620 --> 00:14:11,990
Next up we're going to need to set the status label to say off and have the two dark moons.

201
00:14:12,000 --> 00:14:20,640
So go ahead and say on off label text equals and we're going to pass in those two dark moons which I

202
00:14:20,640 --> 00:14:23,920
can access here I'm going to copy and paste it.

203
00:14:24,270 --> 00:14:26,180
And I'm going to say off.

204
00:14:26,400 --> 00:14:27,160
Just like that.

205
00:14:27,180 --> 00:14:29,210
That's how we did it in the interface builder.

206
00:14:29,520 --> 00:14:30,920
So that is set.

207
00:14:31,020 --> 00:14:34,370
And now I need to change the text color to be white.

208
00:14:34,530 --> 00:14:40,590
So on off label dot text color and I can use a color literal again.

209
00:14:40,590 --> 00:14:42,290
Of course I want it to be white.

210
00:14:42,510 --> 00:14:43,580
So that's great.

211
00:14:43,680 --> 00:14:48,120
If the switch is off it's going to set the off image for the Betton.

212
00:14:48,240 --> 00:14:52,990
It's going to set the background color the text and the text color elves.

213
00:14:53,180 --> 00:15:03,060
OK we need to set the toggle button that said image and we're going to use you image named wups named

214
00:15:03,690 --> 00:15:05,600
and we need to set the on button.

215
00:15:05,670 --> 00:15:10,720
Like so force and wrap it and then we're going to set the control state to be normal.

216
00:15:10,800 --> 00:15:13,750
That way we can set the image of the button.

217
00:15:13,860 --> 00:15:20,700
Next we're going to set the view on background color to be a color literal and if it is on we want the

218
00:15:20,700 --> 00:15:24,240
background to be white but that makes our text invisible.

219
00:15:24,240 --> 00:15:28,260
So let's go ahead and let's change the text color and let's change what the text says.

220
00:15:28,260 --> 00:15:35,220
Let's start with the text on off label that text equals and we're going to say

221
00:15:37,620 --> 00:15:38,320
on.

222
00:15:38,480 --> 00:15:39,130
OK.

223
00:15:39,180 --> 00:15:43,740
And just for fun I'm going to put in my nice glowing moon here.

224
00:15:43,740 --> 00:15:45,110
Pretty cool.

225
00:15:45,630 --> 00:15:46,640
And there we go.

226
00:15:46,740 --> 00:15:47,680
So that's on.

227
00:15:47,700 --> 00:15:49,600
But the font color is still white.

228
00:15:49,620 --> 00:15:51,510
So the words would be disappearing.

229
00:15:51,510 --> 00:15:57,630
So let's go ahead and set on off label text color and we're going to set to be a color literal and we're

230
00:15:57,630 --> 00:16:00,570
going to choose the dark gray color like the background.

231
00:16:00,570 --> 00:16:01,970
Very very cool.

232
00:16:01,980 --> 00:16:04,540
This is actually all we need to do.

233
00:16:04,680 --> 00:16:08,330
Thanks to our protocol and things to our mutating function.

234
00:16:08,400 --> 00:16:15,480
We can set our switch status to have an inherent value off and then we can toggle it every time we press

235
00:16:15,480 --> 00:16:18,570
the button it's going to actually change the value of our variable.

236
00:16:18,570 --> 00:16:22,300
That's the really cool thing with mutating functions.

237
00:16:22,320 --> 00:16:26,490
So let's go build this to a simulator and let's see how we did.

238
00:16:27,200 --> 00:16:30,250
We're going to build it and let's just test it out really quickly.

239
00:16:30,270 --> 00:16:34,430
We should be able to toggle the values to flip this on and flip this off.

240
00:16:34,680 --> 00:16:41,130
If you really wanted to dive into this you could wire up the flash on the camera to turn on and off

241
00:16:41,130 --> 00:16:42,420
whenever you toggle the button.

242
00:16:42,420 --> 00:16:43,730
That's something you could do.

243
00:16:43,770 --> 00:16:46,000
Not saying you will but you definitely could.

244
00:16:46,230 --> 00:16:49,200
So let's let's check out our sim here and see how we did.

245
00:16:55,430 --> 00:17:01,100
Read it appears to be loading taking its sweet time.

246
00:17:01,120 --> 00:17:03,410
OK so here we are it says off.

247
00:17:03,520 --> 00:17:07,780
We have the dark moons the light button when I click it watch what happens.

248
00:17:07,930 --> 00:17:10,280
It toggles on the background becomes white.

249
00:17:10,360 --> 00:17:13,750
The moons change the words change and the spring board quit.

250
00:17:13,750 --> 00:17:14,940
Think Spring board.

251
00:17:14,950 --> 00:17:16,430
Good old Escobedo bugs.

252
00:17:16,810 --> 00:17:19,670
And the button changes as well let's toggle it off.

253
00:17:20,050 --> 00:17:20,820
So cool.

254
00:17:20,830 --> 00:17:25,530
So I'm mutating function is able to change the values as we want.

255
00:17:25,540 --> 00:17:26,880
Super super cool guys.

256
00:17:26,890 --> 00:17:32,740
This has been a little intro to protocols and delegates I hope that you now feel confident using them

257
00:17:32,950 --> 00:17:36,880
or at least thinking of ways that you could use them in your apps whether you're setting up a specific

258
00:17:36,880 --> 00:17:42,280
type of functionality whether you are passing data using the delegate method or even using mutating

259
00:17:42,280 --> 00:17:45,250
functions to modify values.

260
00:17:45,250 --> 00:17:50,740
There's lots of ways protocol's can benefit us so I hope you've enjoyed this little intro to protocols

261
00:17:50,740 --> 00:17:53,060
and we're going to head over to the next video now.