1 00:00:07,770 --> 00:00:10,790 Hey everybody what's going on this is Caleb with slopes dot com. 2 00:00:10,810 --> 00:00:15,610 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,610 --> 00:00:18,100 application called Color wizard. 4 00:00:18,160 --> 00:00:20,710 And I want to show you what it's like really quickly. 5 00:00:20,710 --> 00:00:26,350 It's a super simple app but we're going to use protocols to delegate the passing of information between 6 00:00:26,350 --> 00:00:28,870 View controllers and it's super super cool. 7 00:00:28,870 --> 00:00:30,400 Let me show you really quick. 8 00:00:30,400 --> 00:00:33,660 So we're going to pull it open and it says here color presenter. 9 00:00:33,670 --> 00:00:40,600 Gray is boring to color so I can click the plus button and I can choose a color green yellow blue red 10 00:00:40,630 --> 00:00:41,650 or purple. 11 00:00:41,770 --> 00:00:47,950 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,950 --> 00:00:49,970 background color for the view. 13 00:00:50,050 --> 00:00:54,490 We also passed the name of the color so that's how this application is going to work. 14 00:00:54,490 --> 00:00:59,150 It's pretty simple to build and so we're going to go ahead and get started right now. 15 00:00:59,350 --> 00:01:04,270 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,270 --> 00:01:09,810 to click Create new X code project and I'm going to pull this over here to the proper window. 17 00:01:10,130 --> 00:01:12,900 And this is going to be a single view application. 18 00:01:12,910 --> 00:01:14,970 So go ahead and click that. 19 00:01:15,070 --> 00:01:16,300 That looks great. 20 00:01:16,300 --> 00:01:20,920 And for the product name I'm just going to call it color magic. 21 00:01:21,640 --> 00:01:23,830 OK go ahead and click next. 22 00:01:24,250 --> 00:01:25,840 And we're going to save this. 23 00:01:25,840 --> 00:01:29,370 Let's see where should we save this. 24 00:01:29,370 --> 00:01:33,710 How about in the protocols and delegates folder that only makes sense. 25 00:01:34,000 --> 00:01:38,360 And now we're going to go ahead and pull that open full screen. 26 00:01:38,590 --> 00:01:39,730 And here's what we're going to do. 27 00:01:39,730 --> 00:01:41,700 We're going to build the UI first. 28 00:01:41,800 --> 00:01:42,220 OK. 29 00:01:42,340 --> 00:01:46,570 So go into main storyboard and just like that. 30 00:01:46,600 --> 00:01:50,410 We're going to go ahead and start building out this user interface. 31 00:01:50,410 --> 00:01:54,420 So this screen is actually pretty simple. 32 00:01:54,430 --> 00:01:57,910 There's just going to be a single label in the center that says Gray is boring. 33 00:01:57,910 --> 00:02:01,440 Choose a color but we do need to set the background color. 34 00:02:01,450 --> 00:02:07,160 So go ahead and click and we're going to set it to be this dark gray color which if you're interested. 35 00:02:07,510 --> 00:02:09,640 That is whip's. 36 00:02:10,040 --> 00:02:11,710 I don't know why that is not full screen. 37 00:02:11,980 --> 00:02:16,930 That color is for a for a for a k if you want to use that same dark gray that I am. 38 00:02:16,930 --> 00:02:18,490 It's up to you. 39 00:02:18,490 --> 00:02:21,490 And next we're going to go ahead and add AUI label. 40 00:02:21,850 --> 00:02:28,510 OK so drag one on there center it make it look pretty and we're going to drag it so that it can fit 41 00:02:28,510 --> 00:02:30,280 nicely right here. 42 00:02:30,310 --> 00:02:37,120 Make it a little taller and we're going to make it so that it is two lines so we can have two lines 43 00:02:37,120 --> 00:02:37,920 of text. 44 00:02:38,260 --> 00:02:42,950 And just like I said it's going to say Gray is boring. 45 00:02:43,150 --> 00:02:45,970 Choose a color. 46 00:02:46,230 --> 00:02:46,990 OK. 47 00:02:47,290 --> 00:02:53,380 Now we're going to center this and I think we should also change the font from system to custom and 48 00:02:53,380 --> 00:02:55,580 change the family to Avenir next. 49 00:02:55,660 --> 00:02:57,060 It's my favorite font. 50 00:02:57,610 --> 00:03:03,460 Then we're going to select Demi bold and I'm going to bump this up to maybe 24 and you can already see 51 00:03:04,090 --> 00:03:07,990 it's starting to go onto the second line which is exactly what we want. 52 00:03:08,430 --> 00:03:08,680 OK. 53 00:03:08,680 --> 00:03:13,590 Click next and change the font color to be white like so. 54 00:03:13,870 --> 00:03:19,690 And then what we're going to do is we're going to go ahead and pin this horizontally and vertically 55 00:03:19,690 --> 00:03:22,190 in the container so that it stays right in the center. 56 00:03:22,250 --> 00:03:29,380 So click on the align button and select horizontally and vertically in a container and add two constraints. 57 00:03:29,380 --> 00:03:32,290 Now of course you can see that there are some problems here. 58 00:03:32,320 --> 00:03:36,670 It's not on two lines sort of fixed that we're going to just kind of eyeball with. 59 00:03:36,730 --> 00:03:40,460 And let's just say maybe 150 press enter. 60 00:03:40,700 --> 00:03:42,510 OK obviously that's too small. 61 00:03:42,580 --> 00:03:48,440 So we need to modify it by selecting the label and changing the width maybe to 200. 62 00:03:48,460 --> 00:03:49,410 There we go. 63 00:03:49,410 --> 00:03:50,290 Gray is boring. 64 00:03:50,290 --> 00:03:51,180 Choose a color. 65 00:03:51,430 --> 00:03:58,190 So next what we're going to do is we are going to go ahead and drag on a new UI View Controller. 66 00:03:58,210 --> 00:04:03,460 So go ahead and type UI view and the controller is going to be the top result there. 67 00:04:03,520 --> 00:04:06,000 Drag it on and let it go. 68 00:04:06,430 --> 00:04:10,690 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 69 00:04:10,690 --> 00:04:17,100 inside of a stacked view and keep a stack view is going to allow us to basically equally space all five 70 00:04:17,110 --> 00:04:19,250 buttons really easily. 71 00:04:19,450 --> 00:04:25,960 So go ahead and search for a button which is the same thing as a UI button as you probably know and 72 00:04:25,960 --> 00:04:28,230 drag one on just like that. 73 00:04:28,270 --> 00:04:31,800 And I'm going to just go and copy and paste it five times. 74 00:04:31,810 --> 00:04:35,570 One two three four five. 75 00:04:36,100 --> 00:04:41,410 And with all these done we can go ahead and select all of them and then click the stack button right 76 00:04:41,410 --> 00:04:42,560 here at the bottom. 77 00:04:42,850 --> 00:04:44,170 And now it's in the stack view. 78 00:04:44,170 --> 00:04:47,590 They're evenly spaced and yeah it's really cool. 79 00:04:47,590 --> 00:04:50,810 So let's go ahead let's actually make this stack. 80 00:04:50,830 --> 00:04:57,100 You take up the entire width of the screen by clicking on the penmen menu or pin button I guess and 81 00:04:57,100 --> 00:05:05,380 setting all of the constraints here to be 0 0 0 and 0 press enter and you'll see that it stretches out. 82 00:05:05,410 --> 00:05:08,730 The only problem is that we are not yet equally spaced. 83 00:05:08,740 --> 00:05:09,470 OK. 84 00:05:09,610 --> 00:05:14,880 If you look in the attributes inspector you'll notice that the distribution is just set to fill. 85 00:05:14,890 --> 00:05:20,460 This is just kind of saying hey take up this space but we need to tell it to fill equally. 86 00:05:20,650 --> 00:05:26,460 And as you can see the buttons automatically will scale to be of equal size. 87 00:05:26,500 --> 00:05:26,920 Cool. 88 00:05:26,920 --> 00:05:32,590 So let's go ahead let's set up our buttons now to have the proper colors in the background as well as 89 00:05:32,590 --> 00:05:33,630 their label. 90 00:05:33,640 --> 00:05:37,210 So this one we're going to scroll down and choose. 91 00:05:37,210 --> 00:05:41,630 It's background color which you know what I'm going to open up my colors here. 92 00:05:41,890 --> 00:05:46,190 And I think let's go ahead and find a nice green color. 93 00:05:47,200 --> 00:05:50,400 And I don't really like any of those. 94 00:05:50,470 --> 00:05:54,270 Maybe I have one in that I've saved already. 95 00:05:54,760 --> 00:05:56,200 That looks much better. 96 00:05:56,500 --> 00:05:59,810 Ok if you want this color just by the way it's 6 D. 97 00:05:59,830 --> 00:06:04,600 B c 63 and you can use that it's totally fine. 98 00:06:04,990 --> 00:06:12,530 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. 99 00:06:12,620 --> 00:06:17,050 Let's do 24 and then we're going to actually change the fonts will have to change the size in just a 100 00:06:17,050 --> 00:06:17,840 second. 101 00:06:18,100 --> 00:06:23,170 Do Avenir next and do Demy bold and make it a size 24. 102 00:06:23,680 --> 00:06:24,330 OK. 103 00:06:24,610 --> 00:06:25,630 Very cool. 104 00:06:25,630 --> 00:06:31,360 Now you know what I'm noticing that these buttons they don't have the right text property for the font 105 00:06:31,510 --> 00:06:34,890 or the size so I'm going to actually get rid of those and then watch what happens. 106 00:06:34,900 --> 00:06:39,880 I can just duplicate these and they'll automatically fill in exactly what I needed them to be like. 107 00:06:39,880 --> 00:06:41,910 So that's just a nice little hack. 108 00:06:42,490 --> 00:06:47,490 All right so with all this all five buttons in place now I can start changing the colors again. 109 00:06:47,500 --> 00:06:49,470 So let's choose a nice yellow. 110 00:06:49,470 --> 00:06:51,430 There we go for this one. 111 00:06:51,430 --> 00:06:53,370 Let's do a nice blue. 112 00:06:54,100 --> 00:06:55,390 That's a little too intense. 113 00:06:55,390 --> 00:06:57,160 How about this one. 114 00:06:57,160 --> 00:06:59,320 That's better for this one. 115 00:06:59,320 --> 00:07:00,740 Let's do a red color. 116 00:07:00,760 --> 00:07:02,250 I think I have one saved here. 117 00:07:02,360 --> 00:07:02,980 Yup. 118 00:07:03,310 --> 00:07:05,530 Oh by the way guys I'm not really telling you what these colors are. 119 00:07:05,520 --> 00:07:06,140 Am I. 120 00:07:06,370 --> 00:07:09,870 The yellow is a 9 4 4. 121 00:07:09,910 --> 00:07:12,860 The blue is 4 7 8. 122 00:07:14,050 --> 00:07:22,170 The red is d 2 5 0 for E and the bottom one we're going to do a nice purple color like so. 123 00:07:22,540 --> 00:07:27,600 And this purple if you're interested is 8 6 8 7 B-D. 124 00:07:27,700 --> 00:07:32,800 So this is great but the only thing we need to do now is to set each of these buttons labels to match 125 00:07:32,800 --> 00:07:34,710 the color that's reflected in the background. 126 00:07:34,870 --> 00:07:38,000 So go ahead and click on green and type Green. 127 00:07:38,020 --> 00:07:40,420 Go ahead and click on yellow and type yellow. 128 00:07:40,420 --> 00:07:48,290 You guys know the drill blue red and purple. 129 00:07:48,520 --> 00:07:49,000 Amazing. 130 00:07:49,000 --> 00:07:53,650 So now we have five buttons and that's exactly how many we need. 131 00:07:53,650 --> 00:07:55,170 That's perfect. 132 00:07:55,240 --> 00:08:00,970 But now we need to think how are we going to get from this view controller to this view controller and 133 00:08:01,000 --> 00:08:04,180 what we could do is we could add a button and we could set up a segue. 134 00:08:04,180 --> 00:08:07,980 So when you tap on the button this view controller would be presented Motegi. 135 00:08:08,230 --> 00:08:12,610 And then we could set it so that when you tap on the button it's dismissed and the data is passed back. 136 00:08:12,610 --> 00:08:14,880 That's just one way we could do it. 137 00:08:14,920 --> 00:08:19,210 But what I'm going to do is I'm going to select this view controller and I'm actually going to go up 138 00:08:19,210 --> 00:08:23,740 to editor embed in and select navigation controller. 139 00:08:24,070 --> 00:08:24,750 OK. 140 00:08:25,060 --> 00:08:30,510 Now what that does is it basically creates a navigation controller just like you would expect. 141 00:08:30,710 --> 00:08:31,400 OK. 142 00:08:31,420 --> 00:08:36,900 And the navigation controller is going to be in charge of controlling navigation. 143 00:08:36,910 --> 00:08:39,010 OK that's pretty simple. 144 00:08:39,040 --> 00:08:42,700 You have seen apps with navigation controllers for sure. 145 00:08:42,700 --> 00:08:44,020 They have a bar at the top. 146 00:08:44,020 --> 00:08:45,270 They usually have a title. 147 00:08:45,270 --> 00:08:47,130 They'll have a button or two. 148 00:08:47,410 --> 00:08:51,030 And when you select a button it will slide the next view controller over. 149 00:08:51,040 --> 00:08:53,640 You'll recognize that when we start using it. 150 00:08:53,860 --> 00:08:58,630 So we're going to do now is we're going to go ahead and give this controller a title and let's call 151 00:08:58,630 --> 00:09:01,340 this color magic. 152 00:09:01,840 --> 00:09:02,820 That's easy. 153 00:09:03,070 --> 00:09:06,370 And then what we're going to do is we're going to add a bar button item. 154 00:09:06,430 --> 00:09:10,820 OK so when I drag this on watch what happens do you see how it kind of illuminates there. 155 00:09:11,200 --> 00:09:17,890 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 156 00:09:17,890 --> 00:09:22,810 this blue color so I'm going to change the tint to match our dark gray. 157 00:09:22,810 --> 00:09:23,410 OK. 158 00:09:23,740 --> 00:09:28,140 And it looks like maybe that's not quite working exactly how I thought it would. 159 00:09:28,500 --> 00:09:34,510 So let's go ahead and let's just set this to be default and then let's change the tent of the entire 160 00:09:35,290 --> 00:09:36,510 bar here. 161 00:09:36,520 --> 00:09:40,970 I think that might help us we'll change the title color to dark gray. 162 00:09:41,530 --> 00:09:43,620 And let's go ahead and let's change. 163 00:09:43,690 --> 00:09:45,500 Well you know what if I change the bartend. 164 00:09:45,600 --> 00:09:47,110 Yeah that'll change the whole bar. 165 00:09:47,110 --> 00:09:48,130 We don't want that. 166 00:09:48,640 --> 00:09:51,610 But we do want the tent on the tent. 167 00:09:51,610 --> 00:09:52,630 There we go. 168 00:09:52,630 --> 00:09:53,380 Forgot about that. 169 00:09:53,380 --> 00:09:58,110 So if we set the tent you'll notice in a second that this will update. 170 00:09:58,120 --> 00:10:02,990 And now if you look at it it has a nice dark gray tent very very cool. 171 00:10:03,020 --> 00:10:09,130 So now the easiest part about this application is actually how we're going to transfer the data from 172 00:10:09,130 --> 00:10:16,180 you control the view controller and to do that or I guess the easiest part is to create the segue to 173 00:10:16,210 --> 00:10:17,500 pop up this controller. 174 00:10:17,500 --> 00:10:18,760 Watch how easy this is. 175 00:10:19,030 --> 00:10:25,600 If I select our plus button here and I right click and drag to this view controller and let go I can 176 00:10:25,600 --> 00:10:31,590 just click show and now there's a segue that's prepared when I tap on this it's going to slide this 177 00:10:31,720 --> 00:10:33,730 controller over and show all my buttons. 178 00:10:33,760 --> 00:10:36,670 Really cool but I don't want this to say color magic. 179 00:10:36,670 --> 00:10:41,860 So what I'm going to do is I'm going to select the navigation bar select color magic for back button 180 00:10:41,920 --> 00:10:43,800 and I'm just going to type back. 181 00:10:44,050 --> 00:10:44,760 OK. 182 00:10:45,130 --> 00:10:50,260 Now that will show as soon as I push this button it will slide over and I can tap back to go back in 183 00:10:50,260 --> 00:10:54,880 time which is pretty cool or not back in time but I guess back in space which is pretty neat. 184 00:10:54,880 --> 00:11:00,700 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 185 00:11:00,700 --> 00:11:06,700 just make sure everything looks nice and as soon as it's running then we can start diving into Iby actions 186 00:11:06,700 --> 00:11:10,530 and Iby outlet's very easily. 187 00:11:10,570 --> 00:11:12,780 So let's take a look how did we do. 188 00:11:15,310 --> 00:11:20,130 OK there's our view controller that looks good when I click on this button watch what happens. 189 00:11:20,200 --> 00:11:26,000 We get our little navigation to popovers slides over if I press back it goes back. 190 00:11:26,140 --> 00:11:26,950 That's so easy. 191 00:11:26,950 --> 00:11:28,570 And that's just built in from Iowa. 192 00:11:28,600 --> 00:11:31,000 Thanks to the navigation controller. 193 00:11:31,030 --> 00:11:32,900 Really really cool stuff. 194 00:11:32,920 --> 00:11:42,040 So let's go ahead and let's go back to our project here and let's think we have a view controller file 195 00:11:42,040 --> 00:11:42,730 here. 196 00:11:42,850 --> 00:11:50,470 And you know what I'm actually going to name this color presenter Visi and we need to rename the class 197 00:11:50,470 --> 00:11:55,930 here color presenter Visi because remember this. 198 00:11:56,040 --> 00:12:01,480 This class is going to be going with the screen that presents the color at the end. 199 00:12:01,480 --> 00:12:06,700 Now of course if I go in here and select the identity it's still looking for that old file. 200 00:12:06,700 --> 00:12:10,700 So let's change it to color presenter AVC press enter. 201 00:12:10,780 --> 00:12:14,460 And now we're going to go ahead and create a new code file for the button visi. 202 00:12:14,650 --> 00:12:21,880 So right click new file and we're going to create a cocoa touch class and it's already a subclass of 203 00:12:22,120 --> 00:12:22,780 view controller. 204 00:12:22,780 --> 00:12:29,200 But this is going to be color picker Visi because that's where we pick the color on these buttons so 205 00:12:29,320 --> 00:12:30,570 press next. 206 00:12:30,790 --> 00:12:37,930 And go ahead and click Create supercool and we can actually get rid of did receive memory warning as 207 00:12:37,930 --> 00:12:40,680 well as this commented out navigation stuff. 208 00:12:40,720 --> 00:12:42,050 We're not going to need it. 209 00:12:42,400 --> 00:12:44,280 But yeah just leave it like this. 210 00:12:44,320 --> 00:12:48,870 And now we can go back to main storyboard and set the identity of our color picker visi. 211 00:12:49,270 --> 00:12:56,170 So select it go to the identity and the identity inspector and this is going to be color picker AVC 212 00:12:56,920 --> 00:13:02,440 press enter and now it has exactly what we need which is really cool. 213 00:13:02,440 --> 00:13:05,920 So let's think about what we need to do here. 214 00:13:06,100 --> 00:13:10,070 We have a button that can automatically load this color picker visi. 215 00:13:10,210 --> 00:13:16,060 The only thing that we need to change is what this label says because remember when we select a color 216 00:13:16,060 --> 00:13:18,740 we need to update this label with that colors name. 217 00:13:18,940 --> 00:13:21,520 So let's go ahead and let's open the assistant editor. 218 00:13:21,880 --> 00:13:28,440 Let's go to color presenter AVC and we're going to go ahead and mix some more room here. 219 00:13:28,450 --> 00:13:34,600 We're going to go ahead and make some make an outlet for our label so select that label right click 220 00:13:34,600 --> 00:13:42,370 and drag and we're going to call this color name label and go ahead and connect it just like that. 221 00:13:42,520 --> 00:13:43,540 Super easy. 222 00:13:43,990 --> 00:13:45,100 And you know what while we're here. 223 00:13:45,100 --> 00:13:46,630 Get rid of did receive memory warning. 224 00:13:46,720 --> 00:13:48,330 We don't need it. 225 00:13:48,490 --> 00:13:49,430 And cool. 226 00:13:49,510 --> 00:13:53,760 Yeah that's all that we're going to need to do for the outlets on this new controller. 227 00:13:53,800 --> 00:13:59,380 The next thing we need to choose is color picker Visi and we need to create some Iby actions for these 228 00:13:59,380 --> 00:14:00,010 buttons. 229 00:14:00,010 --> 00:14:06,310 But you know it's even easier than creating an action for each button creating one Iby action and using 230 00:14:06,360 --> 00:14:10,570 ascender of type you eye button to determine which button was pressed. 231 00:14:10,570 --> 00:14:11,860 So we're going to go ahead and do that. 232 00:14:11,860 --> 00:14:13,810 And let me show you just how easy it is. 233 00:14:13,810 --> 00:14:20,590 Go ahead and type at Iby action phunk button will be more specific. 234 00:14:20,590 --> 00:14:26,380 Color button was pressed and the cool thing. 235 00:14:26,380 --> 00:14:31,700 What we can do here is we can type sender UI button. 236 00:14:31,840 --> 00:14:33,070 That's not a UI button. 237 00:14:33,610 --> 00:14:35,720 That's also not a hide button. 238 00:14:35,740 --> 00:14:36,190 There we go. 239 00:14:36,190 --> 00:14:36,760 OK. 240 00:14:36,970 --> 00:14:43,120 So the sender is of type UI button and the coolest thing is that because of that we're going to be able 241 00:14:43,120 --> 00:14:50,740 to access this Button's background color and this Button's title label because if we tap on this button 242 00:14:50,920 --> 00:14:55,410 it's going to pass in this Button's values through the sender which is just so cool. 243 00:14:55,420 --> 00:14:59,680 So like I said we can go ahead and we can drop this on the green button. 244 00:15:00,190 --> 00:15:02,350 We can do it again on the yellow button. 245 00:15:02,680 --> 00:15:06,910 We can do it again on the blue button and I'm sure you're noticing as I'm selecting this all three buttons 246 00:15:06,910 --> 00:15:10,420 are selected they're red and purple. 247 00:15:10,420 --> 00:15:14,290 So now we have one shared Iby action for any of these buttons. 248 00:15:14,290 --> 00:15:16,750 If I select one it's going to pass in the ballot. 249 00:15:16,780 --> 00:15:20,680 The buttons value through the sender which is really neat. 250 00:15:20,680 --> 00:15:27,880 So just for an example we're going to go ahead and just print sender which is of type you I button let's 251 00:15:27,880 --> 00:15:33,820 do sender dot title label dot text and we're going to just print it out to see what it says. 252 00:15:33,820 --> 00:15:36,870 So let's go ahead and let's BuildOn run let's go test it. 253 00:15:36,880 --> 00:15:40,930 And then I think we're going to be good to go to the next video where we'll actually start using our 254 00:15:40,930 --> 00:15:45,260 protocols and actually building out the code side which is really neat. 255 00:15:45,280 --> 00:15:50,560 So click on the plus button and when I select one of these buttons watch what happens in the console. 256 00:15:50,560 --> 00:15:54,610 It says green yellow red blue purple. 257 00:15:54,700 --> 00:15:59,740 So we're able to use one Iby action to access all of those buttons at the same time which is really 258 00:15:59,740 --> 00:16:00,620 neat. 259 00:16:00,640 --> 00:16:04,000 So that is that our UI is now done. 260 00:16:04,030 --> 00:16:07,000 And in the next video we're going to start creating a protocol. 261 00:16:07,180 --> 00:16:12,690 We're going to use the delegate method to transfer data from one view controller to the next. 262 00:16:12,690 --> 00:16:16,700 It's one really incredible way that protocols can be helpful in Iowa development. 263 00:16:16,700 --> 00:16:19,760 So let's head over to the next video and I'll see you there.