What's up guys I'm Jacob Bledsoe it slopes dot com and hopefully you guys dove in and started working
on this PC.
All we're doing in this lesson is just setting this all up and we'll do will be done.
This is the last UI thing we're going to be adding before we jump into code when the exciting stuff
begins.
So go ahead and open your project up and let's pull up our terminal and the way I got the spotlight
up like that was just command space bar.
And I'm going to create my new branch called lesson Re.
So good.
Check out Dasch be less than three and it's OK if you're not changing branches between all these lessons.
You don't have to.
It's just always very important to commit and make sure your work is saved in between major features.
I'm just doing one for every lesson so you can get my work at any point.
So that is done.
Now let's go back to our storyboard and we need a third view controller now.
And you know what I just realized we need to fix this.
I never really named our second view controller so you guys are probably yelling at me in the last video.
Let's go ahead and just make sure this files renamed to run log.
VC I might not have done it I can't remember now and then go back to your storyboard.
And with that view controller selected go to your identity inspector and run log VCs there.
Strange I guess weird things have happened.
All right I'm glad that's fixed.
I musta just forgot to change the file name and now that I'm looking at it let's go ahead and drag our
view controllers into our controller folder.
So it's a little more organized.
OK.
Back to our third VC.
So when we hit the start the start run button right here.
It's going to go into the current run screen.
So this view controller with the map view is going to segue to our current run visi.
So go ahead.
And in the object library down here type in the view controller and now we want the top one we want
a full view controller.
So go ahead a click and drag this to the storyboard.
Just like that.
And now we have our third storyboard and what's really cool.
Let's go ahead and click on this start run button and if we just hit Control drag from it and select
this view controller we can say.
Show.
And now just pressing that start button will segue to this PC and that's exactly what we want.
One thing we don't want is this tab bar down here right.
Let's just go to our.
So select the view controller.
Oh here we go in the attributes inspector just bottom.
We don't want to hit none.
So it's not there that will get in the way of our designs and your designer will come looking for you.
So let's go ahead and look at that design again.
So same as the other two view controllers.
We need another UI image for the background.
And then it looks like we just need another label at the top just like the log and start run Visi and
then we need a label for a duration label for pace and a label for distance.
So we need everything we put in our log.
VC basically.
So let's go ahead and get started.
And then we need another view here just to show some opacity to make the screen prettier and then our
cool slider buttons of course.
All right.
So back to this let's go ahead.
In the object library search for you I image and drag that onto the storyboard and make sure you drag
it all the way across the storyboard so we can make sure we pin it to the edges and not the margins.
And if you do accidentally have it you know before the margin you can just make sure constrain the margins
is unchecked.
And it should go all the way forward so add those four constraints and in the attributes Inspektor find
image and click on background and then content mode we want aspect fill.
All right cool.
So that is done.
Now we need labels.
So we need one that says On run and I'm just going to copy and paste the run here and make sure it's
eight points from the top so the so it doesn't look weird when you're moving between VCs.
So I'm going to go ahead and just center it there and double click on it and say on the run and let's
go ahead and pinnate eight from the top and then we also want it horizontally center in the container.
And that one is done.
Perfect.
OK.
Now we need a label for the duration.
So let's go ahead and I'm going to copy and paste again because I don't like setting up the UI or the
changing the font.
And since you already changed it.
We're good.
So copy control C Control V.
There we go.
Drag it to about there and this just needs to be a duration so we need hours.
I have to stop holding Shift when I do that hours minutes and seconds.
Right.
And that looks like it's bold.
So let's go ahead and change the font to semi bold and let's make it bigger since the screen this is
the only in my text box is stopping me from making a bigger.
Let's see.
I think that looks about right.
I think that's good.
So we'll shrink that text box down.
All right.
That looks good.
And now let's go ahead and just copy and paste this two more times.
This will be our pace and then copy and paste and this will be our distance.
OK.
So our pace is just going to look like 0.
Just you know minutes and seconds.
Obviously if you're going slower than that and you have a high pace it will display it.
But just for now default text is just fine.
All right.
And then I'm going to copy and paste the on run again because I want unbolted versions and right above
the pace in the middle it needs to say pace and I think we should have it say average pace.
So that isn't confusing.
So I'm just in a avi G dot pace and then go ahead and copy and paste this again command c command V
drag it down.
Don't accidentally drag the paste.
And this needs to say forward slash Mighell
or forwards slash kilometers.
But since I'm in the United States I'm going to stick with our our Miles.
OK.
And then go ahead and copy and paste this label one more time and drag it right above.
Duration.
Or I'm sorry distance and let's just call this distance and distance needs to be displayed as zero point
zero.
And the miles is actually smaller and not as bold.
So we need to copy and paste another nonbelief label and we will just whoops zoom way out apparently.
So go ahead and click on your miles I think.
There we go.
I actually dragged it behind.
The other one.
So go ahead and just put my am I there for miles or K.M. if you're doing kilometers and we need to just
change the size keep drag in this go change the size of this a little smaller from 18 to probably 14.
Yeah.
And I think our overall distance numbers should be bigger.
There are 25.
Now let's make them 30 looks good.
And then our average pace is the biggest So let's go ahead and up that let's try 40 yeah that's probably
good.
Done.
And I think that looks pretty good.
All right.
So now we can go ahead and make some stack views so I'm going to go ahead.
Control z.
Don't do that.
I mean a command selects and then command select miles down here and embed in stacked view.
And as you can see the design has it aligned at the bottom.
This is center so we can just go ahead and say alignment bottom but that's too far down the out went
way below.
So let's change the alignment.
It's in the attribute inspector by the way.
And let's change it to first base line.
There we go.
And that brings it to the bottom of the zeros there.
And it's a little closer so let's also add some space in I think three points looks good.
All right with this stacked view selected go ahead hit command click distance and let's embed these
two now in a stack of you.
And there we go.
That looks good to me.
It looks like they're spaced a little more so we'll add some space in the attributes.
Inspector that's probably good.
And now let's go ahead and do the same thing for average pasear command click.
All three of these labels and embed and stack view and spacing is a little greater than this.
Let's go ahead and space it out.
I think three looks good.
All right.
I think that is done for now.
Now we need our little slightly you know slightly transparent white view.
So let's go ahead and the object library search for you I view and you don't want a view controller.
Make sure you just grab view and drag that onto the screen onto the storyboard or view controller.
I mean now since we did this last.
This actually moved it in front of everything.
And we don't want that.
So go ahead and just drag this to kind of where we want it.
I think that looks pretty good actually.
We'll do that and just we're just eyeballing for now always we can always do two weeks later and see
that the view is in front.
And like I said the lower on this list that is where it goes so we want to actually drag this up to
right above background.
And you just can't see our labels because they're white.
So now with the view selected Let's go ahead and find the background and the attribute inspector.
And we probably want to make this like I don't know of oh it's two point three.
Yeah that looks really good.
All right so now with that done we can.
Now this is the same situation.
We don't want these this deck view to enter this view because the opacity will transfer to our labels
and they won't look crisp.
They'll have the same point too.
So they'll be slightly transparent.
So we had to be very careful with moving these around.
But thankfully it's going to be super easy because all we want to do is center it to this view.
So with the stacked view selected hit command and also select this other others that or this other view
we just added and then over here in our A-line at the bottom we want horizontal centers and vertical
centers and that will align them and you don't want it to container because this is an inside of this
view.
We just want these centers to match each other and add that.
All right.
Now we're getting a bunch of crazy red lines because this view that we just added doesn't know where
to be so we need to pinnate zero from the right zero on the left add that.
And then we also need to start a line aligning these guys click on the duration label and let's make
sure that is horizontally center in container.
And let's see I want to pin it off the run label and I think I think that is good.
Thirty six is fine for now if we have to change it we will.
OK that's fine.
And then let's go ahead and
pin this off of valuable.
We'll just do the forty two point five.
That's cool.
And let's see if we can't really finish this yet.
OK so now we just have to we have all the labels done now we need to work on our our slider our slider
view here.
So let's go ahead we need a image view.
So down here in the object library go ahead and search for a UI image view and drag that out here and
now in the attributes Inspektor you want to select the image and let's find the
it's called something outline or run and run outline and there we go.
And then we also want to make sure this is aspect fit right.
And I think this is pretty good.
We want to make sure the box stays
really close to its edges though.
Okay I think I want to make it just a hair smaller think something like that is good but we just want
to make sure the image is as close to the edge as possible because we actually use the edge of this
view for knowing where the slider should be.
So I think that's good.
Let's go ahead and pin this right away or I want it horizontally center in the container.
And I know you're thinking that's weird it's going to be off like the button.
Basically the the pause button and this should be center together.
And what we'll do is just set the offset for this will we will click on this constraint later and we
can actually just slide it over and we'll do that right now.
So let's just make it like negative 25 for now.
And I think that's good.
And then as far as the C is yelling at us because it wants probably to know its position and down here
it definitely needs to move down.
So let's move this down.
All right and we should probably I don't want it that close.
Let's pin it here.
Let's pinnate 40 from the bottom 40 from pinnate 40 from the margin that's fine.
Yeah that looks good.
We're not getting yelled at anymore.
And so now we need to add that pause button.
So go ahead and search for button in the object library.
Drag that out here and in the attributes inspector just delete the label button.
And then let's find the image called pause button and that's done.
And I think we actually are good with this size let's just move it closer.
Make sure it's center.
I think that looks really good.
Yeah.
I mean maybe a little closer but I think we're good there.
So let's go ahead and select this and then do a controlled drag to this outline and say horizontal spacing.
And that's what we want that's perfect.
And then go ahead and with that selected hit command again and select that view.
And we want to make sure that are vertical centers are aligned with each other and we have that that's
perfect.
This is exactly where we want it.
And both sides look pretty close.
And like I said if it's not perfectly center we can just mess with this constraint to offset it however
we want but I think that's good for now.
OK so now we need one we need first we need a label for it says and run on there and then we also need
another UI image view to bring that slider image in.
So do you I image view
drag that this can now let's see.
I don't know if it will.
We don't want this to be on this view.
Whoops.
So with this imagery you selected go to the attribute inspector and then let's find our end run button.
There we go.
And we want it to be aspect fit Co.
And let's just go ahead and make the smaller we want to fit inside of this.
I would say it's pretty good.
Maybe like now we're just doing this by we're not.
There's nothing precise right or wrong it's just how we want it to look.
And I would say that's that's really good.
Maybe it's a little further from the edge let's make it a little smaller I guess.
OK.
So that looks good but looks like that perfect.
So let's go ahead and what we want to do is select that view and then hold command and select the background
view and we want these horizontal the vertical centers as well are right and now we want to do is make
sure the backgrounds is not selected anymore and select this button and do a controlled drag to the
left and just to the background we don't want to accidentally go to the background here.
You want the horizontal space into the the end run outline and do horizontal spacing and there we go.
And it kind of moved it over which we don't want.
So if it did that to you we're just going to find this constraint.
And if you hover over it it will highlight.
You can click on it and the constraint is negative 73.
So if we keep going negative it moves it because it pinned it from the right side for whatever reason.
But that doesn't matter too much in this case.
So we can just go ahead and up this number and move it so it's exactly what we want it again.
And I think that's good.
There we go.
So now we need our end run label.
So go ahead and object.
Actually we're going to just copy and paste copy and paste the distance label here.
Copy and then right here paste.
All right.
And we want to make sure that this label in the scene over here in the seen tree is behind.
So on top of the end button so it slides over it.
All right.
So let's go ahead and just click on that and this will be called and run.
And I think that looks pretty good.
Maybe it's a little smaller let's just change the font to 16.
That's great.
And now we want this to be censure.
We don't want it center to the background view but we also don't want it referencing the whole visi.
So I'm going to select this label and then select the background view and I'm going to go ahead and
say vertical and horizontal centers.
And it's going to move it over.
But then with the label selected just select this horizontal constraint and let's just go ahead and
increase it and it'll offset it to where we want it and we'll just eyeball it to almost looks center.
And I think that looks good.
Maybe a little too much.
Make it like 28 points.
So I think that's good.
And now we just have to worry about where our stack views are.
No just this view.
All right so this view right here.
Now we need to let's see we need to just pin this to the label or to the stack be below it.
So with this view if you have trouble clicking on it you should just pin it 41 below it's fine and it's
all still red because this label also doesn't know where to be.
So select that.
And let's just pin that now to the slider switch which is 1 0 9 right.
And let's see it looks like this deck view isn't happy.
Oh we need to make sure it's Center in.
So go ahead and do the alignment constraints and we want to horizontal in container.
There we go.
Now let's just do a quick run through make sure everything is happy nothing's yelling at us.
All right.
Sweet.
So that is this video.
Before we wrap things up let's go ahead and pull up.
Terminal do a get ad period get commit dash em and we will call this the current run we see you.
I set up and that is good.
And we will call is video done.
And if you want to jump ahead you guys should set up the the actual VC and connected to this storyboard.
We didn't actually create the file yet so you should create the VC.
And what will what I'm going to call it is current run visi.
So if you want to keep your naming conventions the same as me it will be current run Visi and I will
see you in the next lesson.