1
00:00:07,710 --> 00:00:10,730
Hey everybody what's going on this is Caleb with slopes dot com.

2
00:00:10,750 --> 00:00:15,550
And in this video we're going to continue our talk about protocols and we're going to build a little

3
00:00:15,550 --> 00:00:18,100
application called Color wizard.

4
00:00:18,100 --> 00:00:20,650
And I want to show you what it's like really quickly.

5
00:00:20,650 --> 00:00:26,320
It's a super simple app but we're going to use protocols to delegate the passing of information between

6
00:00:26,320 --> 00:00:28,800
View controllers and it's super super cool.

7
00:00:28,810 --> 00:00:30,340
Let me show you really quick.

8
00:00:30,340 --> 00:00:33,590
So we're going to pull it open and it says here color presenter.

9
00:00:33,610 --> 00:00:34,660
Grey is boring.

10
00:00:34,660 --> 00:00:41,710
Choose a color so I can click the plus button and I can choose a color green yellow blue red or purple.

11
00:00:41,710 --> 00:00:47,890
And when I choose one that data is passed back to the previous view controller and it's saved as the

12
00:00:47,890 --> 00:00:49,930
background color for the view.

13
00:00:49,990 --> 00:00:54,430
We also passed the name of the color so that's how this application is going to work.

14
00:00:54,430 --> 00:00:59,290
It's pretty simple to build and so we're going to go ahead and get started right now.

15
00:00:59,290 --> 00:01:04,210
Go ahead and pull up an X code and when you do this will pop up what we're going to do is we're going

16
00:01:04,210 --> 00:01:09,860
to click Create new X code project and I'm going to pull this over here to the proper window.

17
00:01:10,070 --> 00:01:12,840
And this is going to be a single view application.

18
00:01:12,850 --> 00:01:14,840
So go ahead and click that.

19
00:01:15,000 --> 00:01:16,240
That looks great.

20
00:01:16,240 --> 00:01:20,930
And for the product name I'm just going to call it color magic.

21
00:01:21,580 --> 00:01:23,770
OK go ahead and click next.

22
00:01:24,190 --> 00:01:25,780
And we're going to save this.

23
00:01:25,780 --> 00:01:29,310
Let's see where should we save this.

24
00:01:29,310 --> 00:01:33,660
How about in the protocols and delegates folder that only makes sense.

25
00:01:33,970 --> 00:01:38,270
And now we're going to go ahead and pull that open full screen.

26
00:01:38,530 --> 00:01:39,670
And here's what we're going to do.

27
00:01:39,670 --> 00:01:41,640
We're going to build the UI first.

28
00:01:41,740 --> 00:01:42,160
OK.

29
00:01:42,280 --> 00:01:46,510
So go into May not storyboard and just like that.

30
00:01:46,540 --> 00:01:50,340
We're going to go ahead and start building out this user interface.

31
00:01:50,350 --> 00:01:54,360
So this screen is actually pretty simple.

32
00:01:54,370 --> 00:01:57,850
There's just going to be a single label in the center that says Gray is boring.

33
00:01:57,850 --> 00:02:04,150
Choose a color but we do need to set the background color so go ahead and click and we're going to set

34
00:02:04,150 --> 00:02:09,480
it to be this dark gray color which if you're interested that is whip's.

35
00:02:09,980 --> 00:02:15,820
I don't know why that is not full screen that color is for a for a for a k if you want to use that same

36
00:02:15,820 --> 00:02:16,850
dark gray that I am.

37
00:02:16,870 --> 00:02:18,430
It's up to you.

38
00:02:18,430 --> 00:02:21,770
And next we're going to go ahead and add AUI label.

39
00:02:22,000 --> 00:02:29,320
So drag one on there center it make it look pretty and we're going to drag it so that it can fit nicely

40
00:02:29,520 --> 00:02:30,210
right here.

41
00:02:30,250 --> 00:02:37,060
Make it a little taller and we're going to make it so that it is two lines so we can have two lines

42
00:02:37,060 --> 00:02:37,990
of text.

43
00:02:38,200 --> 00:02:42,890
And just like I said it's going to say Gray is boring.

44
00:02:43,090 --> 00:02:46,050
Choose a color.

