1 00:00:08,130 --> 00:00:11,580 Hey you guys have to go on this is Caleb with Debb slopes dot com. 2 00:00:11,610 --> 00:00:16,920 And in this video we're going to build out the feed the sea and the group's Visi which if you remember 3 00:00:16,920 --> 00:00:20,170 from our simulator Let's go take a peek. 4 00:00:20,180 --> 00:00:20,730 Let's sorry. 5 00:00:20,730 --> 00:00:23,410 Let me log in to my account here. 6 00:00:27,250 --> 00:00:29,220 OK we're going to log in. 7 00:00:29,230 --> 00:00:30,170 Very cool. 8 00:00:30,220 --> 00:00:36,520 The feed we see has a nice long table view here of every post that anyone has posted publicly. 9 00:00:36,700 --> 00:00:42,340 And we're going to set up groups Visi so that we have a nice channel here where you can access all the 10 00:00:42,340 --> 00:00:44,100 groups that you're part of. 11 00:00:44,140 --> 00:00:44,940 Very cool. 12 00:00:44,940 --> 00:00:48,970 And let's do it now pull open your X code project. 13 00:00:48,970 --> 00:00:50,140 Lovely. 14 00:00:50,140 --> 00:00:51,790 Very very good let's close that. 15 00:00:51,790 --> 00:00:55,350 Let's stop the running so that we do not waste any memory. 16 00:00:55,510 --> 00:00:58,060 And let's go to the main story storyboard. 17 00:00:58,350 --> 00:00:59,340 OK. 18 00:00:59,350 --> 00:00:59,890 Very cool. 19 00:00:59,890 --> 00:01:04,720 And this is where we're actually going to start using our Tabar controller so you can zoom on over to 20 00:01:04,720 --> 00:01:05,570 that. 21 00:01:05,710 --> 00:01:12,010 And you know what there's something we need to do what we need to do first is we need to select the 22 00:01:12,010 --> 00:01:14,890 document here and there's something that you can do that. 23 00:01:14,890 --> 00:01:20,650 I actually just learned when I was starting to make this course is that you can set a global tint so 24 00:01:20,650 --> 00:01:26,720 every button you add every tab bar button is set to the same tint which I thought was really cool. 25 00:01:26,800 --> 00:01:30,650 And for all the buttons we're going to actually be using that teal color. 26 00:01:30,820 --> 00:01:34,890 So go ahead and set that Teal 0 for ABC 5. 27 00:01:34,900 --> 00:01:36,680 Set that to be your global tent. 28 00:01:36,700 --> 00:01:42,460 And now as you can see the button here for the tab bar set to that global tent which is really cool. 29 00:01:42,460 --> 00:01:47,380 You can of course change it but it's great for what we're doing in this course. 30 00:01:47,380 --> 00:01:54,490 So now let's go ahead and build out feed Visi and to do that we're going to actually modify these View 31 00:01:54,490 --> 00:01:57,520 Controller files so that they fit the name. 32 00:01:57,520 --> 00:02:00,610 I don't like that this is just called first view controller that's boring. 33 00:02:00,610 --> 00:02:04,010 So I'm going to change it to say feed visi. 34 00:02:04,600 --> 00:02:10,900 This one I'm going to change to be groups VC and back in the board. 35 00:02:10,900 --> 00:02:15,730 We of course need to change this because it still thinks that it's a first view controller. 36 00:02:15,730 --> 00:02:24,690 It's not OK change that to feed Visi then we're going to change this two groups visi. 37 00:02:24,790 --> 00:02:25,780 All right. 38 00:02:25,780 --> 00:02:27,220 Very cool. 39 00:02:27,220 --> 00:02:28,240 Not too bad. 40 00:02:28,240 --> 00:02:35,410 And now what we can do is we can actually start building out the interface so get rid of these labels 41 00:02:35,410 --> 00:02:36,970 that are provided by X code. 42 00:02:36,970 --> 00:02:40,490 We don't need those and we're going to start in on feed's VC. 43 00:02:40,900 --> 00:02:48,180 So go ahead and let's change the title here to say feed. 44 00:02:48,180 --> 00:02:52,110 We're also going to set the image to be our feed tab icon. 45 00:02:52,110 --> 00:02:52,680 Very cool. 46 00:02:52,680 --> 00:02:59,430 And so now that will show up while we're at it let's go ahead and change second to say groups and we'll 47 00:02:59,430 --> 00:03:03,400 also change the icon to be our group's tab icon. 48 00:03:03,420 --> 00:03:04,710 Simple enough. 49 00:03:04,710 --> 00:03:05,330 And you know what. 50 00:03:05,370 --> 00:03:09,360 I thought that these looked actually cooler in green. 51 00:03:09,360 --> 00:03:15,600 And so what we're going to do is on the tab bar the tent is blue like it like it we've set it to be 52 00:03:15,870 --> 00:03:17,900 but we're actually going to change it to be green. 53 00:03:18,150 --> 00:03:18,750 OK. 54 00:03:19,050 --> 00:03:23,820 And you know you don't really notice that change until you go off the Tabar and selected again but they 55 00:03:23,820 --> 00:03:25,410 are now green. 56 00:03:25,410 --> 00:03:30,270 Now there's another thing we need to change and that is this Tabar is currently kind of a gray color. 57 00:03:30,300 --> 00:03:32,230 We want it to be dark. 58 00:03:32,280 --> 00:03:38,220 So select the tab control or tab and then for the bar tent set it to be that kind of light ish gray 59 00:03:38,220 --> 00:03:42,850 color and you'll see it turns to that really cool gray suite. 60 00:03:42,870 --> 00:03:48,610 So next up what we're going to do is we're going to dive into feed visi. 61 00:03:48,720 --> 00:03:54,090 Let's go ahead and begin by actually setting the far this back background to be that light gray colors. 62 00:03:54,090 --> 00:03:56,400 Well that looks good. 63 00:03:56,910 --> 00:04:04,350 And if you're wondering that color is 4 1 4 5 5 0 and we're going to put a view up at the top here and 64 00:04:04,350 --> 00:04:06,230 that's going to house all of our buttons. 65 00:04:06,240 --> 00:04:15,660 So go ahead and type you I have you and you view drag it on and of course we need to resize it. 66 00:04:15,750 --> 00:04:18,560 So go ahead and let's make this 70. 67 00:04:18,680 --> 00:04:20,180 I think that looks pretty good. 68 00:04:20,670 --> 00:04:24,990 Let's set the background to be that very dark black color. 69 00:04:25,280 --> 00:04:25,620 OK. 70 00:04:25,650 --> 00:04:27,180 Very cool. 71 00:04:27,180 --> 00:04:28,340 That looks pretty good. 72 00:04:28,650 --> 00:04:32,280 And now we need to give it a label and a button. 73 00:04:32,460 --> 00:04:37,010 So let's do that now by typing UI label. 74 00:04:37,470 --> 00:04:40,250 Drag one on here and center it. 75 00:04:40,260 --> 00:04:41,670 That looks good. 76 00:04:41,670 --> 00:04:43,840 Next we need a button. 77 00:04:44,520 --> 00:04:47,410 Drag it on and you'll see because of the global tint. 78 00:04:47,430 --> 00:04:49,950 The text color is already the right blue. 79 00:04:49,980 --> 00:04:51,090 Very helpful. 80 00:04:51,300 --> 00:04:56,330 Let's get rid of button and this is going to be to compose a new post. 81 00:04:56,370 --> 00:05:03,090 So tap compose and you'll see it changes to the compose image like we want for these buttons on the 82 00:05:03,090 --> 00:05:09,660 side we're trying to mimic a UI navigation controller we're not actually using one but we want to do 83 00:05:09,660 --> 00:05:09,970 that. 84 00:05:09,990 --> 00:05:17,640 And so we're going to set this actually to be 30 from the top and 20 from the right give it a fixed 85 00:05:17,640 --> 00:05:21,540 width and height of 30 and pin that exactly in place. 86 00:05:21,540 --> 00:05:31,980 Now we're getting some issues here because it appears that we are not properly pinned in our place. 87 00:05:31,980 --> 00:05:32,910 What's the deal. 88 00:05:34,440 --> 00:05:39,960 Oh of course we have not yet set constraints on this outer view so go ahead and pin this zero from the 89 00:05:39,960 --> 00:05:46,040 left top and right and then give it a fixed height of 70 and you'll see the button goes back into its 90 00:05:46,040 --> 00:05:48,360 spot and the constraints are perfect. 91 00:05:48,360 --> 00:05:50,380 Next choose your label. 92 00:05:50,430 --> 00:05:55,230 We're going to actually stretch it out here a little ways and we're going to center the font change 93 00:05:55,230 --> 00:05:59,550 the color to that nice bright green and change the font. 94 00:05:59,550 --> 00:06:01,190 To be Menlo. 95 00:06:01,380 --> 00:06:01,860 OK. 96 00:06:01,890 --> 00:06:07,880 Set it to be 18 and then change the words to say feed. 97 00:06:07,890 --> 00:06:09,220 Very cool. 98 00:06:09,230 --> 00:06:12,930 Now let's go ahead and let's pin this. 99 00:06:12,990 --> 00:06:14,410 How do we want to do this. 100 00:06:14,430 --> 00:06:19,560 I want it to be perfectly centered but I also want it to be perfectly in line with the button so to 101 00:06:19,560 --> 00:06:25,860 do that I'm going to go ahead and select my label here I'm going to go ahead and select the alignment 102 00:06:25,890 --> 00:06:28,950 button and pin it horizontally in the container. 103 00:06:28,950 --> 00:06:34,350 Then I'm going to select the label and the button and I'm going to go ahead and give these the same 104 00:06:34,350 --> 00:06:35,940 vertical centers. 105 00:06:35,940 --> 00:06:36,640 OK. 106 00:06:37,020 --> 00:06:43,420 Now to make sure this stays the same size I'm going to go ahead and give this a height and width that 107 00:06:43,440 --> 00:06:45,010 is fixed. 108 00:06:45,150 --> 00:06:45,840 And now we're good. 109 00:06:45,840 --> 00:06:48,410 That'll stay exactly in its place. 110 00:06:48,420 --> 00:06:50,890 We're actually going to replicate this later on. 111 00:06:50,910 --> 00:06:52,320 And we're going to use it throughout our app. 112 00:06:52,320 --> 00:06:58,950 So this is just a cool way to make a sort of a pseudo UI navigation controller type view. 113 00:06:59,110 --> 00:06:59,390 OK. 114 00:06:59,400 --> 00:07:00,780 Simple as that. 115 00:07:00,780 --> 00:07:05,300 Now what we're going to do is we're going to drag on AUI table view. 116 00:07:05,700 --> 00:07:10,810 And that is where we're going to Houghs all of our posts so drag it onto the view. 117 00:07:10,980 --> 00:07:15,110 And we're going to scale it so that it fits the entire width of the view. 118 00:07:15,480 --> 00:07:20,370 You'll notice though that it snaps 8 from the top and it won't actually snap on to this view. 119 00:07:20,730 --> 00:07:23,280 That's because we have to do it manually using constraints. 120 00:07:23,280 --> 00:07:30,030 So once you've stretched it out click the pin button and we're going to pin it from all sides but change 121 00:07:30,030 --> 00:07:34,080 this eight to zero and watch what happens when you add four constraints. 122 00:07:34,080 --> 00:07:36,350 It moves up exactly where it's supposed to be. 123 00:07:36,540 --> 00:07:37,740 Very cool. 124 00:07:37,740 --> 00:07:42,350 Now we're going to drop in a table view cell just like that. 125 00:07:42,420 --> 00:07:47,940 We're going to stretch it so that it is 100 high and you know what we're going to actually modify this 126 00:07:48,000 --> 00:07:49,250 custom Lee. 127 00:07:49,530 --> 00:07:50,370 So that's good. 128 00:07:50,400 --> 00:07:51,980 The row height is 100. 129 00:07:52,050 --> 00:07:56,390 But we need to also set that in our table view to be 100. 130 00:07:56,400 --> 00:07:58,670 Otherwise there will be differences. 131 00:07:58,670 --> 00:07:59,340 OK. 132 00:07:59,820 --> 00:08:02,190 We're going to come back to this cell later on. 133 00:08:02,250 --> 00:08:07,380 We're going to actually build out the cell and change the colors at Image views labels et etc.. 134 00:08:07,500 --> 00:08:08,760 But for now this is great. 135 00:08:08,790 --> 00:08:12,360 Let's leave it at this with one small change. 136 00:08:12,360 --> 00:08:13,430 Click on your table view. 137 00:08:13,440 --> 00:08:19,350 And we want to set the background of our table view to match the background that is now hiding behind 138 00:08:19,350 --> 00:08:19,630 this. 139 00:08:19,650 --> 00:08:24,200 So undo that Select the table view and scroll down. 140 00:08:24,270 --> 00:08:28,770 Change the background color to be the lighter of the two grace and that's that. 141 00:08:28,770 --> 00:08:29,700 Very cool. 142 00:08:29,760 --> 00:08:34,740 If we build and run this now we should take a look and see if our feet is actually showing up the way 143 00:08:34,740 --> 00:08:35,150 we want. 144 00:08:35,160 --> 00:08:36,800 So build and run. 145 00:08:37,380 --> 00:08:38,830 Let's see how it does. 146 00:08:40,810 --> 00:08:44,130 Beautiful looks like our simulator is up. 147 00:08:44,360 --> 00:08:46,650 We're switching over and look at that. 148 00:08:46,670 --> 00:08:47,930 We get a feed. 149 00:08:47,960 --> 00:08:55,370 Each cell is one hundred high we have a button a label and looks like these are stuck showing the wrong 150 00:08:55,730 --> 00:08:56,240 color. 151 00:08:56,240 --> 00:08:57,810 That is not what we want. 152 00:08:58,010 --> 00:09:01,630 So let's go ahead let's head back and change this. 153 00:09:01,700 --> 00:09:09,630 It appears that these are successfully showing it appears that these are good as well. 154 00:09:10,630 --> 00:09:13,970 OK we have set our bar item. 155 00:09:14,690 --> 00:09:15,970 OK that's good. 156 00:09:16,000 --> 00:09:19,300 We have set these to look good our image tint. 157 00:09:19,330 --> 00:09:20,170 That might be the problem. 158 00:09:20,170 --> 00:09:23,410 Let's set that to green and let's try to build and run it again. 159 00:09:23,410 --> 00:09:29,770 Let's see if that changes from the default blue to our appropriate green color much better. 160 00:09:29,770 --> 00:09:30,030 OK. 161 00:09:30,040 --> 00:09:30,400 Awesome. 162 00:09:30,400 --> 00:09:33,910 So the tent and the text are now both the right green color. 163 00:09:33,910 --> 00:09:40,960 We have an awesome table view here and now let's build out groups we see first of all we need to set 164 00:09:41,050 --> 00:09:45,400 the identity here to be groups Visi we push enter. 165 00:09:45,400 --> 00:09:47,680 It looks like it's still holding onto its name. 166 00:09:47,740 --> 00:09:50,690 So let's go ahead and let's actually change this to groups. 167 00:09:51,190 --> 00:09:51,820 Oh you know what. 168 00:09:51,820 --> 00:09:52,540 It won't let us. 169 00:09:52,540 --> 00:09:55,040 That's odd huh. 170 00:09:57,650 --> 00:09:58,070 Interesting. 171 00:09:58,070 --> 00:10:03,500 Well it looks like we're successfully setting its identity to groups we. 172 00:10:03,710 --> 00:10:05,880 And it's showing up as a groups scene. 173 00:10:05,900 --> 00:10:09,800 But for some reason we can't really seem to get rid of that second name. 174 00:10:09,800 --> 00:10:15,760 Maybe that's just a bug in Interface Builder Let's check huh. 175 00:10:15,820 --> 00:10:16,290 Interesting. 176 00:10:16,330 --> 00:10:19,620 OK well you know what if we run into issues we can fix that later on. 177 00:10:19,630 --> 00:10:22,390 But for now let's just go ahead and keep with what we're doing. 178 00:10:22,390 --> 00:10:26,770 And you know what for this view controller we're basically going to duplicate what we have here but 179 00:10:26,770 --> 00:10:30,520 we're going to change it and modify it so that it's four groups. 180 00:10:30,520 --> 00:10:36,670 So I'm actually going to go ahead and copy this select this view controller and paste it. 181 00:10:37,030 --> 00:10:40,540 And that's actually going to allow me to just kind of duplicate what I've already done. 182 00:10:40,570 --> 00:10:45,280 The only thing I need to change is the constraints pinning it to the left top and right and giving it 183 00:10:45,280 --> 00:10:50,810 a fixed height of 70 although it looks like that constraint carried over. 184 00:10:50,880 --> 00:10:51,820 Ah yes. 185 00:10:51,820 --> 00:10:55,270 So get rid of the one that says greater than or equal to 70. 186 00:10:55,300 --> 00:11:00,870 And of course we're going to want to change this to say groups with the underscore of course. 187 00:11:01,210 --> 00:11:07,880 And let's change the width to 70 or so maybe 100 so that everything fits awesome. 188 00:11:07,900 --> 00:11:11,880 Now for groups we're going to give the ability to add a group. 189 00:11:11,980 --> 00:11:18,940 So go ahead and we're going to change the image to add new icon and that will give us a nice little 190 00:11:18,940 --> 00:11:21,040 plus button which is really cool. 191 00:11:21,040 --> 00:11:25,450 Next we're going to add a table view just like we did here and you know what we're going to copy and 192 00:11:25,450 --> 00:11:26,080 paste it to. 193 00:11:26,080 --> 00:11:30,790 The nice thing is that we have not set up any Iby outlets or actions that could carry over and causes 194 00:11:30,790 --> 00:11:31,660 problems. 195 00:11:31,660 --> 00:11:33,080 That's why I'm doing this for now. 196 00:11:33,310 --> 00:11:39,820 So go ahead and select your table view copy it select your other view controller and paste it and now 197 00:11:39,820 --> 00:11:43,400 will just drag it into its perfect place and give it some constraints. 198 00:11:43,450 --> 00:11:48,970 So pinnate zero from the left top right and bottom and that's that. 199 00:11:49,000 --> 00:11:55,560 Let's go see if it works let's build and run and let's check to see if we have a nice lovely feed VC 200 00:11:55,620 --> 00:11:57,270 and group visi. 201 00:11:57,860 --> 00:11:58,390 OK. 202 00:11:58,570 --> 00:12:00,770 Feed VC looks awesome groups. 203 00:12:00,790 --> 00:12:02,380 VC also looks awesome. 204 00:12:02,490 --> 00:12:07,440 Plus putten feed we VC looks good but I'm seeing a problem. 205 00:12:07,540 --> 00:12:16,680 The inactive icon hides it's the same color as the Tabar So we need to fix that as well. 206 00:12:16,930 --> 00:12:21,230 Let's go ahead and let's find out what the deal is. 207 00:12:21,250 --> 00:12:27,670 So groups if we select this it appears that the selected image is good. 208 00:12:27,930 --> 00:12:29,380 OK that's great. 209 00:12:32,120 --> 00:12:34,630 It appears that the selected image is good. 210 00:12:34,640 --> 00:12:40,000 The unselected image I believe the tent is supposed to be light grey. 211 00:12:40,310 --> 00:12:43,780 Let's see if that works let's set it to our like gray here. 212 00:12:43,880 --> 00:12:48,680 Let's move on and let's go ahead and let's check to see if that fixed our problem by changing it to 213 00:12:48,680 --> 00:12:49,320 grey. 214 00:12:50,890 --> 00:12:53,260 OK so that definitely changed the tint of the image. 215 00:12:53,260 --> 00:12:54,860 We want it to be green. 216 00:12:54,880 --> 00:12:58,560 The bartender we want to be grey and 0 in the overall tent. 217 00:12:58,570 --> 00:13:03,740 Perhaps we want to be that like great let's give that a shot and see if that fixes the problem. 218 00:13:08,810 --> 00:13:12,050 So no I did not fix the problem it looks like they're still hiding. 219 00:13:12,050 --> 00:13:14,060 So let's go change it again. 220 00:13:14,060 --> 00:13:15,390 Maybe let's try red. 221 00:13:15,440 --> 00:13:21,310 Make it very obvious that it's the right color see if that fixes the problem. 222 00:13:21,740 --> 00:13:23,840 OK it appears that does not solve the problem either. 223 00:13:23,840 --> 00:13:28,850 So let's just go ahead and set this default and interesting. 224 00:13:28,870 --> 00:13:29,930 So what is the deal here. 225 00:13:29,930 --> 00:13:34,220 Looks like when we are selected that is the image. 226 00:13:34,310 --> 00:13:37,790 The position is fine the image is fine. 227 00:13:38,870 --> 00:13:41,300 Images also find yet they're all fine. 228 00:13:41,300 --> 00:13:43,830 That looks good the background. 229 00:13:43,850 --> 00:13:46,920 You know what Perhaps this is the problem. 230 00:13:46,970 --> 00:13:50,400 Let's go ahead and let's try to set this to our dark gray color. 231 00:13:50,630 --> 00:13:52,570 Let's build and run. 232 00:13:52,630 --> 00:13:54,770 Let's see if that fixes anything for us. 233 00:13:56,870 --> 00:13:57,200 OK. 234 00:13:57,210 --> 00:13:57,500 No. 235 00:13:57,520 --> 00:14:12,360 So interesting we're still having trouble here. 236 00:14:12,890 --> 00:14:20,820 OK so let's go ahead let's change this Tabar to have a clear color in the background. 237 00:14:20,990 --> 00:14:25,820 Change the tent back to that green and let's go ahead and let's try this again. 238 00:14:25,900 --> 00:14:26,710 BuildOn run. 239 00:14:26,780 --> 00:14:33,470 Whoops and run to the simulator of course and let's see if that fixed our problem this is really odd. 240 00:14:33,470 --> 00:14:38,120 I did not have this problem before so you're kind of getting to see me solve this. 241 00:14:38,120 --> 00:14:39,640 Like I would in real life. 242 00:14:39,770 --> 00:14:42,450 Let's see if that fixed our issue. 243 00:14:42,650 --> 00:14:51,070 And no weird even if I zoom in it appears that that is just totally not there. 244 00:14:51,080 --> 00:14:52,650 Super weird. 245 00:14:52,730 --> 00:14:55,180 We've given it. 246 00:14:55,460 --> 00:14:56,580 I see the problem. 247 00:14:56,600 --> 00:14:59,190 It's really obvious guys. 248 00:14:59,360 --> 00:15:01,800 So I've set the image here. 249 00:15:01,820 --> 00:15:08,870 I have chosen an image from the selected image but the bar item is still referencing that old first 250 00:15:08,900 --> 00:15:09,200 image. 251 00:15:09,200 --> 00:15:12,300 That's one of the dangers of using the pre-built projects from Apple. 252 00:15:12,380 --> 00:15:14,930 Sometimes you forgot forget very simple things like that. 253 00:15:14,930 --> 00:15:15,680 My goodness. 254 00:15:15,680 --> 00:15:20,130 OK choose feed tab icon and now it shows up here. 255 00:15:20,150 --> 00:15:20,690 Look at that. 256 00:15:20,750 --> 00:15:20,990 OK. 257 00:15:20,990 --> 00:15:26,030 Select groups and change second to groups tab icon. 258 00:15:26,030 --> 00:15:28,430 Sorry guys that took far too long. 259 00:15:28,460 --> 00:15:34,670 If we build and run now you can actually see that it is going to appropriately show up the right color 260 00:15:34,670 --> 00:15:35,930 when not selected. 261 00:15:35,930 --> 00:15:36,540 There it is. 262 00:15:36,560 --> 00:15:40,080 And when selected it changes to the green icon. 263 00:15:40,130 --> 00:15:41,330 My goodness sorry guys. 264 00:15:41,330 --> 00:15:43,730 You probably were watching me going just fix it. 265 00:15:43,730 --> 00:15:49,190 You probably saw it before me so I apologize for that but it's now fixed. 266 00:15:49,220 --> 00:15:54,350 We have an awesome feed VC and groups Visi it looks great. 267 00:15:54,590 --> 00:15:59,560 Let's go ahead and let's move on to the next video where we're going to create the profile of you controller. 268 00:15:59,630 --> 00:16:04,100 We're going to add a new controller to the UI tab bar controller and we're going to make sure that all 269 00:16:04,100 --> 00:16:06,740 the icons are working the way they're supposed to. 270 00:16:06,780 --> 00:16:10,360 And let's go ahead and let's head over to the next video and let's do it.