You know what's up everyone.
Mark Price you're at death's slopes dot com and we're going to continue on in our coater swag application
and we've made great progress.
We've built a table view with images and titles and now what we want to do is we want to build the rest
of the app where you click one of the categories and then it takes you into another view controller
that shows a list of products for that specific category.
So the first thing first is let's just do the user interface so I can open up my object library to close
out the left hand side here and I'm going to rearrange some things so we can see what it looks like
on the mockup right here.
So it looks somewhat like this.
And notice how the items are there's two items in each row.
One two one two one two.
This cannot be achieved properly with a table view.
What we need to use is a collection view and so in Iowa is when you're working with groups of data you're
going to work with a table view or a collection view and the differences table you can only go up and
down.
OK.
And it has a like a list of items like a table.
OK.
A collection view.
OK.
It can go horizontal or vertical so you can swipe from left to right or up and down.
It can have one item in a row that can have multiple items in a row.
It's a much more flexible and so some examples of collection views are like on the iPhone app photos
where you're actually looking through your collections are your memories and you can see a group of
photos in a grid.
So collection view is a great choice for that.
If you're just going to do straight line items I want to either use a table view.
So let's go ahead and create new Wii View Controller drag it onto the screen.
We're going to move it over a little bit here.
All right.
And it's white completely white and so we need to do to get it to connect to our navigation controller
is simply create a Segway.
So with this view controller select the coater SWAK I'm going to control drag from this icon over here
on the left hand side over to The View Controller.
We're going to create a Segway and it's going to be show so just by putting the Segway on here has now
embedded this view controller in the chain of navigation that the navigation controller.
OK.
And so it's already saying hey this is going to go back to the main coater swag page.
It will change the color of this and everything here shortly in the title when we're actually coating
what we can change.
Cornell let's go to our let's go back to our main controller our navigation controller here and click
the navigation bar and then you're going to scroll down you can see this thing called tent just change
the tint here at the bottom to white and then when you go back OK click around it will update there.
It's now white.
So perfect.
All right.
And then on the title I'm sure there's a title here if we click this.
Actually it's not showing up on here which is ok will change in code anyway which is what we have to
do.
So this looks good.
Let's go ahead and make it look like the image.
There's a there's a b label right there.
OK so let's look at what we have here a kind of similar thing here.
Set up shot by category.
You know our designer I think left the same text on there and both these shot by category which doesn't
make sense.
So what we'll do here is we'll call this products.
So I'm going to copy this label.
Well let's first look at how high it is from the top.
It is 30 from the top So what I'm going to do is command C to copy and then over here I'm going to command
V to paste and I'm going to set some constraints on it.
We're going to say 30 from the top and zero from the left margin.
OK.
And that's good.
Let's give it a fixed height as well.
And let's get it fixed with because we'll just make sure all the corners are accounted for here.
Cool shot by category.
The next thing we want to do is just put our collection view on here and that's the simplest typing
and collection view in the object library and dragging it in over here.
And I want to do something similar to make sure it's the proper distance from the shop by category so
I'm clicking the table view on the previous view controller and click the ruler over here.
And we know it's it's approximately 16 16 pixels from the shot by category.
And so over here on our collection view let's bring it up.
And what I want to do is do the exact same thing so 16 from the top zero from the left margin analyses
are not the larger margins are turned off.
So you're from the left you're from the right.
Or is your from the bottom it's now fully expanded.
Cool and it's shot by category.
Let's just call this products
OK.
Now what's interesting is this is just like the table you we drag a tape of you on.
And there's this little icon here.
OK.
Now with the with the table view we had to drag the collection of view cell onto the table view the
prototype here with the collection view.
It's already in there.
So all we have to do is drag it out make a little bit bigger here.
OK.
I'm just eyeballing it a little bit.
So remember we're trying to make it look like the image and it looks like it's a rectangle of some kind.
So it's definitely taller than it is wider.
And we need a foot or two on here.
So just eyeballing it a little bit that's too much
Rigaud right about there and we can change this if we need to.
OK so I'm just eyeballing it here and we know we're going to need an image.
Let's drag an image view on here.
Like so and like so and I want this to be a square.
So let's go to the ruler and the width has to say the same.
So the height is going to be 178 to match the width.
And let's go ahead and pin it from the top left and the right and give it a fixed height of 178.
Perfect.
Now what I want to do is put a label here because you know the depth slopes logo graphic T-shirt.
We need to have what what the title is of the product.
So let's put a label in and I'm just going to move it over a little bit it's not going to be on the
big guidelines here and I'm going to move it down like so we're going to change the text here when you
change it from system to custom.
And we're going to do Avenir.
And I think the book is fine and I'll leave that size for now.
And we're going to type in depth slopes logo graphic tee shirt just to make sure it fits on two lines
which it doesn't because it's only one line high on the lines here.
Click that to to def soap's logo graphic tee shirt.
Now the whole word graphic is supposed to be on there.
So let's reduce the font until it fits like so yeah.
And instead of black it's more of a dark gray font so I'm going to change the font to it dark and it's
not dark enough.
Let's make it a little bit darker.
I right about there aka doves slopes logo graphic T-shirt.
And the last thing is it needs a price someone make this a little bit taller and then I'm just going
to copy this here.
It's a command to duplicate and drag it down a little bit.
Let's change the price here.
2005 like so
with this label selected I make it a little bit smaller.
We don't need to as big as the other one.
And then I'm going to change this from two lines back to one.
Yeah.
And the fun this is a little bit lighter so let's change this one to the dark gray color and see if
that makes it a little bit lighter.
It does yeah.
OK.
I like this.
This is looking good here.
Good enough.
And let's go ahead and pin these guys now so let's pin the step slopes label here.
Let's pin it.
Nine from the top and we'll say yeah one from the left and one from the right is fine in this case let's
say zero to the margins that works.
And then let's give it a fixed height 48.
And these are just arbitrary numbers.
It just looks good and I like how it looks.
And so notice how cesspit the six from the top.
It's saying that because it's overlapping our label here.
So when you just need to bring it down a little bit and bring this up now and I'm going to go ahead
and pin it up now.
OK.
So good.
Five almost say three from the top and let's say turn on the margins here and this is zero from the
left margin zero from the right margin.
And in this case what just pinnate to the bottom here as well to say is five from the bottom that's
good.
So these look like their pen.
I don't have any red lines yelling at me or anything.
So it's like the image of you know let's just put a product on here and do a shirt so shirt 0 1 and
we're new aspect fit.
And the reason why you want to do aspect fit is because when you're selling a product you don't want
to cut off the image so even aspect film might not be what you want because it could cut off the image
we want aspect fit.
OK.
So it's kind of looking like the image but we've got white here when it said this should be this great
color and also the background here is also this great color.
So let's open up our handy dandy digital color meter and it's 2:43 2:43 2:43.
That's easy so we're going to do this on the main view.
Let's change the background to 243 to 43.
Forty three to 43 and to 43.
So we've changed that.
And then what we want to do is change the background of the cell itself.
So the collection view cell let's change this background to that same color.
So when you use the recently used colors and then on the collection view let's say that background color
as well to to that same recently used color and then what'll happen is it'll look just like the image
here OK.
This is looking really nice.
So we've got our our image here and our label and our price.
And I think the next thing to do is just quickly create a actual collection B-cell with Iby outlets
and we'll connect them and then we'll call this video done.
We'll be all hooked up here so we can open up the navigator here and in the view folder I'm going to
create a new file Cocco touch class and it's a subclass of UI collection of useful and we're going to
call this product cell
and click Create perfect.
And let's just create some outlets and outlet and we're going to say we are.
And this is going to be the there's three items right.
So there's the image name so image name of type string or not image name image view.
This would be the product image of type you image view.
There you go.
And the other ones we've got to label so this one is going to be product title type label and at the
outlet we have our product price up type label.
There we go.
Let's go back to our story board and go over to the new controller here cooked the View Controller icon
here the orange icon go to the identity inspector and let's change the class to a product Whoops wrong
one not the view control or the cells what we want to change.
My bad collection and view cell right here.
Let's change that to the product cell.
Now if the DO is right click the product cell and you're going to see your new outlets here.
So product image is drag here.
Product price drag it to the price of one and product title to the title.
And those are now connected.
And this looks good.
So if we run the app nothing is going to happen really it's just emptiness.
We can't even get to the screen yet but we've made progress we built out the we've designed a custom
UI collection you sell just like we did with a table view so we said I'd be outlet's on it and we're
ready to start writing some code.
So that's it for now.
Let's move on to afford more price at depth slopes.
Dot.com.
See you soon.