45
00:02:46,210 --> 00:02:46,780
OK.

46
00:02:47,230 --> 00:02:53,320
Now we're going to center this and I think we should also change the font from system to custom and

47
00:02:53,320 --> 00:02:55,510
change the family to Avenir next.

48
00:02:55,600 --> 00:02:57,000
It's my favorite font.

49
00:02:57,550 --> 00:03:03,400
Then we're going to select Demi bold and I'm going to bump this up to maybe 24 and you can already see

50
00:03:04,030 --> 00:03:07,930
it's starting to go onto the second line which is exactly what we want.

51
00:03:08,370 --> 00:03:08,620
OK.

52
00:03:08,620 --> 00:03:13,590
Click next and change the font color to be white like so.

53
00:03:13,810 --> 00:03:19,630
And then what we're going to do is we're going to go ahead and pin this horizontally and vertically

54
00:03:19,630 --> 00:03:21,850
in the container so that it stays right in the center.

55
00:03:22,180 --> 00:03:28,910
So click on the align button and select horizontally and vertically in a container and add two constraints.

56
00:03:29,320 --> 00:03:32,120
Now of course you can see that there are some problems here.

57
00:03:32,290 --> 00:03:33,800
It's not on two lines.

58
00:03:33,940 --> 00:03:40,390
So to fix that we're going to just kind of eyeball a width and let's just say maybe 150 press enter.

59
00:03:40,640 --> 00:03:42,520
OK obviously that's too small.

60
00:03:42,520 --> 00:03:48,370
So we need to modify it by selecting the label and changing the width maybe to 200.

61
00:03:48,400 --> 00:03:49,250
There we go.

62
00:03:49,350 --> 00:03:50,230
Gray is boring.

63
00:03:50,230 --> 00:03:51,340
Choose a color.

64
00:03:51,370 --> 00:03:58,130
So next what we're going to do is we are going to go ahead and drag on a new UI View Controller.

65
00:03:58,150 --> 00:04:03,460
So go ahead and type UI view and the controller is going to be the top result there.

66
00:04:03,460 --> 00:04:05,960
Drag it on and let it go.

67
00:04:06,400 --> 00:04:10,630
And for this what we're going to do is we're going to make five UI buttons and we're going to put them

68
00:04:10,630 --> 00:04:16,750
inside of a stacked view and keep a stacked stack is going to allow us to basically equally space all

69
00:04:16,750 --> 00:04:19,390
five buttons really easily.

70
00:04:19,390 --> 00:04:26,170
So go ahead and search for Button which is the same thing as a UI button as you probably know and drag

71
00:04:26,170 --> 00:04:31,560
one on just like that and I'm going to just go and copy and paste it five times.

72
00:04:31,750 --> 00:04:35,480
One two three four five.

73
00:04:36,040 --> 00:04:41,350
And with all these done we can go ahead and select all of them and then click the stack button right

74
00:04:41,350 --> 00:04:42,500
here at the bottom.

75
00:04:42,790 --> 00:04:44,120
And now it's in the stack view.

76
00:04:44,120 --> 00:04:47,510
They're evenly spaced and yeah it's really cool.

77
00:04:47,530 --> 00:04:50,750
So let's go ahead let's actually make this stack.

78
00:04:50,770 --> 00:04:57,040
You take up the entire width of the screen by clicking on the Binman menu or pin button I guess and

79
00:04:57,040 --> 00:05:05,320
setting all of the constraints here to be 0 0 0 and 0 press enter and you'll see that it stretches out.

80
00:05:05,350 --> 00:05:08,670
The only problem is that we are not yet equally spaced.

81
00:05:08,680 --> 00:05:09,430
OK.

82
00:05:09,580 --> 00:05:14,820
If you look in the attributes inspector you'll notice that the distribution is just set to fill.

83
00:05:14,830 --> 00:05:20,600
This is just kind of saying hey take up this space but we need to tell it to fill equally.

84
00:05:20,590 --> 00:05:26,400
And as you can see the buttons automatically will scale to be of equal size.

85
00:05:26,440 --> 00:05:26,870
Cool.

86
00:05:26,890 --> 00:05:32,530
So let's go ahead let's set up our buttons now to have the proper colors in the background as well as

