Hey everybody this is Caleb with slopes.
And in this video we're going to go ahead and build out the interface of Matt Visi in our pixel city
app and we're also going to enable it to work by setting the delegate and conforming to MKM that you
delegate.
So go ahead and pull open your X could project just like we left it last time and you're going to go
ahead and open up Main storyboard let's build ourselves a user interface so to begin you know what I'm
actually going to show you really quickly.
I have a mockup here from our designer Evan and if you show if I can look here we have our our home
visi.
We have a nice view here it's orange.
We have a label.
We have a button and we have a map view.
OK.
And also if you haven't already you can download these assets to drag into the project in the source
code from the very first video where I gave you an introduction to the app.
So go check that out go download it to your to your Mac using either the slopes out for Mac or you can
airdrop them from the slopes iOS app to your computer.
Pretty cool.
So anyway these assets are for the button.
Ok the center map button as well as a close button which we may or may not use.
I haven't decided yet anyway so go ahead and go into that asset Scott X-C assets folder.
Drag those in and those are now available to us.
Wonderful.
So go back to your main story board and we are going to start by adding the furthest back most element
which is going to be the map view.
So go ahead and search for market view and drag it on.
All right.
So go ahead and position it like so drag the corners down to the very bottom.
We want it to fill the hole screens.
We get a nice beautiful map view.
OK.
And by the way we're using Map kit and map use just because Apple's made it really easy to show location
to show routes and destinations and drop pins and just lots of really nice cool built in stuff that
Apple has just made for us it's available and it's right here for us to use so why not.
So go ahead and select that and click the pin button.
Now we're going to pin it zero from all sides and add those four constraints.
OK so that's good to go next.
We're going to go ahead and add that orange banner up at the top and to do that we're going to just
search for you I view and we're going to drag on a view.
OK.
Stretch it so that it fits the entire width of the screen and pull it whoops pull the bottom up here
so that it's about 70 tall.
That's pretty good.
That leaves about I don't know 50 or 60 points below the status bar which is what you want.
You want to leave a little bit of room so it doesn't seem too squishy.
And now we're going to change the color so go into the identity inspector select background and the
color I'm going to use is this orange color which if you want the hexadecimal value that's ef 6 AA 6
2 3 6 6 2 3 and you can get the same color that I'm using which would be kind of cool and we can be
like twins.
Anyway moving on.
So let's keep this in its place.
Let's select the pin button.
Oh that's weird.
Undo that I think I bumped something that is not correct.
All right.
Sorry.
So select the view.
Select the pin button.
We want to go zero from the left zero from the top and zero from the right as well as 70 tall.
Add four constraints and that will stay there.
Next we're going to add a label.
So go ahead and search for you I label and then drag and drop that right on the view.
Make sure it's centered like I did by using the little snap guides.
They're very helpful and I'm going to stretch it so that it's a little bit wider so we can fit more
text in there and we want this to give the user a clue of what they're supposed to do or not give them
a clue but explicitly tell them.
So I'm going to say double tap.
Whoops double tap to double tap to drop a pen and view photos ok and it looks like we need a little
more room.
That's fine we can stretch it so that it fits.
Cool.
Let's go ahead and center this set the alignment to be centered and let's change the font system font
is ugly.
So let's use a font like Avenir.
Next.
Hey that's my favorite font.
If you've watched any of my other courses you know that I love this font.
It's true I do.
OK.
I think bald is too dark.
I'm going to change it to be demi bold.
I dropped the font down to size 16 and I'm actually going to make this white.
I think it stands out nicely on the orange.
But what we want to do is we want to center this and lock the size so that it does not ever change although
we want to keep in mind other screen sizes as well and we'll check for that in just a second.
But for now go ahead and give it a fixed width and height like so.
And then we're going to go ahead and click on the alignment button and we're going to align it horizontally
and vertically in container which for this label is our orange view.
OK add those constraints and that should be good to go.
But let's check to make sure that this looks OK on an iPhone 7 plus OK great and an iPhone 6.
It looks like it looks all right.
It's pretty good.
It's not squished it's not cut off.
Obviously the s e is going to be the next iPhone to go so it is important to keep the members in mind
when designing.
But remember that most of your users are going to be using iPhone 7 or iPhone 7 plus or iPhone 6 iPhone
6 x whatever.
But those two screen sizes are going to be much much more common than the iPhone s e.
OK that will be the next iPhone to go.
So it is important.
But just bear in mind that it's not going to be around forever.
So I like to design on the iPhone 7 just because it gives me kind of a good intermediate screen size
so I can design with both smaller and larger 7 plus in mind.
Ok cool.
The last thing we need to add is a UI button.
This app is pretty simple The interface is pretty easy to design.
So there's a button.
We dragged it on there.
Let's get rid of that label.
Press enter and the image we're going to set to be location button right on that's obviously way too
small.
So let's fix that by going in and we're going to pin this zero from the right.
Of course it's constraining to margins.
And then 20 from the bottom but we want to make the size a bit bigger.
So let's try 50 by 50.
Let's see how that looks.
Yeah.
You know what.
That looks great.
I think that'll work.
So now we have a view we have a label a button and a map view.
OK that's pretty much all we need for our user interface.
But you know what.
There is one more thing that we need to do now when we are in our map view later in this app and we
double tap it's going to drop a pin and then what it's going to do is it's going to animate up a nice
view that holds a collection view and we're going to download all of our images into that collection
view.
So we actually do need to add a little hidden view down here that's going to be animated by us changing
the bottom constraint of this map view.
Now that might be confusing don't worry we're going to take it slow.
So I'm going to go ahead and just drag this up for now.
Bearing in mind that that constraint is there I'm going to add in a UI view and I'm going to actually
drop it in right here.
OK.
Drag it down and just follow me here I'm going to make it fit in the bottom of this view.
All right.
And I'm going to go ahead and just make this one pixel high.
It's selected but I'm actually you don't know let's make it zero so it's not showing up at all but we're
going to go ahead and pin this zere from the bottom zero from the start zero from the left zero from
the bottom and zero from the Right.
Now I'm not going to give it a height constraint but I am going to go ahead and just pin that to the
bottom.
OK.
Now this is actually still constrained to the bottom of the Super Bowl.
But what we're going to do is with our view here we're going to pin this to the bottom of the view and
you know what we might actually need to make it one pixel high to do that.
So let's see
well OK so let's try removing the bottom view constraint from the map view.
I just clicked on my map view and I clicked on the bottom view constraint.
I deleted it.
And now with our hidden view here I should be able to pin it but I'm still having trouble let's see.
OK.
Find that view top space leading space trailing space.
It's one pixel high.
That looks good.
Hey I should be able to pin this oh you know what it looks like I was off of the view.
I was not able to be seen.
So let's go ahead if you have that same problem just bump it up a little bit on the y axis and we can
always fix it later.
But go ahead and click the pin button and we're going to actually pin it zero to the bottom of this
map view.
OK.
And you'll see that pulls it down nicely.
But what we need to do is we actually need to put this back down to where it was case 667 and we can
actually make this have a height of zero.
So it is there but it's not really there.
I'll show you why in a second it's just going to make it really easy to animate that view up and hide
it at will which is what we want to do in this app.
So now that that's done we're looking good.
We're going to go ahead and we're going to make some outlets in our application so that we can communicate
with our Matthew Kaye as well as other components.
So go ahead and click the assistant editor and get rid of did receive memory warning.
We're not going to need it.
So next let's go ahead and do some Iby actions for the button.
OK.
So right click on the button.
Drag and drop.
Choose action.
And we're going to call this center map button was pressed.
OK that's this button will center the map on our users location.
We don't need to do anything in it yet.
That's cool.
But what we do need to do is we need to create an IP outlet for our map view.
OK so right click the map view and drag into the view controller and call this map view.
Believe it or not connect it with an enter or by clicking the enter button or sorry the connect button.
And you'll notice there's some problems.
Check it out.
It says use of undeclared type M-K map view and that is because folks we have not yet imported the map
kit framework.
So man I wish I could type import map kit and let's see or we could go.
Let's take a look.
OK it looks like we're good to go.
Let's build it to an iPhone 7 plus And let's see what happens.
There it is our beautiful simulator awesome.
So as this is loading I just want to remind you we just added our nice user interface we just added
a map view you view some buttons et cetera et cetera.
OK.
Very cool.
So it looks like we have a map view.
OK.
We have imported the map kit framework.
We have a map view that is showing the map but we are not yet able to use this map view because we actually
need to conform to the M.K. map view delegate that's going to allow us to use all of the functions so
we can monitor a user's location.
We can set the delegate.
We can set all of the maps related information that's really really important.
And so to do that we're not going to go ahead and inherit up here we're going to actually create an
extension of this view controller and inherit that way.
So go ahead and type extension that PC and type M-K map view delegate give us some curly braces and
that's going to be good for now.
We're going to come back to it later.
But what we do need to do is we need to set this view controller Matt VC to be the delegate of our map
view.
So get rid of that comment and go ahead and type map view delegate and just make that equal to self.
This enables us to be able to use our map view on this view controller.
OK.
So there are a couple more things we need to do.
Go back to your project here click maynt storyboard and we need to disable a few things on our map view.
So click open the assistant not the assistant.
Sorry the utilities panel and click on the attributes inspector.
Now what we want to disable is rotating 3D view of the compass.
We don't need to see.
We also don't know which is show points of interest that's cool.
Scrolling is a must.
But zooming we need to disable because if you think about it if you use the maps app on iOS If you double
tap it zooms in.
But we're going to be using a double tap to drop a pin so to make it easier on us I just disabled zooming
on the map and we'll set it so that you can see everything nicely but zooming needs to be disabled for
this to work.
So let's go ahead and build and run it one last time.
Let's just double check to make sure everything's looking really good.
It's going to build and run.
And there we go.
OK we forgot one thing.
Use your location.
We want to show that of course.
So let's go ahead and try it one last time
OK.
You'll notice it's not showing up but there there's a reason for that.
We have not yet requested location services and we're going to do that in the next video so.
Awesome job building out the user interface.
Pretty easy right.
In the next video you're going to go ahead and request location services.
I'm going to show you some changes to Iowa 11 specifically and we're going to write a function that
we can center the map on the user's location and do a really cool zoom in animation similar to Google
Earth.
All right.
So we'll see in the next video.
Great job with this one.
Head on over.