What's up guys I'm Jacob blitzed with Dev slopes dot com and in the last lesson we got our our start
running VC all set up and in this lesson we're going to go ahead and work on the log Visi that shows
all of our previous runs.
And hopefully you guys did my challenge and it's already done and you're just making sure you did it
right right now.
So that's what we're going to do.
And but first things first is the most important thing let's pull up our terminal.
And if you're not in your project already you should go there.
And we committed our last branch and normally.
So I would consider that first AVC a feature and you would normally merge it into your master branch
then and you always make sure you have working features and then you can merge them and your master
branches always like a working model of your project.
But since I'm teaching you guys I'm going to create a branch off of the last branch and call it Lesson
2.
So when you pull up on my source code looking you can basically check out any of the branches to see
exactly what we did in that lesson.
So I'm going to go ahead and do a get check out dash be to create a new branch and call this lesson
to
help something.
Let's see status
Oh I put a space in don't put a space less than two.
And now we're in a new branch and if you want to see that do a branch and you will see a new branch.
I'm going to.
Also I have a weird head fire also gets a drop get branch and that's still there.
Stashed away we all know why this is here.
We're going to get rid of it.
There we go.
So now we're on less than two on our new feature branch.
So we are good to go.
And our second Visi is down here and it's called the second view controller right now.
Let's go ahead and just delete that label delete this label.
And let's also go ahead and just rename this Visi right away.
And I'm just going to call this visi.
We can call it run log or run log is good.
Run log Visi and then I also so I copy and paste I don't spell anything wrong.
I change my comments so it doesn't bother me later.
And then over here may actually change the file name and then back to the storyboard.
Select this the bottom of the two table VCDs or tab bar VCs and go to your identity inspector.
And then in the custom class make sure we find out not that where like I don't have it selected.
There we go.
So select this VC and then under custom class it still says second view controller but that doesn't
exist anymore.
So we need to find run log Visi and that is ready to go.
So now let's go ahead and look at our docs.
We're going to have to do the same background.
So we need to put a image view that spans the whole thing and then it looks like we also need a label
for log and then we need a table view that takes up everything from this point down probably and then
we have to make a custom cell.
So we got quite a bit to do here.
Let's go ahead and get going.
So let's go ahead and add a huge view or I'm sorry you I image view drag that on and since it's the
whole background.
I just like usually make sure I drag it close to the edges otherwise it will want to put the constraints
to the tab bar or wherever you want but we want it behind the tab bar because it is the opacity of the
taskbar is not 100 percent so you can kind of see things behind it.
Let's go ahead and set these constraints and they should be 0 0 0 all the way around.
Add those and then go to your attributes and inspector and let's find this image.
It's called background and let's do aspect Phil and that should do it.
And now we need the one we need the the log label just like the run label.
And I'm actually going to copy and paste this and we want to make sure it is 8 from the top as well
so it doesn't look funny.
So I copied that command see and then just come down here and click on the View and command VI and then
we'll drag it Center bring it down here and we'll go ahead and horizontally and container we want it
Center.
And then let's pivot it from the top right there and there we go.
Now you can double click on the label or change it over here in the attributes and Specter whatever
you want and we'll call it a log and we can keep the same font so it matches run right.
So now with that done now we need our table view.
So go ahead and search for table view.
Down here in your object library and you don't want the first one that is a whole control or so like
one of these we want just a table view.
So drag that out and I can't remember.
Excuse me.
Let's check out our docs the table.
OK it goes all the way to the edge.
So we want to drag this guy just below log.
Yeah that looks good.
And we want it to go the whole screen and we probably don't have to go lower.
So our background still shows through since April anyways so just drag it right to the top of the tab
bar and let's go ahead and pin this zero to the left to zero to the right zero to the bottom and 8 from
the label is probably great.
There we go.
So with that being done now we need a reusable table view cells so let's go ahead right underneath table
view you'll see the cell.
Let's drag that onto the table view and I'll add it as a prototype right here.
Well let's see.
Let's click on table view again and make sure the background is clear.
And we also want the separator to be none one prototype is great and we don't want any selection.
I think this is the background we want we want this to clear down here in view.
Yeah.
OK.
So the the content view doesn't change but as you can see on the top where its prototype cells that
went clear when we changed our view the background to clear and our cell is right here and we can make
this any size we want and let's click on that.
And we also see we need this one.
It looks like it needs to be white with opacity.
So let's just go ahead and make this white right now and we'll worry about the opacity in a moment.
Oh I'm sorry.
We want this clear because we can't actually do much.
Shoot me fine.
I'm in the wrong visi.
All right.
So in our cell on our content view our cell needs to be clear.
And it already is up there it is.
And then the content view is also clear this is good.
This is what we need.
It's a little you can't really if you drag things into the cell they have to be in the content view
and our labels are on top and if they were in the content view they would also get the same opacity
as that view.
And we want to avoid doing that.
So we need to add a another view to this.
So go ahead and just type in you view and drag view right into the cell here and see how that entered
the content view.
That's exactly what we want.
We just want it to take up the whole.
So
like so and let's go ahead and Pennis 000 zero and add those constraints and we want it to be white.
But we want the opacity down so let's go ahead and make it like point to and that looks pretty cool
you can see the color change between the background and the cell.
So I think that's good we can always adjust it later if we want it a little darker right now that will
do point three just to see it a little better.
Ok so now on this cell we need one two three four.
We need five labels and I'm going to go ahead and copy and paste this so I don't have to set up the
font again.
And if you come in to we want to paste these into the content view because if it went into this view
the opacity would change and we don't want that see just dragging it around made it into that view.
And it's a real pain in the butt when it does that.
So a lot of times you have to just click on the label that you want
one second put the view behind the label the order of these matters so the lower on the list the more
forward the whatever your add in the view or in our case the label.
So you're going to click on it.
Don't drag it.
You can either come over here to the your size inspector and move the y coordinate or the x coordinate
to move it around or you can just use your arrows if you drag it.
It's going to enter our background view and that's not what we want.
So let's go ahead and just roughly move this right here and this label is going to be our duration label.
So we want it to look like like this 0 0 0 0 0 0 enter.
Click on that and then move it to the right.
And obviously it's a lot smaller font.
So let's lower the font size or attribute inspector click on Tex and let's go ahead and just lower that
14 is probably good.
All right.
So now we're going to use this font size for the distance as well.
So I'm going to copy and paste and just make sure you select the label and use the arrow keys on your
keyboard.
And we're not adding constraints yet because we're going to use stack views in a moment.
And this just needs to have a default value.
Right now 3.1 miles seems like a decent run right.
And now we need our
our pace.
So this middle label is our pace and it's a little larger than our other fields and it looks bold.
So let's go ahead and add that.
So we'll copy and paste this guy selected and then just move it towards the center.
There's the center and we'll just show two time spaces so minutes and seconds.
That's good.
And then let's select that and make the font bigger.
I would say 18 maybe 20.
And let's also see what semi bold looks like.
I think semi bolds the one we want.
So that looks good.
Right.
And now let's copy and paste the three point two and go ahead and just arrow that underneath and this
is going to be our dash.
You know our time per mile.
Our average pace.
Don't worry about centering it too much just get it underneath and just do a forward slash and my and
I think it's good that it actually looks a little smaller to me.
So let's go ahead and check the font and maybe let's just make it 12 that looks good.
And then lastly we just need our our date label.
So let's go ahead and copy and paste any of the non bolded labels and then let's just go ahead and arrow
it over all the way over to the right of our cell.
And that looks good.
And let's see let's put the data in.
It's going to be 0 6 1 5 7 10 and that looks quite a bit smaller and a little further off the edge.
So let's go ahead and select that move that off the edge and let's just tone down the size a little
we'll make it 12 like a smaller label.
All right.
So that looks good.
Now we have to just put some constraints on the stuff and I believe we already have them for our view
to make sure you can always go to the size inspector.
And yeah we already have them on our our our white with the less opacity view.
So we just have to worry about our labels now.
So I'm going to go ahead and just select the zero the duration and total mileage here holding command
and then go ahead and click on embed unstacked view
and there it is.
So that's done.
And let's do the same thing.
Command click to select both of these and embed this in a stack as well.
And then obviously this guy doesn't need to be in a stacked view.
So with this label we want to add about 8 pixels from the right side or eight points so go ahead and
just set this one to eight.
And we'll hit OK and then let's go ahead and just make sure it's vertically centered in container.
And that one's good.
And now let's just select our other stack we use over and the scene here and this guy we want to just
be horizontally and vertically center.
And this view and then select the other stack.
And we want this one pinned eight from the left so eight points and hit add one constraint and then
let's go ahead and also make sure it is yeah vertically center and container.
All right.
So now if we wanted spacing in between these labels you could just select the stack view and go to the
attribute inspector and increase space here.
But I actually think it looks good the way it is.
So I think we can call that down for now and then over here in the scene let's click on the table view
cell and we need to go to the identity inspector
that's not what I'm looking for.
Oh here we are.
I'm sorry it's an attribute inspector and see this identifier.
We need to name this so we can use it in our code later.
And I always make sure I name the cell the same as the view that I create.
So I would make sure we name it something like like run log.
So I'll just call it exactly what it is.
So we'll say run log because it belongs to the run log we see and it's the cell.
So call it run log.
So sorry about that.
All right.
And I think we are done here except for the tab bar.
We need to set that we need a set image.
So if you select the tab bar at the bottom and your attributes inspector you'll see the bar item and
it's second.
We need this to save my log and then the image needs to be the my log icon that's gray and there we
go see our log and they're showing a blue because they show you the excuse me they show you the selected
color.
And later later on in a couple of lessons I'm actually going to show you how to override the selection
the selected color and set it to our own blue because if you look at the designs it's a lot darker but
we'll actually do that in code later.
So with that being said I think this lesson is done.
We got the log cell all hooked up and ready to go.
And we got the table view there and we got the whole second tab bar view and in the next lesson we're
going to do the third view and that is the current run view where we're going to do really cool stuff
like a custom slider and a lot of cool string override.
So I would like you guys to try to also build this UI without watching the lesson and then you can always
watch the lesson if you need hints.
And that would be the best.
And before we're done let's go ahead and pull up that terminal and do a get ad period and then a commit
dash am and we will say set up the UI for the log AVC answer.
And there we go.
So we're using get we're all committed and I will see you guys in the next lesson.