87
00:05:32,530 --> 00:05:33,570
their label.

88
00:05:33,580 --> 00:05:37,170
So this one we're going to scroll down and choose.

89
00:05:37,170 --> 00:05:41,540
It's background color which you know what I'm going to open up my colors here.

90
00:05:41,830 --> 00:05:46,100
And I think let's go ahead and find a nice green color.

91
00:05:47,130 --> 00:05:50,340
And I don't really like any of those.

92
00:05:50,410 --> 00:05:53,940
Maybe I have one in that I've saved already.

93
00:05:54,700 --> 00:05:56,150
That looks much better.

94
00:05:56,440 --> 00:05:59,760
Ok if you want this color just by the way it's 6 D.

95
00:05:59,770 --> 00:06:04,880
B C 6 3 and you can use that it's totally fine.

96
00:06:04,930 --> 00:06:12,480
And now let's go ahead and change the text color to white K and we're going to bump it up to maybe 20.

97
00:06:12,570 --> 00:06:16,990
Let's do 24 and then we're going to actually change the fonts will have to change the size in just a

98
00:06:16,990 --> 00:06:17,770
second.

99
00:06:18,040 --> 00:06:23,160
Do Avenir next and do Demy bold and make it size 24.

100
00:06:23,630 --> 00:06:24,290
OK.

101
00:06:24,550 --> 00:06:25,570
Very cool.

102
00:06:25,570 --> 00:06:31,300
Now you know what I'm noticing that these buttons they don't have the right text property for the font

103
00:06:31,450 --> 00:06:34,830
or the size so I'm going to actually get rid of those and then watch what happens.

104
00:06:34,840 --> 00:06:39,820
I can just duplicate these and they'll automatically fill in exactly what I needed them to be like.

105
00:06:39,820 --> 00:06:41,850
So that's just a nice little hack.

106
00:06:42,430 --> 00:06:47,430
All right so with all this all five buttons in place now I can start changing the colors again.

107
00:06:47,440 --> 00:06:49,370
So let's choose a nice yellow.

108
00:06:49,390 --> 00:06:51,370
Now we go for this one.

109
00:06:51,370 --> 00:06:53,280
Let's do a nice blue.

110
00:06:54,040 --> 00:06:55,330
That's a little too intense.

111
00:06:55,330 --> 00:06:57,100
How about this one.

112
00:06:57,100 --> 00:06:59,260
That's better for this one.

113
00:06:59,260 --> 00:07:00,680
Let's do a red color.

114
00:07:00,700 --> 00:07:02,180
I think I have one saved here.

115
00:07:02,280 --> 00:07:02,930
Yup.

116
00:07:03,250 --> 00:07:05,440
Oh by the way guys I'm not really telling you what these colors are.

117
00:07:05,440 --> 00:07:06,280
Am I.

118
00:07:06,310 --> 00:07:12,750
The yellow is a 9 4 for the blue is 4 7 8.

119
00:07:13,990 --> 00:07:22,100
The red is 2 5 0 4 E and the bottom one we're going to do a nice purple color like so.

120
00:07:22,480 --> 00:07:27,540
And this purple if you're interested is 8 6 8 7 B-D.

121
00:07:27,640 --> 00:07:32,740
So this is great but the only thing we need to do now is to set each of these buttons labels to match

122
00:07:32,740 --> 00:07:34,660
the color that's reflected in the background.

123
00:07:34,810 --> 00:07:37,940
So go ahead and click on green and type Green.

124
00:07:37,960 --> 00:07:40,360
Go ahead and click on yellow and type yellow.

125
00:07:40,360 --> 00:07:48,170
You guys know the drill blue red and purple.

126
00:07:48,470 --> 00:07:48,940
Mazing.

127
00:07:48,940 --> 00:07:53,590
So now we have five buttons and that's exactly how many we need.

128
00:07:53,590 --> 00:07:55,120
That's perfect.

129
00:07:55,180 --> 00:08:00,250
But now we need to think how are we going to get from this view controller to this view controller.

130
00:08:00,550 --> 00:08:04,120
And what we could do is we could add a button and we could set up a Segway.

