Everybody what's going on.
This is Caleb with slopestyle.
And we're about to build out the store Visi which is the front view controller that you see first.
When you load up food Zilah.
So let's go ahead and let's do that now.
Pull open X code go into main storyboard and we are going to go ahead and build this out.
It's going to be really easy it's not a very involved interface.
So go ahead and we're going to start with the UI collection view and we're going to go ahead and type
that UI collection view.
We're going to drag it on just like so and snap it into place just like that.
Now the cool thing with you I collection view is that it already drops in a cell for us which is really
helpful.
But you know what I'm actually going to go ahead and bring this in 20 from all sides because I don't
want my cells touching the very far edge of the screen.
I want there to be a little bit of cushioning.
And for the cell I'm going to go ahead and drag this to a bigger size and you'll notice you can actually
see it happening.
But when you release it it updates if you drag from one of these corners which is really helpful.
So supercool collection views in place there is a cell already there for us.
And now we need to go ahead and drag on a label and a button.
Super easy UI label drop it there and UI button and drop it there.
All right.
So what we're going to do for the button or for the label I mean is we're going to stretch it all the
way over to the button and we're going to drag it all the way down to the collection view.
We're going to do the same thing for the button although you know what I'm going to start pinning these
in place so I'm going to pin this zero from the top and 16 from the right with margins constrained.
And I'm also going to make it 50 and 50 50 for the height and 50 for the width.
Add those constraints and then we should be good to go with our label as well.
So let's go ahead and let's pin this zero from the top 16 from the left let's do 8 from the right not
4 and let's do 8 from the bottom meaning the well eight to the to the top of the collection.
You add four constraints and that's going to give us some trouble.
What's the deal.
Let's see.
Do you do we said eight to the collection view and that is very much not all but it's because we haven't
constrained the collection view yet.
So let's go ahead and do that 16 from the left 20 from the bottom 16 from the right.
And let's go ahead and let's give it a fixed height of 567 that's fine.
There we go.
So that fixed our constraint issue.
Now let's set the font here.
This is not going to change.
It's just a static label.
Of course I am going to change the font to Avenir next and I'm going to go with bold and we're going
to do size 30.
OK that looks cool.
And let's call this food Zilah.
Now the font color is black and that's really really dark which is OK but things that are that dark
tend to be a little just too intense on a screen.
So what I'm actually going to do is just make it a really dark gray and it just kind of softens it makes
it look a little nicer.
Now for the button I'm going to do the same thing I'm going to change the font to Avenir next bold so
you can do that with me here bold and I'm going up this to 30 as well.
Now there's a good reason for that.
I'm going to change the word button to a question mark.
OK.
So that's like a question mark for help or whatever and that's going to allow us to restore our purchases.
It could be extended to even allow a user to tap on the question mark.
And you know we could add buttons to that pop up view to let them go to your support page or something
like that.
So the text color we need to set to a soft blue like so I don't like the default blue.
If you're interested this blue is 4 7 8 C6.
I've used it before really like this blue anyway so that's now in place.
Wonderful.
Now let's build the interface for our cell which is going to be an image and two labels.
Super easy.
So go ahead and type you image.
Drag it on center it like so.
And we're going to just stretch it to fit and then constrain it to the outside edges.
Whoops missed my slider there.
All right cool.
So now that it's in.
Let's go ahead and pinnate zero from all sides like so and add four constraints.
Very cool.
Next we're going to go ahead and drop on a label put it right there in the center.
We're going to copy and paste that label and put it below.
This is going to be the name of the food and this is going to be the price.
Now there are going to be different sizes but the same font.
So let's go ahead and select both select font select font and custom Avenir next.
And we're going to make these.
How about Demy bold.
We'll make it size 18 now.
The bottom one we're actually going to whoopsies the bottom one we're going to make size maybe 14.
That looks good.
And we don't need it to be Demy bold but just medium.
All right.
Great.
But stretch these so they fit.
And we'll do the same thing with the other one.
And then we're going to center both of them as well for the font orientation or alignment.
I mean.
OK.
So that looks pretty good.
Let's think.
Is there anything else we need to do.
Yes.
Actually I want to change the font color to white because it just tends to stand out better on top of
photos.
And let's just call this item name and we'll call this item price like so.
And now let's go go ahead and constrain these.
I need to make sure that they're not going to be in the way of each other.
They might be anyway so let's go ahead and pin this 12.
From all sides and set a fixed height of 25 looks great then I'm going to do the same thing here but
I'm going to do zero to the bottom of that item name label 12.
From the left 12 from the right.
And let's do a fixed height of 20 because it's smaller font.
Press enter and there we go.
That's literally all we need to do for our cell.
But we do need to set up our view controller here so select the view controller and we're going to rename
it to store visi.
That's a little more specific.
How about storefront the sea.
That sounds a little better.
Not with the capital.
All right.
So now I'm going to copy this and paste it in all the relevant places it needs to go like the name of
the class and the file boom.
But now we're all screwed up because this is referencing view controller and its identity.
So we're going to go ahead and get rid of that paste in storefront B C and now we're all linked up.
So let's go ahead and let's actually link up these button and let's link up the collection view to the
subclass by opening the assistant editor and look at that we have storefront Visi ready for us right
there.
So go ahead and get rid of did receive memory morning and go ahead and right click and drag from collection
view.
We're going to just call this collection view like so.
And what else we need to drag from our button here and make an IB action which I like to put at the
bottom of my class.
And we'll call this restore per whip's restore purchases.
Let's just say restore button was pressed.
That's a little less long and there we go we have a function here that is linked to our button.
We have viewed load with a comment.
We're going to get rid of.
Let's think what else do we need to do.
We'll create a subclass for this cell later on we're going to go ahead and I guess conform to collection
view data source and delegate like so UI collection view delegate and collection view data source like
so.
Now if I build and run you'll notice there's an error and that's because we need to conform to the three
delegate methods that are required like so a number of sections in collection be a number of items in
Section and sell for item an index path.
Now for a number of sections we're just going to return one that'll never change for a number of items
in section.
That will depend on some static data we build in later.
But let's go ahead and let's just return re 3 for now.
Just a static number.
And for the cell we're just going to go ahead and for now return
a blank UI collection view cell.
OK.
We're going to change it later.
The only things we need to do still are to set the collection to use delegate and data source to be
this view controller.
So go ahead and type collection view.
Delegate equals self collection view data source equals self as well.
And I'm moving a little fast but I'm assuming that if you're taking an app purchased course that you
have prior knowledge in Iowa development.
So this is this is important for you to know.
Now if I build and run you'll notice those errors about conformance go away because I now have properly
linked my collection view and set up its delegate and data source.
All right.
So let's go ahead and build and run.
Let's go see how we did and see if see what it looks like.
I think we did pretty good.
We got a crash what's this says the cell returned from cell and index path does not have a reuse identifier.
Oh right we did not set that.
We're not going to and I'm asking it to return cells that it does not know about.
Whoops.
Let's go ahead and let's just return 0 for now because we have not yet told it how it should be rhis
how it should be retrieving those cells.
So with it change to zero.
Go ahead and build and run.
And we should be able to get a good look at the interface then here we go food Zilah opening up and
there we go take a look.
We have our label our button and our collection you.
Now I'm noticing they're off center.
They don't look great.
Let's go figure out why they're off centered.
We have pinned this eight from the left eight from the 16 from the left eight from the right eight from
the bottom and align the top to the safe area.
Now we also have this aligned to the safe area left right.
Oh but you know we did not align this to the collection view so let's go ahead and do that.
That was at the top of the bottom yeah the bottom is not aligned to the collection view.
So let's do that.
Set it to be 10 from the collection view.
I think that was right.
You know what the button is 10 but the other one is eight.
So change the bottom space to the collection view to be eight actually.
And now it's going to give us all kinds of problems.
What is this.
Looks like we are 10 from the question mark and 10 from the label.
You know what.
When I'm doing both of these it's going to cause some issues.
Let's go ahead and put these into a stack if you like so.
And then let's go ahead and constrain these to be zero from the top 16 from the left 16 from the right
and 10 from the collection view.
Let's see how that does that looks a little better.
All right.
Right.
That's exactly what I was hoping to see.
So let's build and run this and oh you know what.
We have a height constraint on our collection to you that's also going to cause problems so.
Well I mean let's see how it looks.
Yeah.
OK so our collection is here.
Our label gets pulled down because we have a height constraint here.
Let's get rid of that.
And now when we build and run it should look much better.
There we go OK our labels at the top are button is here and our collection to it is here.
We can't see it.
I could fill it with an image just to show you what to do that really fast.
Set the whip's set the image here and maybe two food one.
Oh you know what aspect Phills should be used.
There we go.
And oh we're returning 0 sell so it's not going to show up.
I'll show you that later when we create our subclass.
So this is looking great so far we have our collection be wired up.
We have our label our button.
We're good to go in the next video we're going to build detail see which is the view controller that
pops up when we select one of these cells from the table view.
We're going to wire that up as well and then we're going to talk about how to pass values between them
in order to instantiate and present detail visi.
So let's head over to that video and let's do that now.