1
00:00:07,880 --> 00:00:13,690
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,730 --> 00:00:20,990
the profile of the user that is logged in and we're not going to totally completed in this video because

3
00:00:20,990 --> 00:00:23,030
that's actually going to be part of a challenge.

4
00:00:23,150 --> 00:00:29,150
At the end of this section is for you to complete the profile page based on my specifications.

5
00:00:29,150 --> 00:00:34,160
So we're going to start though by building out a part of it and leaving space for you to expand it later.

6
00:00:34,160 --> 00:00:39,050
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,050 --> 00:00:40,980
VIDEO IN MAY NOT storyboard.

8
00:00:40,980 --> 00:00:46,520
So go ahead and zoom out and we're going to drop on a new View Controller just like that.

9
00:00:46,600 --> 00:00:52,010
Now we are basically going to be doing a similar thing to the previous two of you controllers that we

10
00:00:52,010 --> 00:00:56,790
have here by basically copying and pasting the tab bar here.

11
00:00:56,790 --> 00:00:57,100
We're going to.

12
00:00:57,350 --> 00:01:00,820
Or not the tab bar but the pseudo navigation controller.

13
00:01:00,980 --> 00:01:06,200
And then of course pinning it to the left top and right and giving it.

14
00:01:06,200 --> 00:01:07,960
Well it already has a fixed height constraint.

15
00:01:07,960 --> 00:01:09,310
We learned that in the last video.

16
00:01:09,620 --> 00:01:12,180
Add three constraints and now that's in place.

17
00:01:12,230 --> 00:01:15,350
This of course is going to be a different label.

18
00:01:15,350 --> 00:01:19,420
It's going to say me and you know what I'm going to zoom in so you can actually see that.

19
00:01:19,460 --> 00:01:20,360
There we go.

20
00:01:20,360 --> 00:01:26,390
It says me and this button is going to be used to log out because if you're logged in you can see this

21
00:01:26,420 --> 00:01:30,420
if you can't or if you're not logged in Remember the controller pops up.

22
00:01:30,470 --> 00:01:34,350
So we're just going to change the image to log out.

23
00:01:34,360 --> 00:01:35,560
Icon OK.

24
00:01:35,570 --> 00:01:36,530
Pretty cool.

25
00:01:36,530 --> 00:01:40,640
We're going to use that to cue the log out to happen.

26
00:01:40,640 --> 00:01:42,740
Very cool and OK.

27
00:01:42,760 --> 00:01:44,690
So let's go ahead and let's build this out.

28
00:01:44,720 --> 00:01:47,350
We're going to set the background of the view.

29
00:01:47,600 --> 00:01:52,670
Select the view and the background is going to be our dark gray color.

30
00:01:55,100 --> 00:01:56,460
It's not the right one.

31
00:01:56,460 --> 00:02:04,450
The dark gray is much darker not that one of those are the same exact color.

32
00:02:04,480 --> 00:02:05,880
Keep clicking the same one.

33
00:02:05,950 --> 00:02:06,510
OK.

34
00:02:06,700 --> 00:02:07,090
Very cool.

35
00:02:07,090 --> 00:02:11,150
So we're going to set it to be equal to our dark color there.

36
00:02:12,450 --> 00:02:19,740
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

37
00:02:19,740 --> 00:02:26,100
to go right here next to the navigation up at the top and it's going to go down to about the middle.

38
00:02:26,100 --> 00:02:29,960
And it's going to leave some room for a table view later on.

39
00:02:29,970 --> 00:02:35,480
So let's go ahead and let's change the background color of this to our slightly lighter gray.

40
00:02:35,520 --> 00:02:40,730
That way we still have kind of a bit of an appearance here of the view at the top.

41
00:02:40,980 --> 00:02:47,280
And let's pin this zero from the left zero from the top zero from the right.

42
00:02:47,340 --> 00:02:51,880
And let's give it a fixed height of 275.

43
00:02:51,960 --> 00:02:53,160
That looks pretty great.

44
00:02:53,460 --> 00:02:59,160
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

45
00:02:59,160 --> 00:03:01,070
to show the users username.

46
00:03:01,080 --> 00:03:08,790
So go ahead and type I image drag on a UI image view and we're going to make this a square.

47
00:03:08,790 --> 00:03:15,360
So go ahead and make it 128 by 128 and now you know what let's make it a little smaller.

48
00:03:15,390 --> 00:03:17,700
100 by 100 is probably good.

49
00:03:18,090 --> 00:03:19,010
Yeah.

50
00:03:19,400 --> 00:03:19,700
OK.

