Hey everybody in this video we're going to create MVH see it's the view controller that's going to house
the profile of the user that is logged in and we're not going to totally completed in this video because
that's actually going to be part of a challenge.
At the end of this section is for you to complete the profile page based on my specifications.
So we're going to start though by building out a part of it and leaving space for you to expand it later.
So go ahead and pull open your X code project and we're going to actually do most of our work FOR THIS
VIDEO IN MAY NOT storyboard.
So go ahead and zoom out and we're going to drop on a new View Controller just like that.
Now we are basically going to be doing a similar thing to the previous two of you controllers that we
have here by basically copying and pasting the tab bar here.
We're going to.
Or not the tab bar but the pseudo navigation controller.
And then of course pinning it to the left top and right and giving it.
Well it already has a fixed height constraint.
We learned that in the last video.
Add three constraints and now that's in place.
This of course is going to be a different label.
It's going to say me and you know what I'm going to zoom in so you can actually see that.
There we go.
It says me and this button is going to be used to log out because if you're logged in you can see this
if you can't or if you're not logged in Remember the controller pops up.
So we're just going to change the image to log out.
Icon OK.
Pretty cool.
We're going to use that to cue the log out to happen.
Very cool and OK.
So let's go ahead and let's build this out.
We're going to set the background of the view.
Select the view and the background is going to be our dark gray color.
It's not the right one.
The dark gray is much darker not that one of those are the same exact color.
Keep clicking the same one.
OK.
Very cool.
So we're going to set it to be equal to our dark color there.
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
to go right here next to the navigation up at the top and it's going to go down to about the middle.
And it's going to leave some room for a table view later on.
So let's go ahead and let's change the background color of this to our slightly lighter gray.
That way we still have kind of a bit of an appearance here of the view at the top.
And let's pin this zero from the left zero from the top zero from the right.
And let's give it a fixed height of 275.
That looks pretty great.
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
to show the users username.
So go ahead and type I image drag on a UI image view and we're going to make this a square.
So go ahead and make it 128 by 128 and now you know what let's make it a little smaller.
100 by 100 is probably good.
Yeah.
OK.
Go ahead and set it there.
Set the image property in the in the attributes Inspektor to be default profile image like so.
And just because we're going to set it to be aspect fill and we're going to clip to bounds because if
you were to put in a real image you would want it to clip to the bounds you would want to fill to the
aspect ratio.
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.
Give it a fixed width and height and add three constraints.
Now we're going to keep it in the center by going to the alignment button click horizontally and container
and we'll keep it right there in the center.
Very cool.
Next up let's go ahead and add a label drag and drop it.
And of course if it's going to be similar to this one we need to set Menlo size 18 and change it to
a different color because black on Gray is kind of hard to see of course stretch this out so we can
actually see the whole thing center of the font and let's change it to custom search for Menlo.
And we go change it to size 18.
And I think it would be cool to have a contrast here of green to blue.
And let's go ahead and just set the user at break dot com.
OK that's like are our fake pseudo e-mail here.
And let's move it a little bit closer to the picture and let's pin it 20 from our image 65 from the
left and right.
And let's give it a fixed height of 20.
Add four constraints and it'll stay in place just like that.
Now we're going to go ahead and we're going to add a UI table view so drag that on.
And let's go ahead and pull this all the way down and let's pin it in place zero from the left right
bottom and top.
But we need to manually change it to 0 from 8 and add four constraints.
Very cool drop on a cell and we're just going to leave this one at its default height.
That's fine.
No that's not true maybe a little bit higher maybe 50 or so.
Let's go ahead and set it to 50.
And of course select the table view itself and set the row height to 50 so that it reflects that change
the background of this table view to be our light gray color.
So if you scroll down background we're going to set to be light gray so that it matches the rest of
the View Controller.
And now what we need to do is we need to find a way to get this Tabar controller to include a third
tab and show this view controller.
It's really easy though so check it out.
Now what I need to do is I need to go from my Tabar controller right click and drag to this view controller
and let go.
Now you'll notice there are traditional segues but there is a relationship segue here called view controllers.
We can add MV C by clicking and look at that.
It adds a third view controller very very easily.
So now of course we need to customize this so that it shows the right image.
So click on MVH see and click on the little tab bar here.
Now the selected image of course if you scroll down me tab icon adds it right there.
And just like we learned in the last video you also need to set it here.
OK.
Me.
Tab icon and now it shows up on both.
The title says item we don't want it to say item we want it to say me instead.
And look at that we now have a third view controller that is in place on our tab bar.
So let's go ahead and let's build and run.
Let's see how that works.
See if it shows up the way we want.
And here we go.
It's going to build.
It's going to pop open.
And look at that we have all three of you controllers we can select here and make it show.
That is awesome.
So all three show up user shows up here with their e-mail and their image.
That's great.
And what we're going to do next is we're going to give this a swift file because right now it doesn't
have a controller class it's just kind of showing up visually.
We need to create a controller class so that we can actually interface with this and modify what we
need to modify.
So let's do that by right clicking on controller click new file.
And of course this can be a Cocco touch class.
We're going to subclass you view controller and we're going to call this MVH see press enter or click
next.
Then click Create.
And while we're at it we can just get rid of this nasty boilerplate code Rowse and go back to the storyboard.
After that we're going to just set the identity of this controller to be MVH see.
And now we have a code file that we can actually do stuff with we can actually set it up so that it
looks good and we can add some IP outlets and some Iby actions and actually you know what.
While we're at it let's go ahead and do that now.
We're not going to write the code necessarily just yet for any outlets or actions but let's go ahead
and let's at least set up the connections.
So select this new controller then choose automatic.
And now for the image we're going to want to set an IAB action for profile image.
We're going to want to set an action for e-mail label that looks great.
We're going to want to set up an action for the table view that looks good.
And let's go ahead and let's set up an Iby action not an outlet for sign out button was pressed.
And that's where we're going to write.
Sign out code to actually sign out our user going to get rid of that comment that we do not need.
Awesome guys so this is great.
We are setting this up the way that we want and in the next video we're going to dive right in to feed
the sea a little more and we're going to basically set it up so that we can push on this create post
view controller button and it's going to pop up the Create post.
We're going to be able to write a message and upload it using our data service it's going to be super
super cool.
Let's head over to that video right now.
I'll see you there.