[MUSIC] All right let's go an edit and fill out the edit hobbies view controller now just its UI So we're going to put in a couple of collection views which you can search for. And make sure that you pick collection view and not collection view controller. And we'll put one end here up at the top, and this one needs to be kind of big. And we'll use the dotted blue lines again to help us line everything up. Make sure it touches the dotted blue line on the left and the right and the one at the top as well. Okay, so that's probably big enough. It should take up about maybe 2/3 of our screen, give or take a little bit. Now we need another separator line, so I'm go and copy it from my view controller that I have over here. So that's this one, and I'll say Cmd+C to copy it, and I'll come over and select this view controller, and Cmd+V to paste it in. And drag it into a nice place right below the collection view and use the selected position when that horizontal dotted line appears. Okay, next we need this my hobbies and this collection view again, so I'm going to also Cmd+C those to copy them. And then come over here in command view to paste them in and reline them up. And then on this view we want our collection view told you a little bit further down so let's line it up with that bottom dotted line. And I'm going to hold down the alt button and coy my hobbies label and put in that second instructions label. So I'm going to double-click into here and say, tap a hobby to delete. All right, so I hit Enter to set that and then I'm going to re-line it up with the center. And we should be doing pretty well there. Okay, we also need to put in a prompt and a label and our navigation bar on this view controller. So again, I'm going to tap into the navigational item and the title I will say choose up to three hobbies and for the prompt, I will say scroll up and down top to add. Okay, and then again we run into that same issue where our navigation bar gets a little taller. So we're going to come over, drag the collection views handle so that we can make the size a little bit smaller and line it up with that top dotted blue line. So that it doesn't get covered up by the navigation bar on the top. Okay. So now, I think we have all of our UI on the screen here. Yes, this is looking pretty good. We're going to want to do our same little trick again, which is to use the triangle button down here in the bottom right corner and say for everything, all views on the view controller we set to suggested constraints. And then, we'll want to make sure that our separator line stays two points tall. So I'll hit this pin button, in the bottom right corner. And click the width height check mark, and it will add one constraint. And we should be doing pretty well. So let's run the application and see what it looks like. And we should see when we click the edit button, since we put this segue here, it should take us to the EditHobbiesViewController. All right, so it does our collection view up here at the top is there. Our separator line is good and it's a skinny two point tall line. That's good. My hobbies, tap bottom to delete and our second collection view down here. It's a little bit too far spaced out though between all of these, so let's see if we can fix that up. Okay so we have the collection view has bottommost space to view which is this line this great dark green line. And if you select the dark green line it has bottom space to My hobbies. If we select My hobbies it has bottom space to Tap a hobby to delete. If we tap that it has bottom space to collection view. And if we tap on the collection view it has bottom space to Bottom layout guide. All right, so let's take a look at the top space to the top layout guide. That looks good. That we don't want to take to be equal to 297. So, if you see this height equals 297, we should delete that. And then it's glued to to of the page and glued to the top of that gray separator line. So then if we, removes the constraints on its height, it should be able to scratch and fill up the rest of the screen. So, let's run it again and see what it looks like. Okay, there, so now our top collection view takes up most of the screen and this line. And these two labels here on the collection view look spaced out, how we expect them to be based off of our storyboard. All right, and I have a little typo on top here. Excuse me. So tap on the navigation item over here. And go to the attributes tab and check issues. Guess we have is okay, good. So we know if we're in the top collection view then we can tap a hobby to add it. We know we can, we've, I told you in the demo that we can only have up to three hobbies. So if we tap a hobby down here from the bottom collection view of my hobbies then you know that will be deleting it so we have space to add another hobby. All right, so we have two out of our three views looking pretty good. Let's go and now work on the neighbor's view controller which has our map on it. So again we're going to have our separator line, and the My hobbies prompt, and the collection view down here. So I'll select those from one of the view controllers that I enabled already. And Cmd + C to copy them. And then, I'll come over here to this item 2 view controller it says right now. And Cmd+V to paste them in there, and then I'll drag them into place, lining them up with the dotted blue lines, like you see here. All right, now I need to add a map view. That takes up pretty much the same amount of space that the top collection view in this other view controller take up. So, I will search for a map view down here, map view. And I get a map kit view and they want to again line us up with these dotted blue guidelines. And make sure you line them up on all four sides with the dotted blue guidelines, so that stays good amount of space away from the top, left and right. And a good amount of space away from this separator line, and so now we're ready to do our trick again. We come down and hit the triangle button, and we say for all views in view controller we set to suggested constraints. We're going to click on this gray separator line, pin its height. Let's make sure it stays always only two points tall at one constraint. And then let's run it and see how it looks. So again you can run by hitting the play button, or command r on your keyboard. So here's item one. I hit edit. We go into the edit hobbies decontroller, so that's good. And you notice I get this back button for feedback to the [INAUDIBLE] controller. And if I hit item 2, then we get our view with our map. It looks like there's a little too much space again here, so we should know how to fix that. If I go click on my map and look at the size inspector again, it's trying to constrain its height so that it never changes. We'll just click on the height equals constraint and delete it. And we see here that it's glue to the bottom of the view called view, which we know is our separator line, and its glued to the top of the page. So we should expect that it looks good now if we run the program. All right, we click on item two and now the map takes up the screen like how we'd expect based off our storyboard. All right, great. So we have the main Staples of our UI, for all three of our views and our whole application then. There is just a couple more things that we have to do. We have a little header that we can put in here to let us know that all of the hobbies are in the technology category for now, but we'll get to that in a little bit later. [MUSIC]