51
00:03:19,700 --> 00:03:21,630
Go ahead and set it there.

52
00:03:21,630 --> 00:03:28,250
Set the image property in the in the attributes Inspektor to be default profile image like so.

53
00:03:28,440 --> 00:03:33,270
And just because we're going to set it to be aspect fill and we're going to clip to bounds because if

54
00:03:33,270 --> 00:03:38,070
you were to put in a real image you would want it to clip to the bounds you would want to fill to the

55
00:03:38,070 --> 00:03:39,590
aspect ratio.

56
00:03:39,840 --> 00:03:47,460
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.

57
00:03:47,460 --> 00:03:51,570
Give it a fixed width and height and add three constraints.

58
00:03:51,570 --> 00:03:56,550
Now we're going to keep it in the center by going to the alignment button click horizontally and container

59
00:03:56,910 --> 00:03:58,890
and we'll keep it right there in the center.

60
00:03:58,890 --> 00:04:00,090
Very cool.

61
00:04:00,090 --> 00:04:05,060
Next up let's go ahead and add a label drag and drop it.

62
00:04:05,310 --> 00:04:11,160
And of course if it's going to be similar to this one we need to set Menlo size 18 and change it to

63
00:04:11,160 --> 00:04:16,560
a different color because black on Gray is kind of hard to see of course stretch this out so we can

64
00:04:16,560 --> 00:04:23,560
actually see the whole thing center of the font and let's change it to custom search for Menlo.

65
00:04:23,630 --> 00:04:26,050
And we go change it to size 18.

66
00:04:26,070 --> 00:04:30,120
And I think it would be cool to have a contrast here of green to blue.

67
00:04:30,360 --> 00:04:36,180
And let's go ahead and just set the user at break dot com.

68
00:04:36,420 --> 00:04:39,060
OK that's like are our fake pseudo e-mail here.

69
00:04:39,420 --> 00:04:47,460
And let's move it a little bit closer to the picture and let's pin it 20 from our image 65 from the

70
00:04:47,460 --> 00:04:48,440
left and right.

71
00:04:48,480 --> 00:04:51,200
And let's give it a fixed height of 20.

72
00:04:51,240 --> 00:04:54,950
Add four constraints and it'll stay in place just like that.

73
00:04:54,960 --> 00:05:02,270
Now we're going to go ahead and we're going to add a UI table view so drag that on.

74
00:05:02,670 --> 00:05:09,490
And let's go ahead and pull this all the way down and let's pin it in place zero from the left right

75
00:05:09,570 --> 00:05:10,850
bottom and top.

76
00:05:10,860 --> 00:05:16,080
But we need to manually change it to 0 from 8 and add four constraints.

77
00:05:16,080 --> 00:05:22,430
Very cool drop on a cell and we're just going to leave this one at its default height.

78
00:05:22,440 --> 00:05:24,410
That's fine.

79
00:05:24,630 --> 00:05:28,200
No that's not true maybe a little bit higher maybe 50 or so.

80
00:05:28,710 --> 00:05:30,410
Let's go ahead and set it to 50.

81
00:05:30,750 --> 00:05:37,410
And of course select the table view itself and set the row height to 50 so that it reflects that change

82
00:05:37,410 --> 00:05:41,910
the background of this table view to be our light gray color.

83
00:05:41,910 --> 00:05:47,790
So if you scroll down background we're going to set to be light gray so that it matches the rest of

84
00:05:47,790 --> 00:05:49,100
the View Controller.

85
00:05:49,140 --> 00:05:54,990
And now what we need to do is we need to find a way to get this Tabar controller to include a third

86
00:05:54,990 --> 00:05:57,630
tab and show this view controller.

87
00:05:57,660 --> 00:05:59,980
It's really easy though so check it out.

88
00:06:00,030 --> 00:06:05,850
Now what I need to do is I need to go from my Tabar controller right click and drag to this view controller

89
00:06:06,150 --> 00:06:07,040
and let go.

90
00:06:07,230 --> 00:06:12,690
Now you'll notice there are traditional segues but there is a relationship segue here called view controllers.

91
00:06:12,690 --> 00:06:17,290
We can add MV C by clicking and look at that.

92
00:06:17,370 --> 00:06:21,220
It adds a third view controller very very easily.

93
00:06:21,320 --> 00:06:25,440
So now of course we need to customize this so that it shows the right image.

94
00:06:25,440 --> 00:06:29,090
So click on MVH see and click on the little tab bar here.

95
00:06:29,100 --> 00:06:35,480
Now the selected image of course if you scroll down me tab icon adds it right there.

