1 00:00:08,040 --> 00:00:13,740 Hey everybody in this video we're going to create MVH see it's the view controller that's going to house 2 00:00:13,800 --> 00:00:21,060 the profile of the user that is logged in and we're not going to totally completed in this video because 3 00:00:21,060 --> 00:00:23,090 that's actually going to be part of a challenge. 4 00:00:23,220 --> 00:00:30,090 At the end of this section is for you to complete the profile page based on my specifications so we're 5 00:00:30,090 --> 00:00:34,170 going to start though by building out a part of it and leaving space for you to expand it later. 6 00:00:34,200 --> 00:00:39,120 So go ahead and pull open your X code project and we're going to actually do most of our work FOR THIS 7 00:00:39,120 --> 00:00:41,050 VIDEO IN MAY NOT storyboard. 8 00:00:41,050 --> 00:00:46,720 So go ahead and zoom out and we're going to drop on a new View Controller just like that. 9 00:00:46,800 --> 00:00:52,290 Now we are basically going to be doing a similar thing to the previous two controllers that we have 10 00:00:52,290 --> 00:00:52,970 here. 11 00:00:53,460 --> 00:00:57,330 By basically copying and pasting the tab bar here we're going to. 12 00:00:57,440 --> 00:01:00,680 Are not the Tabar but the pseudo navigation controller. 13 00:01:01,020 --> 00:01:06,080 And then of course pinning it to the left top and right and giving it. 14 00:01:06,240 --> 00:01:08,010 Well it already has a fixed height constraint. 15 00:01:08,010 --> 00:01:09,380 We learned that in the last video. 16 00:01:09,660 --> 00:01:12,220 Add three constraints and now that's in place. 17 00:01:12,270 --> 00:01:15,310 This of course is going to be a different label. 18 00:01:15,420 --> 00:01:18,020 It's going to say me and you know what I'm going to zoom in. 19 00:01:18,030 --> 00:01:19,470 You can actually see that. 20 00:01:19,500 --> 00:01:20,410 There we go. 21 00:01:20,430 --> 00:01:26,470 It says me and this button is going to be used to log out because if you're logged in you can see this. 22 00:01:26,490 --> 00:01:30,470 If you can't or if you're not logged in Remember the controller pops up. 23 00:01:30,540 --> 00:01:34,380 So we're just going to change the image to log out. 24 00:01:34,380 --> 00:01:35,630 Icon OK. 25 00:01:35,640 --> 00:01:36,570 Pretty cool. 26 00:01:36,570 --> 00:01:40,710 We're going to use that to cue the log out to happen. 27 00:01:40,710 --> 00:01:42,800 Very cool and OK. 28 00:01:42,810 --> 00:01:44,780 So let's go ahead and let's build this out. 29 00:01:44,790 --> 00:01:47,400 We're going to set the background of the view. 30 00:01:47,640 --> 00:01:52,580 Select the view and the background is going to be our dark gray color. 31 00:01:55,190 --> 00:01:56,510 It's not the right one. 32 00:01:56,510 --> 00:02:00,640 The dark gray is much darker in that one. 33 00:02:03,070 --> 00:02:04,510 You know those are the same exact color. 34 00:02:04,540 --> 00:02:05,750 Keep clicking the same one. 35 00:02:06,010 --> 00:02:06,580 OK. 36 00:02:06,760 --> 00:02:07,150 Very cool. 37 00:02:07,150 --> 00:02:11,180 So we're going to set it to be equal to our dark color there. 38 00:02:12,510 --> 00:02:19,800 And then what we're going to do is we're going to go ahead and drop on a view and this view is going 39 00:02:19,800 --> 00:02:26,130 to go right here next to the navigation up at the top and it's going to go down to about the middle 40 00:02:26,140 --> 00:02:29,750 and it's going to leave some room for a table view later on. 41 00:02:30,030 --> 00:02:35,550 So let's go ahead and let's change the background color of this to our slightly lighter gray. 42 00:02:35,580 --> 00:02:41,040 That way we still have kind of a bit of an appearance here of the view at the top. 43 00:02:41,040 --> 00:02:47,400 And let's pin this zero from the left zero from the top zero from the right. 44 00:02:47,400 --> 00:02:51,870 And let's give it a fixed height of 275. 45 00:02:52,020 --> 00:02:53,240 That looks pretty great. 46 00:02:53,520 --> 00:02:59,220 And now we're going to go ahead and put on a image of you for a profile image and a label that's going 47 00:02:59,220 --> 00:03:01,140 to show the user's username. 48 00:03:01,140 --> 00:03:07,020 So go ahead and type I image drag on a UI image view. 49 00:03:07,290 --> 00:03:08,850 And we're going to make this a square. 50 00:03:08,850 --> 00:03:15,420 So go ahead and make it 128 by 128 and now you know what let's make it a little smaller. 51 00:03:15,450 --> 00:03:17,770 100 by 100 is probably good. 52 00:03:18,150 --> 00:03:19,050 Yeah. 53 00:03:19,470 --> 00:03:21,650 OK go ahead and set it there. 54 00:03:21,690 --> 00:03:28,310 Set the image property in the in the attributes Inspektor to be default profile image like so. 55 00:03:28,500 --> 00:03:33,330 And just because we're going to set it to be aspect fill and we're going to clip to bounds because if 56 00:03:33,330 --> 00:03:38,130 you were to put in a real image you would want it to clip to the bounds you would want to fill to the 57 00:03:38,130 --> 00:03:39,900 aspect ratio. 58 00:03:39,900 --> 00:03:47,340 So since this is just going to be in here by itself we can go ahead and we can pin it 30 from the top. 59 00:03:47,520 --> 00:03:51,620 Give it a fixed width and height and add three constraints. 60 00:03:51,630 --> 00:03:56,610 Now we're going to keep it in the center by going to the alignment button click horizontally and container 61 00:03:56,970 --> 00:03:58,950 and we'll keep it right there in the center. 62 00:03:58,950 --> 00:04:00,150 Very cool. 63 00:04:00,150 --> 00:04:05,070 Next up let's go ahead and add a label drag and drop it. 64 00:04:05,370 --> 00:04:11,220 And of course if it's going to be similar to this one we need to set Menlo size 18 and change it to 65 00:04:11,220 --> 00:04:16,620 a different color because black on Gray is kind of hard to see of course stretch this out so we can 66 00:04:16,620 --> 00:04:23,660 actually see the whole thing center the font and let's change it to custom search for Menlo. 67 00:04:23,690 --> 00:04:26,110 There we go change it to size 18. 68 00:04:26,130 --> 00:04:30,180 And I think it would be cool to have a contrast here of green to blue. 69 00:04:30,420 --> 00:04:36,220 And let's go ahead and just set the user at break point dot com. 70 00:04:36,450 --> 00:04:39,180 OK that's like are our fake pseudo e-mail here. 71 00:04:39,450 --> 00:04:47,520 And let's move it a little bit closer to the picture and let's pin it 20 from our image 65 from the 72 00:04:47,520 --> 00:04:48,490 left and right. 73 00:04:48,510 --> 00:04:51,040 And let's give it a fixed height of 20. 74 00:04:51,300 --> 00:04:55,010 Add four constraints and it'll stay in place just like that. 75 00:04:55,020 --> 00:05:02,330 Now we're going to go ahead and we're going to add a UI table view so drag that on. 76 00:05:02,720 --> 00:05:09,590 And let's go ahead and pull this all the way down and let's pin it in place zero from the left right 77 00:05:09,620 --> 00:05:10,930 bottom and top. 78 00:05:10,940 --> 00:05:16,120 But we need to manually change it to 0 from 8 and add four constraints. 79 00:05:16,130 --> 00:05:22,490 Very cool drop on a cell and we're just going to leave this one at its default height. 80 00:05:22,490 --> 00:05:24,480 That's fine. 81 00:05:24,710 --> 00:05:28,260 No that's not true maybe a little bit higher maybe 50 or so. 82 00:05:28,760 --> 00:05:30,760 Let's go ahead and set it to 50. 83 00:05:30,830 --> 00:05:37,460 And of course select the table view itself and set the row height to 50 so that it reflects that change 84 00:05:37,460 --> 00:05:41,940 the background of this table view to be our light gray color. 85 00:05:41,960 --> 00:05:47,840 So if you scroll down background we're going to set to be light gray so that it matches the rest of 86 00:05:47,840 --> 00:05:48,880 the View Controller. 87 00:05:49,190 --> 00:05:55,040 And now what we need to do is we need to find a way to get this Tabar controller to include a third 88 00:05:55,040 --> 00:05:57,740 tab and show this view controller. 89 00:05:57,740 --> 00:06:00,020 It's really easy though so check it out. 90 00:06:00,080 --> 00:06:05,900 Now what I need to do is I need to go from my Tabar controller right click and drag to this view controller 91 00:06:06,200 --> 00:06:07,100 and let go. 92 00:06:07,280 --> 00:06:12,670 Now you'll notice there are traditional segues but there is a relationship segue here called view controllers. 93 00:06:12,770 --> 00:06:17,350 We can add MV C by clicking and look at that. 94 00:06:17,420 --> 00:06:21,220 It adds a third view controller very very easily. 95 00:06:21,210 --> 00:06:27,680 So now of course we need to customize this so that it shows the right image so click on MVH see and 96 00:06:27,680 --> 00:06:29,170 click on the little tab bar here. 97 00:06:29,180 --> 00:06:35,520 Now the selected image of course if you scroll down me tab icon adds it right there. 98 00:06:35,810 --> 00:06:39,600 And just like we learned in the last video you also need to set it here. 99 00:06:39,840 --> 00:06:40,150 OK. 100 00:06:40,190 --> 00:06:43,790 Me tab icon and now it shows up on both. 101 00:06:43,970 --> 00:06:48,990 The title says item we don't want it to say item we want it to say me instead. 102 00:06:49,250 --> 00:06:54,230 And look at that we now have a third view controller that is in place on our tab bar. 103 00:06:54,230 --> 00:06:56,360 So let's go ahead and let's build and run. 104 00:06:56,450 --> 00:06:57,680 Let's see how that works. 105 00:06:57,680 --> 00:06:59,900 Let's see if it shows up the way we want. 106 00:07:00,170 --> 00:07:01,450 And here we go. 107 00:07:01,490 --> 00:07:02,530 It's going to build. 108 00:07:02,600 --> 00:07:07,310 It's going to pop open and look at that we have all three of you controllers we can select here and 109 00:07:07,310 --> 00:07:09,090 make it show. 110 00:07:09,260 --> 00:07:10,070 That is awesome. 111 00:07:10,070 --> 00:07:16,600 So all three show up our user shows up here with their e-mail and their image. 112 00:07:16,610 --> 00:07:17,320 That's great. 113 00:07:17,480 --> 00:07:21,380 And what we're going to do next is we're going to give this a swift file because right now it doesn't 114 00:07:21,380 --> 00:07:24,920 have a view controller class it's just kind of showing up visually. 115 00:07:25,040 --> 00:07:30,020 We need to create a new controller class so that we can actually interface with this and modify what 116 00:07:30,020 --> 00:07:30,820 we need to modify. 117 00:07:30,830 --> 00:07:36,130 So let's do that by right clicking on controller click new file. 118 00:07:36,290 --> 00:07:40,050 And of course this can be a cocoa touch class. 119 00:07:40,050 --> 00:07:46,520 We're going to subclass you view controller and we're going to call this MVH see press enter or click 120 00:07:46,520 --> 00:07:47,030 next. 121 00:07:47,030 --> 00:07:48,800 Then click Create. 122 00:07:48,800 --> 00:07:57,310 And while we're at it we can just get rid of this nasty boilerplate code gross and go back to the storyboard. 123 00:07:57,500 --> 00:08:02,470 After that we're going to just set the identity of this view controller to be MVH see. 124 00:08:02,930 --> 00:08:07,700 And now we have a code file that we can actually do stuff with we can actually set it up so that it 125 00:08:07,700 --> 00:08:13,280 looks good and we can add some Iby outlets and some Iby actions and actually you know what. 126 00:08:13,340 --> 00:08:15,390 While we're at it let's go ahead and do that now. 127 00:08:15,590 --> 00:08:20,440 We're not going to write the code necessarily just yet for any Iby outlets or IB actions. 128 00:08:20,450 --> 00:08:24,210 But let's go ahead and let's at least set up the connections. 129 00:08:24,380 --> 00:08:28,350 So select this new controller then choose automatic. 130 00:08:28,520 --> 00:08:34,580 And now for the image we're going to want to set an IAB action for profile image. 131 00:08:34,580 --> 00:08:39,860 We're going to want to set an action for e-mail label. 132 00:08:40,340 --> 00:08:41,600 That looks great. 133 00:08:41,600 --> 00:08:45,990 We're going to want to set up an action for the table view. 134 00:08:46,700 --> 00:08:47,990 That looks good. 135 00:08:48,260 --> 00:08:58,660 And let's go ahead and let's set up an IB action not an outlet for sign out button was pressed. 136 00:08:59,480 --> 00:09:01,360 And that's where we're going to write. 137 00:09:01,370 --> 00:09:08,330 Sign out code to actually sign out our user code to get rid of that comment that we do not need. 138 00:09:08,450 --> 00:09:10,410 Awesome guys so this is great. 139 00:09:10,430 --> 00:09:16,460 We are setting this up the way that we want and in the next video we're going to dive right in to feed 140 00:09:16,460 --> 00:09:22,220 the sea a little more and we're going to basically set it up so that we can push on this create post 141 00:09:22,220 --> 00:09:27,130 view controller button and it's going to pop up the Create post visi. 142 00:09:27,320 --> 00:09:31,070 We're going to be able to write a message and upload it using our data service. 143 00:09:31,070 --> 00:09:32,900 It's going to be super super cool. 144 00:09:32,900 --> 00:09:34,900 Let's head over to that video right now. 145 00:09:34,910 --> 00:09:36,110 I'll see you there.