131
00:08:04,120 --> 00:08:07,930
So when you tap on the button this view controller would be presented Motegi.

132
00:08:08,170 --> 00:08:12,550
And then we could set it so that when you tap on the button it's dismissed and the data is passed back.

133
00:08:12,550 --> 00:08:14,860
That's just one way we could do it.

134
00:08:14,860 --> 00:08:19,150
But what I'm going to do is I'm going to select this view controller and I'm actually going to go up

135
00:08:19,150 --> 00:08:23,690
to editor embed in and select navigation controller.

136
00:08:24,010 --> 00:08:24,700
OK.

137
00:08:25,000 --> 00:08:30,450
Now what that does is it basically creates a navigation controller just like you would expect.

138
00:08:30,640 --> 00:08:31,300
OK.

139
00:08:31,360 --> 00:08:36,780
And the navigation controller is going to be in charge of controlling navigation.

140
00:08:36,790 --> 00:08:38,980
OK that's pretty simple.

141
00:08:38,980 --> 00:08:42,640
You have seen apps with navigation controllers for sure.

142
00:08:42,640 --> 00:08:43,960
They have a bar at the top.

143
00:08:43,960 --> 00:08:45,210
They usually have a title.

144
00:08:45,210 --> 00:08:47,140
They'll have a button or two.

145
00:08:47,350 --> 00:08:50,980
And when you select a button it will slide the next to you controller over.

146
00:08:50,980 --> 00:08:53,800
You'll recognize it when we start using it.

147
00:08:53,800 --> 00:08:58,570
So we're going to do now is we're going to go ahead and give this controller a title and let's call

148
00:08:58,570 --> 00:09:01,080
this color magic.

149
00:09:01,500 --> 00:09:02,730
OK that's easy.

150
00:09:03,010 --> 00:09:06,310
And then what we're going to do is we're going to add a bar button item.

151
00:09:06,380 --> 00:09:11,020
OK so when I drag this on watch what happens do you see how it kind of illuminates there.

152
00:09:11,170 --> 00:09:17,830
If I drop this we can change this to be of type add K that's super simple but I don't want it to be

153
00:09:17,830 --> 00:09:22,710
this blue color so I'm going to change the tint to match our dark gray.

154
00:09:22,780 --> 00:09:23,360
OK.

155
00:09:23,680 --> 00:09:28,070
And it looks like maybe that's not quite working exactly how I thought it would.

156
00:09:28,450 --> 00:09:34,450
So let's go ahead and let's just set this to be default and then let's change the tent of the entire

157
00:09:35,230 --> 00:09:36,450
bar here.

158
00:09:36,460 --> 00:09:41,120
I think that might help us we'll change the title color to dark gray.

159
00:09:41,470 --> 00:09:43,550
And let's go ahead and let's change.

160
00:09:43,630 --> 00:09:47,050
Well you know what if I change the bartend that will change the whole bar.

161
00:09:47,050 --> 00:09:51,540
We don't want that but we do want the tent on the tent.

162
00:09:51,550 --> 00:09:52,540
There we go.

163
00:09:52,540 --> 00:09:53,320
Forgot about that.

164
00:09:53,320 --> 00:09:58,060
So if we set the tent you'll notice in a second that this will update.

165
00:09:58,060 --> 00:10:02,940
And now if you look at it it has a nice dark gray tint very very cool.

166
00:10:02,950 --> 00:10:09,070
So now the easiest part about this application is actually how we're going to transfer the data from

167
00:10:09,070 --> 00:10:16,120
you control the view controller and to do that or I guess the easiest part is to create the segue to

168
00:10:16,150 --> 00:10:17,440
pop up this view controller.

169
00:10:17,440 --> 00:10:18,690
Watch how easy this is.

170
00:10:18,970 --> 00:10:25,540
If I select our plus button here and I right click and drag to this view controller and let go I can

171
00:10:25,540 --> 00:10:31,510
just click show and now there's a segue that's prepared when I tap on this it's going to slide this

172
00:10:31,660 --> 00:10:33,670
controller over and show all my buttons.

173
00:10:33,700 --> 00:10:36,610
Really cool but I don't want this to say color magic.

174
00:10:36,610 --> 00:10:41,800
So what I'm going to do is I'm going to select the navigation bar select color magic for back button

