Hey everybody this is Caleb with slopestyle.
And in this video we're going to continue building out our app interface.
We're going to build the interface for Trending feed visi.
We're going to at our table view we're going to add some labels we're going to build in the visual part
of the table cell.
And then we're going to connect everything with Iby outlets.
So let's go ahead and let's pull open our project just like so and let's zoom in on trending feed Visi
and we're actually going to set the background back to white like we had it just like that.
Very cool.
Now we're going to also go ahead and add in a table view just like so.
OK.
Let's go ahead and drag it so that it stops right here at the top of the trending bar.
And then we're going to leave some room for a label for the app name.
Cable will do constraints in a second.
So just go ahead and type UI.
Whoops there we go UI label.
Drag it on right there and I'm going to change the font to custom the family to Avenir next.
And we're going to do let's try bold and let's do sys 20.
It looks pretty good.
All right let's go ahead and center the font and let's set the color to be this nice blue color which
if you're wondering well maybe a little darker darker looks good.
That's 4 7 7 6.
If you want to use it you are welcome to.
And that's great.
OK so let's go ahead and leave it like that but we're going to rename this versey because that's the
name of our application.
Now you're probably noticing there is a safe area.
OK and that is where our content will show up.
Now this is where the status bar goes at the top of the iPhone so they're just helping us to basically
pay attention to where the status bar is and not have content that is over the status bar.
So as you can see that's nice and centered where it will be visible beneath the status bar so let's
go ahead and let's pin this the way that we should.
OK.
We're going to pin 10 from the top and let's go ahead and pin 10 from the left and 10 from the right
as well makes it a little bit longer but nothing else is going to be going there.
So that's fine.
Awesome.
So versey is now in place.
I think we could also afford to maybe bump it up to size 22.
Although you know what that might make it a little off centered.
So let's go ahead and change that from 10 on the top.
Let's change that to eight.
There we go.
OK.
So now let's go ahead and constrain our table view by adding constraints and we're going to set it to
be zero from the label zero from the left zero from the right and zero from the bottom as well.
Just like so.
And of course that's actually zero from the top of the UI tab bar which is exactly what we want which
is really neat.
And now we can go ahead and drag on AUI table view cell just like this.
Now obviously this is not going to be tough enough because if you remember on the simulator each cell
is nice and tall.
So in order to do that we're going to go ahead and drag it down so that it's about I can't remember
exactly how high I made it.
I want to say 400.
That sounds about right.
Yeah that looks fine.
And that will be the size of our cells.
OK 400 is going to be the height.
And now what we can do is we can go ahead and build in a UI view because that's what I did to get this
shadow view here and we'll add the subclass for this later but we're going to go ahead and drop in a
view like so and I'm going to position it about where I want it and then we're going to perfect it with
constraints.
So we're going to go ahead and set this to be maybe 12 from all sides and there we go.
Now of course you saw that the background is that same blue as the text so we can go into the attributes
and Specter and set the background color just like we want.
OK.
There it is.
Very cool.
So as you can see this is going to allow for us to put a shadow underneath the cell which gives it kind
of a bit of depth which is pretty neat.
And again we'll do that in a future video.
But let's go ahead and let's build this out.
So we need a UI label let's drag that on.
We need another label beneath that.
So let's do another one.
We need a image view like so.
OK and we're going to position that exactly where it should go which is here.
And the same width as everything although we're going to use a stack view in a second so it doesn't
really matter.
But next we're going to go ahead and add in these three elements which this will be it's own little
stack.
This will be its own little stack.
And so will this then we're going to go ahead and set these all into a stack view with UI views to act
as those little lines in the middle.
So let's go ahead and let's set it up.
We need a little UI image view like so.
And we don't need to make it perfect for now but we also need a label there to hold the text.
So go ahead and drag on a label and we're going to pin these together are not pin these together but
stack them together by selecting both and choosing stack.
You can obviously that's huge.
It's way too big.
But we're going to go ahead and set it up with a little bit of spacing maybe 10 and that will be great.
So then we're going to go ahead and let's set the stack you to be well you know what let's duplicate
it three times first because we're going to need it three times.
Whoops sorry.
Go ahead and copy then paste inside the same view and do that one more time.
Next we're going to go ahead and select all three stack views and that might be easiest to do from the
document outline.
Then we're going to put those into a stack view and in the middle of both of them we're going to go
ahead and drop in a view like so.
You'll notice that it's trying to drop it into the stack for you there and we want to drop it in the
middle so we're actually going to go ahead and add it to the stack of you and then we can go ahead and
duplicate it.
No we can't sorry.
I mean copy and paste so select it copy and paste and then we can manually position this so that one
is on.
Whoops one is on one side of the stack.
You make sure that you have the far out arrow like this not the inside one that will actually put it
on the outside which is what we want.
And now for these two views if we hold command we can select both.
And we're going to set an explicit width of maybe three pixels.
And as you can see that creates a nice little barrier line between all of our UI views.
Are all of our stack views with our images.
So now let's go ahead and let's set an explicit height for these stack views.
And so I think let's try 30 K that looks pretty great.
And now let's go ahead and let's space out each element 10.
That looks pretty good.
And next let's think we want these images to be squares although they don't have to be because the image
will just be centered in the middle of them.
But let's go ahead and let's see if we can set up our alignment and our distribution to properly fill
these the way that we want.
Which I don't know if it will.
You know what it's looking like it's not going to.
So what I'm going to actually do is I'm going to go ahead and pin this inside my view.
I'm going to pin it let's do eight from the top is good.
And then how about we do let's do 20 from the left and 20 from the right.
We already have an explicit height so that won't matter as far as all of that goes.
But we do now have a problem we are having some issues with how our data is going to be displayed because
we're obviously pinching some of these off because they are not going to properly fill the way we want.
So now that we have set the size we can set them to fill.
Equally we can set them to fill proportionally equal spacing or equal centering K and equal centering
is what I'm actually going to go with because that's going to put us closest to what we want.
Now since these are in their own individual stack views I'm going to go ahead and open all these up
and select the image views since we have a height of 30.
I'm going to give it a with 30 as well.
Just to go ahead and make sure we have room for all the labels and there we go.
So we now have room for everything which is cool.
We can set the images because we've dropped in the assets.
This is going to be downloads.
This one is going to be language and this one is going to be what is it.
I believe contributor's.
Yeah.
The only issue is that we are definitely cutting these off.
They're not looking the way they're supposed to.
So we're going to set aspect fit I believe.
Yeah.
And that way it'll maintain its aspect ratio.
Now of course it does look a bit pixilated and that's because these images are actually bigger than
it's supposed to be so we're going to actually reduce the size.
We're going to modify the constraint here modify the height maybe to be 24 and then we can go ahead
and select all three image views or you know what actually we do them individually and change the width
to 24 as well.
And these will start to look a little better and there we go boom boom boom.
All right.
Very cool.
Let's go ahead and let's set the font for all of these labels by selecting them all selecting the attributes
and Specter and we can go ahead and go to custom Avenir next.
And we're going to set a different font style for each of these.
This one for instance is going to be size 24.
OK.
Like so they were going to center it there and let's make 2006 let's do 24.
And we want to make it Demi bold as well.
So go ahead and choose that Demi bold.
OK.
This one we want to stretch out a little bit as well.
Center it.
And you know what all these are going to be white font so I'm going to select them all again and just
change the color to white.
OK and let's go ahead and let's just say Ribault name.
All right.
Whoops.
Repo description and let's say maybe one two three see sharp let's just choose a random language and
then let's say one 1000 or 1000 three people contributing.
So as you can see this is starting to come together.
It's starting to look really cool.
Everything is nicely spaced and maybe we can fit in a an image here.
I don't really have a big enough image.
That's OK.
We know that's coming.
But let's go ahead and let's move our stack you down like so.
And we can also move our image down as well just like that.
Now I don't believe we have set constraints for this the way we need to because we need to actually
bump all of these into a singular stack view.
You know what.
Sorry.
No we are forgetting a button.
We need to use a button as well.
So let's go ahead and drag that down below.
We're going to go ahead and set the font to Avenir next.
It's like our system font here or not our system Fonkoze system font is early.
OK.
And let's set to be Demy bold font color to be white.
That looks awesome.
And this is going to save you read me because when they select this button it's going to create a read
me.
Now it doesn't have a border at the moment but we're going to create that subclass in a moment that
will add a nice rounded white border around it that just makes it look pretty cool but that's good.
So now that this is here let's select all of our items put them in a stack view and then we're going
to need to actually fix this we're going to fix the constraints we're going to add some spacing and
we're almost done.
So let's go ahead and let's drop that in there.
Let's make this what do we want to do we want to do.
Let's think think think think how about 10 from the top zero from the left to 0 from the right and 10
from the bottom.
That's pretty cool.
Now that everything is centered we can go ahead and give it 20 bits of spacing.
And as you can see that's too much so let's try 10.
And that looks awesome.
So we can get a repo name a description downloads language contributors and we can select the read me
button.
Now all that we need to do is actually to set up our table view with our trending feed Visi view controller
class and we can set up the cell and a future video.
But guys we're really darn close to being done with this.
Let's go ahead and pull open our attributes Inspektor trending feed we see already shows up and all
we need to do is to go ahead and select that table view right click and drag into trending feed we see.
And let's just name this table view.
Now it's connected super duper easy.
Very cool we can get rid of.
Did you know did receive memory warning we don't need it also don't need this comment of information
don't need it.
Look guys look at this.
We have built the app interface for our project.
Very very cool.
Let's go ahead and let's build and run these cells obviously will not show up because we have not yet
set up the table you delegate and you are table view data source.
But we can at least get an appearance of what it is we have a table view we have our versey label guys
we're looking good.
We are looking so good.
And in the next video we're going to go ahead and actually build out the rounded border button which
is going to go on this button.
We're also going to build out the rounded border textfield which we're going to use in our search Visi
but we're going to build the subclass so that we can actually drag and drop that on.
We have a lot to do but it's really really cool it's fun stuff.
So I will see you in the next video where we're going to go ahead and start building out some of those
custom subclasses.
Let's head over there now.