You know what's up everyone.
Mark Price you're at DEF 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 and 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.
Use what we need to use is a collection view and so in Iowa.
When you're working with groups of data you either can 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 list of items like a table OK a collection view.
OK.
It can go horizontally or vertically 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 much more flexible.
And so some examples of collection of 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 one after the other use a table view.
So let's go ahead and create a new 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 and we're going to create a Segway and it's going
to be show.
So just by putting the Segway on here it has now embedded this controller in the chain of navigation
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 view controller or navigation controller here and
click the navigation bar and then you're going to scroll down you can see this thing called tint.
Just change the tint here at the bottom to white and then when you go back OK click around it to update
there is no way 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 is kind of similar thing here.
Set up shop 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.
It's all going to copy this label.
Let's look 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 get a 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 V on here and that's the simplest typing in
collection view in the object library and dragging it in over here.
And I want to do something similar I to make sure it's the proper distance from the shot 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 are the exact same thing so 16 from the top zero from the left margin analyses
are not the margin 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 this is shot by category.
Let's just call this products.
Now what's interesting is this is just like the Table of you we dragged 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 view cell onto the table.
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 to fit two on here so just eyeballing it a little bit.
That's too much
go 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 the 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 sighs 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 so on the lines here click that to two def soap's logo
graphic t 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.
Right about there aka dove 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.
It's change the price in here.
2005 like so
with this label selected.
I'm going 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'm liking this so this is looking good here.
Good enough.
And let's go ahead and pin these guys now so let's pan the steps slopes label here.
Let's pin 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 0 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 cesspits is 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 lemons say three from the top and let's say let's turn on the margins here and this is zero from
the left margin zero from the right margin.
And in this case we'll just pin it to the bottom here as well to say 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 to do a shirt so shirt 0 1 and 2
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 I 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 2:43 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 set that background color
as well to to that same recently use color.
And then what will 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 of B-cell with Iby outlets
and we'll connect them and then we'll call this video done and get all the UI 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.
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 of type I label.
There we go.
Let's go back to our story board and go over to the new controller here.
Could you control our icon here.
The orange icon go to the identity inspector and let's change the class to a product Oops 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.
So now if the DO is right click the product cell and you're going to see your new outlets here.
So product image is dragged here.
Product price drag it to the price one and product title drag it 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 made progress we built out the we've designed a custom UI collection view cell just like we did
with the 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 Ford more price at depth slopes.
Dot.com.
See you soon.