96
00:06:35,760 --> 00:06:39,680
And just like we learned in the last video you also need to set it here.

97
00:06:39,690 --> 00:06:40,040
OK.

98
00:06:40,110 --> 00:06:40,470
Me.

99
00:06:40,470 --> 00:06:43,770
Tab icon and now it shows up on both.

100
00:06:43,920 --> 00:06:48,940
The title says item we don't want it to say item we want it to say me instead.

101
00:06:49,200 --> 00:06:54,180
And look at that we now have a third view controller that is in place on our tab bar.

102
00:06:54,180 --> 00:06:56,290
So let's go ahead and let's build and run.

103
00:06:56,370 --> 00:06:57,670
Let's see how that works.

104
00:06:57,700 --> 00:06:59,770
See if it shows up the way we want.

105
00:07:00,120 --> 00:07:01,430
And here we go.

106
00:07:01,440 --> 00:07:02,500
It's going to build.

107
00:07:02,550 --> 00:07:03,500
It's going to pop open.

108
00:07:03,510 --> 00:07:09,010
And look at that we have all three of you controllers we can select here and make it show.

109
00:07:09,180 --> 00:07:10,020
That is awesome.

110
00:07:10,020 --> 00:07:16,530
So all three show up user shows up here with their e-mail and their image.

111
00:07:16,540 --> 00:07:17,380
That's great.

112
00:07:17,410 --> 00:07:21,310
And what we're going to do next is we're going to give this a swift file because right now it doesn't

113
00:07:21,310 --> 00:07:24,840
have a controller class it's just kind of showing up visually.

114
00:07:24,970 --> 00:07:30,010
We need to create a controller class so that we can actually interface with this and modify what we

115
00:07:30,010 --> 00:07:30,760
need to modify.

116
00:07:30,770 --> 00:07:36,100
So let's do that by right clicking on controller click new file.

117
00:07:36,250 --> 00:07:39,910
And of course this can be a Cocco touch class.

118
00:07:39,970 --> 00:07:46,450
We're going to subclass you view controller and we're going to call this MVH see press enter or click

119
00:07:46,450 --> 00:07:46,990
next.

120
00:07:46,990 --> 00:07:48,440
Then click Create.

121
00:07:48,760 --> 00:07:57,330
And while we're at it we can just get rid of this nasty boilerplate code Rowse and go back to the storyboard.

122
00:07:57,430 --> 00:08:02,600
After that we're going to just set the identity of this controller to be MVH see.

123
00:08:02,860 --> 00:08:07,630
And now we have a code file that we can actually do stuff with we can actually set it up so that it

124
00:08:07,630 --> 00:08:13,230
looks good and we can add some IP outlets and some Iby actions and actually you know what.

125
00:08:13,270 --> 00:08:15,360
While we're at it let's go ahead and do that now.

126
00:08:15,550 --> 00:08:21,580
We're not going to write the code necessarily just yet for any outlets or actions but let's go ahead

127
00:08:21,610 --> 00:08:24,170
and let's at least set up the connections.

128
00:08:24,330 --> 00:08:28,060
So select this new controller then choose automatic.

129
00:08:28,450 --> 00:08:33,820
And now for the image we're going to want to set an IAB action for profile image.

130
00:08:34,510 --> 00:08:41,520
We're going to want to set an action for e-mail label that looks great.

131
00:08:41,530 --> 00:08:47,990
We're going to want to set up an action for the table view that looks good.

132
00:08:48,220 --> 00:08:58,610
And let's go ahead and let's set up an Iby action not an outlet for sign out button was pressed.

133
00:08:59,410 --> 00:09:01,170
And that's where we're going to write.

134
00:09:01,300 --> 00:09:08,250
Sign out code to actually sign out our user going to get rid of that comment that we do not need.

135
00:09:08,380 --> 00:09:10,370
Awesome guys so this is great.

136
00:09:10,390 --> 00:09:16,390
We are setting this up the way that we want and in the next video we're going to dive right in to feed

137
00:09:16,390 --> 00:09:22,180
the sea a little more and we're going to basically set it up so that we can push on this create post

138
00:09:22,180 --> 00:09:27,070
view controller button and it's going to pop up the Create post.

139
00:09:27,280 --> 00:09:31,900
We're going to be able to write a message and upload it using our data service it's going to be super

140
00:09:31,900 --> 00:09:32,720
super cool.

141
00:09:32,830 --> 00:09:34,840
Let's head over to that video right now.

142
00:09:34,840 --> 00:09:35,900
I'll see you there.