175
00:10:41,860 --> 00:10:43,750
and I'm just going to type back.

176
00:10:43,990 --> 00:10:44,700
OK.

177
00:10:45,070 --> 00:10:50,200
Now that will show as soon as I push this button it will slide over and I can tap back to go back in

178
00:10:50,200 --> 00:10:54,830
time which is pretty cool or not back in time but I guess back in space which is pretty neat.

179
00:10:54,830 --> 00:11:00,640
So now let's go ahead and let's test this to see how we did let's build this to a simulator and let's

180
00:11:00,640 --> 00:11:06,640
just make sure everything looks nice and as soon as it's running then we can start diving into Iby actions

181
00:11:06,640 --> 00:11:10,470
and Iby outlets very easily.

182
00:11:10,510 --> 00:11:12,500
So let's take a look how did we do

183
00:11:15,280 --> 00:11:20,140
OK there's our view controller that looks good when I click on this button watch what happens.

184
00:11:20,140 --> 00:11:26,080
We get our little navigation to popovers slides over if I press back it goes back.

185
00:11:26,080 --> 00:11:26,870
That's so easy.

186
00:11:26,890 --> 00:11:28,520
And that's just built in from Iowa.

187
00:11:28,540 --> 00:11:30,940
Thanks to the navigation controller.

188
00:11:30,970 --> 00:11:32,840
Really really cool stuff.

189
00:11:32,860 --> 00:11:41,980
So let's go ahead and let's go back to our project here and let's think we have a view controller file

190
00:11:41,980 --> 00:11:42,670
here.

191
00:11:42,790 --> 00:11:50,410
And you know what I'm actually going to name this color presenter Visi and we need to rename the class

192
00:11:50,410 --> 00:11:55,860
here color presenter Visi because remember this.

193
00:11:55,980 --> 00:12:01,420
This class is going to be going with the screen that presents the color at the end.

194
00:12:01,420 --> 00:12:07,090
Now of course if I go in here and select the identity it's still looking for that old file so let's

195
00:12:07,300 --> 00:12:10,720
change it to color presenter AVC press enter.

196
00:12:10,720 --> 00:12:14,590
And now we're going to go ahead and create a new code file for the button visi.

197
00:12:14,590 --> 00:12:21,820
So right click new file and we're going to create a Cocco touch class and it's already a subclass of

198
00:12:21,820 --> 00:12:22,720
UI view controller.

199
00:12:22,720 --> 00:12:29,140
But this is going to be color picker Visi because that's where we pick the color on these buttons so

200
00:12:29,260 --> 00:12:30,500
press next.

201
00:12:30,730 --> 00:12:37,870
And go ahead and click create super cool and we can actually get rid of did receive memory warning as

202
00:12:37,870 --> 00:12:40,670
well as this commented out navigation stuff.

203
00:12:40,670 --> 00:12:44,230
We're not going to need it but yeah just leave it like this.

204
00:12:44,260 --> 00:12:48,930
And now we can go back to main story board and set the identity of our color picker visi.

205
00:12:49,210 --> 00:12:56,110
So select it go to the identity in the identity inspector and this is going to be color picker Visi

206
00:12:56,860 --> 00:13:02,340
press enter and now it has exactly what we need which is really cool.

207
00:13:02,380 --> 00:13:05,770
So let's think about what we need to do here.

208
00:13:06,040 --> 00:13:10,000
We have a button that can automatically load this color picker visi.

209
00:13:10,150 --> 00:13:16,000
The only thing that we need to change is what this label says because remember when we select a color

210
00:13:16,000 --> 00:13:18,710
we need to update this label with that colors name.

211
00:13:18,910 --> 00:13:21,370
So let's go ahead and let's open the assistant editor.

212
00:13:21,820 --> 00:13:28,380
Let's go to color presenter AVC and we're going to go ahead and mix some more room here.

213
00:13:28,390 --> 00:13:34,540
We're going to go ahead and make some make an outlet for our label so select that label right click

214
00:13:34,540 --> 00:13:42,360
and drag and we're going to call this color name label and go ahead and connect it just like that.

215
00:13:42,490 --> 00:13:43,720
Super easy.

