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