1 00:00:08,050 --> 00:00:13,200 Everybody this is Caleb with Debb slopes dot com and in this video we're going to go ahead and build 2 00:00:13,200 --> 00:00:16,050 the new controller that's going to allow us to create groups. 3 00:00:16,050 --> 00:00:21,000 This is one of my favorite features of breakpoint and it's also one of my favorite controllers just 4 00:00:21,000 --> 00:00:22,470 because it's so cool. 5 00:00:22,470 --> 00:00:27,720 We're going to be able to search through all the users in our app by their e-mail and we're going to 6 00:00:27,720 --> 00:00:32,320 automatically filter a table view showing cells we can select them. 7 00:00:32,520 --> 00:00:39,030 They can be checked on checked often and added to just an array of names and you can create a group 8 00:00:39,030 --> 00:00:41,850 with all those people it's really really cool. 9 00:00:41,850 --> 00:00:46,290 Let's start building the interface in this video and then in the next video we're going to start working 10 00:00:46,290 --> 00:00:49,230 on just a little bit more complex and deeper stuff. 11 00:00:49,230 --> 00:00:55,750 But for now let's go ahead and open up our X code project and go to the main story. 12 00:00:56,190 --> 00:00:57,280 Open it up. 13 00:00:57,450 --> 00:00:58,490 Looks pretty good. 14 00:00:58,790 --> 00:00:59,320 OK. 15 00:00:59,370 --> 00:01:05,720 Now we need to add a view controller and we're going to actually add it down here next to groups because 16 00:01:05,730 --> 00:01:08,440 we're going to be working with that. 17 00:01:08,640 --> 00:01:09,740 Very cool. 18 00:01:10,150 --> 00:01:10,940 OK. 19 00:01:10,950 --> 00:01:17,790 So now we're going to go ahead and copy this view pasted into this view controller and drag it to the 20 00:01:17,790 --> 00:01:18,540 top. 21 00:01:18,540 --> 00:01:21,820 Let's give it some pins here. 22 00:01:21,900 --> 00:01:25,890 Top right and bottom sorry left top and right. 23 00:01:25,950 --> 00:01:31,060 Apparently I can't get my left and right correct correctly anyway. 24 00:01:31,170 --> 00:01:33,690 Pin it to the top and the left and the right. 25 00:01:33,990 --> 00:01:35,400 And now that's in place. 26 00:01:35,400 --> 00:01:40,050 We're going to go ahead and change this to say new group. 27 00:01:40,530 --> 00:01:45,750 This button is actually going to be changed to have text instead of an image. 28 00:01:45,750 --> 00:01:51,210 So we're going to get rid of the image and we're going to go ahead and write done in capital letters 29 00:01:51,930 --> 00:01:58,020 and we're going to stretch it out a little ways and we're going to change the width of course to fit. 30 00:01:58,800 --> 00:02:00,720 So let's go ahead and do that. 31 00:02:00,720 --> 00:02:02,520 Let's give it a width of 60. 32 00:02:02,520 --> 00:02:03,900 How about. 33 00:02:03,900 --> 00:02:05,130 And that looks pretty good. 34 00:02:05,320 --> 00:02:11,150 We're going to actually change the font but I'm not going to use Menlove I'm going to use Avenir next. 35 00:02:11,160 --> 00:02:12,550 You know me I love Avenir next. 36 00:02:12,610 --> 00:02:15,370 I can't get through an app without using it at least once. 37 00:02:15,600 --> 00:02:17,510 And let's set it to be bold. 38 00:02:17,610 --> 00:02:18,900 Size 18. 39 00:02:19,230 --> 00:02:23,940 And let's change it to be green that light green color that matches the rest of our font. 40 00:02:23,940 --> 00:02:25,360 Super cool. 41 00:02:25,400 --> 00:02:28,050 Now we're going to add a button. 42 00:02:28,050 --> 00:02:33,570 So go ahead and drag in a button up in the top there and just like always we're going to go ahead and 43 00:02:33,570 --> 00:02:38,610 pennant 30 from the top 20 from the left. 44 00:02:38,610 --> 00:02:48,240 Actually no not 30 from the top 20 from the left and we're going to pin it so that it matches the center 45 00:02:48,240 --> 00:02:53,520 label horizontally so select the button and the label click the alignment tool and give it vertical 46 00:02:53,520 --> 00:02:54,670 centers. 47 00:02:54,720 --> 00:02:55,900 Very cool. 48 00:02:55,900 --> 00:03:04,050 Now we can go ahead and we can remove the label from this button like so and we can set this to be cancel 49 00:03:04,050 --> 00:03:05,160 or close button. 50 00:03:05,310 --> 00:03:05,750 OK. 51 00:03:05,970 --> 00:03:09,750 That's going to allow us to pop down this view controller just in case we change our mind and don't 52 00:03:09,750 --> 00:03:11,760 want to actually create a group. 53 00:03:11,760 --> 00:03:12,250 All right. 54 00:03:12,330 --> 00:03:13,730 Very cool let's move on. 55 00:03:13,980 --> 00:03:16,720 So next go ahead and select the white view. 56 00:03:16,860 --> 00:03:20,360 And we're going to change the background color to be that light gray. 57 00:03:20,540 --> 00:03:23,690 OK compared to the duck or they're both kind of dark but this is lighter. 58 00:03:23,700 --> 00:03:30,150 Next we're going to add some labels here we're going to give a label for the title a label for the description 59 00:03:30,480 --> 00:03:34,320 and then also a label to cue people to add some friends to their group. 60 00:03:34,350 --> 00:03:39,150 So let's go ahead and we're going to actually use a stack of you here for this but let's just start 61 00:03:39,150 --> 00:03:44,740 by piling on some labels and I'm going to just copy and paste them just duplicate them that's fine. 62 00:03:44,850 --> 00:03:46,330 Duplicated again. 63 00:03:46,500 --> 00:03:49,660 And we're going to need only three. 64 00:03:50,040 --> 00:03:51,240 OK that's pretty good. 65 00:03:51,540 --> 00:03:59,110 We're going to need some text fields for typing the title so called textfield and drag one on. 66 00:03:59,550 --> 00:04:01,310 That's for the title. 67 00:04:01,320 --> 00:04:02,630 Copy and Paste. 68 00:04:02,810 --> 00:04:04,310 That's for the description. 69 00:04:04,740 --> 00:04:05,970 And paste it once more. 70 00:04:05,970 --> 00:04:07,460 That's for the label. 71 00:04:07,590 --> 00:04:14,400 OK very cool or sorry for the members of the group so I'm going to edit this and I'm going to say Title 72 00:04:15,310 --> 00:04:18,920 going to edit this to say description. 73 00:04:19,170 --> 00:04:23,870 Whoops I didn't spell that right this description. 74 00:04:24,120 --> 00:04:29,500 And this one I'm going to say add people to your group. 75 00:04:30,170 --> 00:04:35,190 That's also not quite wide enough so let's make it a little bit wider. 76 00:04:35,530 --> 00:04:41,130 And all three of these I'm going to want to center OK so that they are center oriented. 77 00:04:41,130 --> 00:04:45,100 And now we can actually go ahead and put these into a stacked view. 78 00:04:45,930 --> 00:04:46,490 Oh not yet. 79 00:04:46,500 --> 00:04:49,110 Sorry we need to add a table view as well. 80 00:04:51,240 --> 00:04:53,880 OK and that's going to be a little table view down at the bottom. 81 00:04:54,010 --> 00:04:59,410 But now we can select all of these in a row and we can put them into a stacked view by clicking the 82 00:04:59,410 --> 00:05:00,410 stack button. 83 00:05:00,850 --> 00:05:01,460 Very cool. 84 00:05:02,430 --> 00:05:02,950 All righty. 85 00:05:02,970 --> 00:05:04,030 That's good. 86 00:05:04,050 --> 00:05:11,720 So let's go ahead and pin this 20 from the top 20 from the right 20 from the left and 20 from the bottom. 87 00:05:11,730 --> 00:05:15,700 Add four constraints and you'll see that it is added 0. 88 00:05:15,710 --> 00:05:18,450 Although you know what it looks like constrained to margins was on. 89 00:05:18,450 --> 00:05:21,470 So the leading and trailing space can be zero. 90 00:05:21,780 --> 00:05:23,580 So let's change that back. 91 00:05:23,850 --> 00:05:27,890 And now it is 20 from the left right bottom and top. 92 00:05:27,890 --> 00:05:33,510 And now we need to turn off center as far as the alignment goes and change to fill. 93 00:05:33,900 --> 00:05:36,780 Next we need to set fill proportionately. 94 00:05:36,780 --> 00:05:42,330 And now we need to go ahead and set some fixed heights for these because I want them to be a certain 95 00:05:42,330 --> 00:05:45,070 height and I want this also to be a certain hype. 96 00:05:45,090 --> 00:05:50,650 For now let's go ahead and set these to have a fixed height of let's try 40. 97 00:05:50,700 --> 00:05:53,490 Let's see how that looks looks good. 98 00:05:53,490 --> 00:05:58,960 Let's set this one to have a fixed height of 60 I want it to be a little bit taller just because. 99 00:05:59,370 --> 00:06:02,030 And we're going to go into this stack view here. 100 00:06:02,040 --> 00:06:07,540 Select the stack view and I want to give it spacing of 5 between each item. 101 00:06:07,550 --> 00:06:09,000 I think that looks pretty good. 102 00:06:09,420 --> 00:06:15,150 And these are going to need to change so select the labels and we're going to change the font of course 103 00:06:15,150 --> 00:06:17,680 to men low. 104 00:06:18,930 --> 00:06:21,600 Not that Menlo. 105 00:06:21,640 --> 00:06:22,450 There we go. 106 00:06:22,710 --> 00:06:27,750 And the title and description labels are going to be very very small so we're going to lower them maybe 107 00:06:27,750 --> 00:06:31,820 to 8 it's going to take a ticket sweet time here. 108 00:06:34,620 --> 00:06:35,030 To eight. 109 00:06:35,040 --> 00:06:39,900 There we go and we'll change the color to our lovely green color and it will change. 110 00:06:39,900 --> 00:06:45,490 Add people to your group to also be green and let's bump it up to size 18. 111 00:06:45,720 --> 00:06:47,690 You know maybe 16 is better. 112 00:06:48,060 --> 00:06:49,400 Yes 16 is better. 113 00:06:49,500 --> 00:06:55,380 And now we can actually just recycle our inset textfield subclassed so select all three text fields 114 00:06:55,740 --> 00:06:59,690 and we're going to type inset text feel great. 115 00:06:59,700 --> 00:07:07,120 Now let's change the border to square and we'll change the background to dark. 116 00:07:07,170 --> 00:07:08,190 I think that's the right one. 117 00:07:08,310 --> 00:07:15,190 No it's not there we go the right one is to nine to be three four. 118 00:07:15,720 --> 00:07:16,110 All right. 119 00:07:16,110 --> 00:07:17,100 Very very cool. 120 00:07:17,100 --> 00:07:18,280 This looks awesome. 121 00:07:18,450 --> 00:07:26,400 Now we need to set placeholder text so let's go ahead and set the placeholder to say add a title or 122 00:07:26,400 --> 00:07:30,450 maybe give your group a title. 123 00:07:30,900 --> 00:07:31,870 OK. 124 00:07:32,080 --> 00:07:33,170 And I'm going to just copy back. 125 00:07:33,180 --> 00:07:34,830 It's basically the same for here. 126 00:07:34,830 --> 00:07:37,280 Give your group a description. 127 00:07:39,460 --> 00:07:48,260 Description and type e-mail or maybe enter an email. 128 00:07:48,780 --> 00:07:49,690 Yeah that's a little better. 129 00:07:49,690 --> 00:07:50,870 Enter an e-mail. 130 00:07:51,010 --> 00:07:54,390 Follow the lowercase pattern we have been following. 131 00:07:54,430 --> 00:07:56,710 Cool that looks great. 132 00:07:56,800 --> 00:08:00,760 And now we need to drop in a table view you sell to our UI table view. 133 00:08:01,210 --> 00:08:04,320 So drag one on there and let it go. 134 00:08:04,390 --> 00:08:05,770 There we go. 135 00:08:05,770 --> 00:08:06,770 Nice. 136 00:08:06,850 --> 00:08:10,580 Now our table view we want it to match the rest of the theme of the rest of our out. 137 00:08:10,690 --> 00:08:14,370 So set the background to be that dark gray color. 138 00:08:16,150 --> 00:08:17,300 There we go. 139 00:08:17,500 --> 00:08:18,760 And oh you know what. 140 00:08:18,760 --> 00:08:19,450 No that's not right. 141 00:08:19,450 --> 00:08:22,350 We want it to be the light gray so that it matches. 142 00:08:22,350 --> 00:08:26,100 And then the cells themselves will have the dark color. 143 00:08:26,230 --> 00:08:26,730 OK. 144 00:08:26,920 --> 00:08:27,800 That's pretty cool. 145 00:08:28,060 --> 00:08:29,300 So let's BuildOn run. 146 00:08:29,350 --> 00:08:34,090 Let's get this to show up in our simulator and let's take a peek at how we're doing. 147 00:08:35,620 --> 00:08:37,390 Of course it's giving the simulator error. 148 00:08:37,390 --> 00:08:40,500 So let me quit the simulator and restart it. 149 00:08:42,490 --> 00:08:44,530 Here we go up again. 150 00:08:44,590 --> 00:08:46,180 Good old X code beta bugs. 151 00:08:46,180 --> 00:08:47,720 Haha. 152 00:08:47,710 --> 00:08:50,980 Anyway while it's loading here we go. 153 00:08:51,010 --> 00:08:51,370 Beautiful. 154 00:08:51,370 --> 00:08:58,810 So if we go to groups and we should see everything here OK that looks kind of weird. 155 00:08:58,810 --> 00:09:00,000 What's the deal. 156 00:09:02,490 --> 00:09:04,510 OK so it looks like everything is stretching out. 157 00:09:04,530 --> 00:09:14,100 Even though this table view is here the way it's supposed to be you know what let's try changing this 158 00:09:14,100 --> 00:09:18,700 to fill equally not equal fill equally. 159 00:09:19,380 --> 00:09:20,340 Oh definitely not that. 160 00:09:20,340 --> 00:09:20,610 OK. 161 00:09:20,630 --> 00:09:26,080 No equal spacing definitely not equal centering no. 162 00:09:26,370 --> 00:09:32,520 Phil maybe k we don't have enough space between each one. 163 00:09:32,530 --> 00:09:35,780 So let's try to straighten out for size. 164 00:09:36,720 --> 00:09:40,030 K that's definitely too much space. 165 00:09:40,100 --> 00:09:44,540 Let's try five let's just build and run let's see how it looks and if it doesn't look good we can always 166 00:09:44,540 --> 00:09:45,980 change it. 167 00:09:45,980 --> 00:09:51,680 I am noticing though that the background of the table view does not match the cells here so I'm going 168 00:09:51,680 --> 00:09:52,660 to change this. 169 00:09:52,790 --> 00:09:55,810 The background to be the dark color like it's supposed to be. 170 00:09:55,820 --> 00:09:56,520 There we go. 171 00:09:56,740 --> 00:09:57,040 OK. 172 00:09:57,110 --> 00:09:59,110 So let's go into groups let's look. 173 00:09:59,300 --> 00:09:59,720 OK. 174 00:09:59,750 --> 00:10:01,400 That is much much better. 175 00:10:01,520 --> 00:10:08,010 And you know I really don't really like the separation style there so I'm going to change the separation 176 00:10:08,010 --> 00:10:12,400 style to have no separator. 177 00:10:12,420 --> 00:10:14,360 We're going to choose none. 178 00:10:14,360 --> 00:10:15,740 That looks pretty good. 179 00:10:16,150 --> 00:10:18,460 And yeah no this looks great. 180 00:10:18,470 --> 00:10:24,680 This is nice and nice and pretty but I see that our font here is not correct so let's change the font 181 00:10:24,680 --> 00:10:29,720 of our labels or our text fields to be Menlo like it's supposed to be 182 00:10:33,130 --> 00:10:34,600 can't choose Menlove. 183 00:10:35,240 --> 00:10:39,090 And let's bump it down to 16 as well. 184 00:10:42,130 --> 00:10:43,220 16 looks. 185 00:10:43,340 --> 00:10:45,770 That was 15 16 looks good. 186 00:10:45,770 --> 00:10:46,000 All right. 187 00:10:46,010 --> 00:10:47,250 So we just change the font. 188 00:10:47,270 --> 00:10:49,890 That should be wonderful fine and dandy. 189 00:10:50,210 --> 00:10:52,290 The separator will also disappear. 190 00:10:52,430 --> 00:10:57,290 We can give that a shot to make sure but as it's loading we're going to open it up and we're going to 191 00:10:57,290 --> 00:10:58,720 create a view control a file. 192 00:10:58,720 --> 00:11:01,710 First of all since we haven't for this one yet. 193 00:11:04,130 --> 00:11:06,180 OK it's loading here showing up 194 00:11:11,120 --> 00:11:13,020 OK here we go let's open it up. 195 00:11:13,190 --> 00:11:13,820 OK and there we go. 196 00:11:13,820 --> 00:11:15,810 Now our font is properly showing up. 197 00:11:15,830 --> 00:11:16,980 But look at that. 198 00:11:17,030 --> 00:11:22,550 Should have paid attention it's not green like it's supposed to be so select all three text fields change 199 00:11:22,550 --> 00:11:25,100 the font color to green. 200 00:11:25,100 --> 00:11:25,780 Perfect. 201 00:11:25,850 --> 00:11:26,520 All right. 202 00:11:26,720 --> 00:11:34,340 So now what we're going to do is we're going to go ahead and create a swift file for this by clicking 203 00:11:34,400 --> 00:11:36,790 new file in the controllers. 204 00:11:36,890 --> 00:11:48,290 You touch class UI view controller cam we're going to call this create groups Visi click Create and 205 00:11:48,290 --> 00:11:50,240 now we can go back into the storyboard 206 00:11:57,490 --> 00:12:02,680 and now we should be able to access our view controller here should show up under automatic O. 207 00:12:02,700 --> 00:12:04,780 But you know what we have not set its identity. 208 00:12:04,780 --> 00:12:11,680 So first selective controller and we're going to create this as a type of create groups VC as soon as 209 00:12:11,680 --> 00:12:17,290 we do that you'll see that it'll automatically pop up here and now what we need to do is basically set 210 00:12:17,290 --> 00:12:24,890 up all of the Iby actions and outlets that we need for doing this which are quite a few. 211 00:12:24,910 --> 00:12:30,250 We need one for the button for the close button the text fields here and the table view. 212 00:12:30,280 --> 00:12:34,870 So we're going to go ahead and we're going to create an outlet for everything that we need. 213 00:12:34,930 --> 00:12:40,270 So this will be title textfield. 214 00:12:40,650 --> 00:12:41,130 OK. 215 00:12:41,320 --> 00:12:42,780 That looks awesome. 216 00:12:42,790 --> 00:12:43,990 This will be. 217 00:12:44,180 --> 00:12:48,820 Whoops sorry let's go beneath this. 218 00:12:48,820 --> 00:12:50,680 This will be description text. 219 00:12:51,010 --> 00:12:53,830 Again this will be a description textfield 220 00:13:00,810 --> 00:13:05,200 awesome cable this will be user name or habit. 221 00:13:05,220 --> 00:13:12,250 Email textfield maybe email search email search textfield. 222 00:13:12,780 --> 00:13:17,010 And what else we're going to need one for the Dunbarton because we're gonna hide it unless we have typed 223 00:13:17,010 --> 00:13:19,850 a name dun button. 224 00:13:20,490 --> 00:13:24,990 OK we don't need one for the cancel button but we do need one for the table view. 225 00:13:25,790 --> 00:13:27,320 OK very cool. 226 00:13:27,330 --> 00:13:28,170 Now is there anything else. 227 00:13:28,200 --> 00:13:37,190 Ah yes the add people to your group we're also going to modify So let's put that beneath let's put it 228 00:13:37,190 --> 00:13:43,390 beneath our search field so let's do e-mail or maybe added. 229 00:13:43,730 --> 00:13:44,920 Well what is it. 230 00:13:44,930 --> 00:13:51,380 What can we call it maybe Group Member label or. 231 00:13:51,500 --> 00:13:53,650 Yeah it is a label. 232 00:13:53,650 --> 00:13:54,070 All right. 233 00:13:54,130 --> 00:13:56,740 Awesome so we have outlets for everything. 234 00:13:56,740 --> 00:14:02,230 We have some unnecessary spaces here between them and that looks great. 235 00:14:02,230 --> 00:14:08,320 Now we need to set up some IP actions so let's get rid of the boilerplate code and let's set up an action 236 00:14:08,320 --> 00:14:10,600 here for our done button. 237 00:14:10,670 --> 00:14:11,500 Ok done. 238 00:14:11,530 --> 00:14:13,300 Button was pressed. 239 00:14:16,150 --> 00:14:23,530 And beneath that we're going to set up an IAB action for the close button of course turning it to an 240 00:14:23,530 --> 00:14:24,660 IBM action. 241 00:14:24,780 --> 00:14:26,110 There we go. 242 00:14:26,530 --> 00:14:31,550 And you know what for IAB actions and outlet's I think we are good to go. 243 00:14:31,660 --> 00:14:34,010 We don't have anything else that we need to do with those. 244 00:14:34,040 --> 00:14:38,590 And in the next video we're going to set up some really really cool stuff so that we can search for 245 00:14:38,590 --> 00:14:44,320 users display them in the table view and we'll get a function up and running in our data service so 246 00:14:44,320 --> 00:14:46,090 that we can download all that good information. 247 00:14:46,090 --> 00:14:51,130 So we'll see in the next video where we will continue to build out this amazing social media app. 248 00:14:51,250 --> 00:14:51,830 I'll see over there.