216
00:13:43,960 --> 00:13:45,040
And you know what while we're here.

217
00:13:45,040 --> 00:13:46,600
Get rid of did receive memory warning.

218
00:13:46,660 --> 00:13:48,430
We don't need it.

219
00:13:48,430 --> 00:13:49,350
And cool.

220
00:13:49,450 --> 00:13:53,700
Yeah that's all that we're going to need to do for the outlets on this view controller.

221
00:13:53,740 --> 00:13:59,320
The next thing we need to choose is color picker Visi and we need to create some Iby actions for these

222
00:13:59,320 --> 00:13:59,920
buttons.

223
00:13:59,950 --> 00:14:06,250
But you know it's even easier than creating an action for each button creating one Iby action and using

224
00:14:06,290 --> 00:14:10,510
ascender of type you button to determine which button was pressed.

225
00:14:10,510 --> 00:14:11,790
So we're going to go ahead and do that.

226
00:14:11,800 --> 00:14:13,750
And let me show you just how easy it is.

227
00:14:13,750 --> 00:14:20,520
Go ahead and type at IAB action phunk button will be more specific.

228
00:14:20,520 --> 00:14:26,320
Color button was pressed and the cool thing.

229
00:14:26,320 --> 00:14:31,680
What we can do here is we can type sender UI button.

230
00:14:31,780 --> 00:14:33,550
That's not a UI button.

231
00:14:33,550 --> 00:14:35,660
That's also not a hide button.

232
00:14:35,680 --> 00:14:36,100
There we go.

233
00:14:36,130 --> 00:14:36,730
OK.

234
00:14:36,910 --> 00:14:43,060
So the sender is of type UI button and the coolest thing is that because of that we're going to be able

235
00:14:43,060 --> 00:14:50,680
to access this Button's background color and this Button's title label because if we tap on this button

236
00:14:50,860 --> 00:14:55,350
it's going to pass in this Button's values through the sender which is just so cool.

237
00:14:55,360 --> 00:14:59,780
So like I said we can go ahead and we can drop this on the green button.

238
00:15:00,130 --> 00:15:02,290
We can do it again on the yellow button.

239
00:15:02,620 --> 00:15:06,880
We can do it again on the blue button and I'm sure you're noticing as I'm selecting this all three buttons

240
00:15:06,880 --> 00:15:10,360
are selected they're red and purple.

241
00:15:10,360 --> 00:15:14,160
So now we have one shared Iby action for any of these buttons.

242
00:15:14,230 --> 00:15:16,720
If I select one it's going to pass in the ballot.

243
00:15:16,720 --> 00:15:20,320
The buttons value through the sender which is really neat.

244
00:15:20,620 --> 00:15:27,820
So just for an example we're going to go ahead and just print sender which is of type you I button let's

245
00:15:27,820 --> 00:15:31,630
do sender dot title label dot text.

246
00:15:31,860 --> 00:15:33,790
We're going to just print it out to see what it says.

247
00:15:33,790 --> 00:15:38,050
So let's go ahead and let's BuildOn run let's go test it and then I think we're going to be good to

248
00:15:38,050 --> 00:15:43,930
go to the next video where we'll actually start using our protocols and actually building out the code

249
00:15:43,930 --> 00:15:45,200
side which is really neat.

250
00:15:45,220 --> 00:15:50,230
So click on the plus button and when I select one of these buttons watch what happens in the console.

251
00:15:50,490 --> 00:15:54,640
It says green yellow red blue purple.

252
00:15:54,640 --> 00:15:59,680
So we're able to use one Iby action to access all of those buttons at the same time which is really

253
00:15:59,680 --> 00:16:00,560
neat.

254
00:16:00,580 --> 00:16:03,940
So that is that our UI is now done.

255
00:16:03,970 --> 00:16:06,940
And in the next video we're going to start creating a protocol.

256
00:16:07,120 --> 00:16:12,640
We're going to use the delegate method to transfer data from one view controller to the next.

257
00:16:12,630 --> 00:16:16,640
It's one really incredible way that protocols can be helpful in Iowa development.

258
00:16:16,640 --> 00:16:19,680
So let's head over to the next video and I'll see there.