All right, let's make our app look a little nicer instead of these ugly,

gray cell backgrounds.

Well, first of all, our cells are way too small.

Also, it should be only in three of them in a row instead of six.

Secondly, the spacing between our items, both vertically and horizontally,

is way too much.

Lastly, the section header that we've got, well,

we don't actually need it cuz we're going to just have one section.

So let's head on over to our story board.

Click on the storyboard and

then selecting the Collection View inside of the Collection View cell.

We'll first click on the attributes inspector and

get rid of the Section Header.

And then click on the size inspector and let's start tinkering around.

So we'll change this cell size to 120 by 120 then down here for

Min Spacing for cells and for lines.

We're simply going to change this to 2 for Cells and 5 for Lines.

And then section insets, basically how the cells sit within a Particular section,

we're going to save 5 for top, 0 for bottom.

And as soon I did five, you saw that the cell moved down just a bit.

Then 5 on the left so the cell is going to move 5 from the left and 5 from the right.

So this minimum spacing, this right here is for

the horizontal spacing and this is for the vertical spacing.

All right, so let's go and run our application again and

see how it looks all right, great.

Our spacing looks much better.

Let's see, Going to change the scaling here.

So we don't have much spacing on the right here.

So maybe we can tinker with that just a smidge.

I'm gonna change that.

All right, that looks a lot better.

So now, let's see what we can do about this cell itself, well, of course we want

the cell to display an image which should be the same size as the cell itself.

We have a cell in our storyboard already so

we can start monkeying around right in here.

So I'll select the cell.

And first I'm going to just change this to the default background color.

So we're not going to mess around with that.

What I'll do is from our object library I'm going to search for image and

then drag over the image into our cell.

And then using the autolayout constraints, let's create a constraint

that is 0 margin from top, bottom, left, and right.

So basically, our image view is flushed with all the margins

of our UICollectionViewCell.

You'll see update the frames and then add the constraints.

So basically our image view is exactly the same size as our collection view cell,

and next let's create a custom subclass for our UI collection view cell.

So I'll say New File.

Cocoa Touch Class, and here we'll say CollectionViewCell

which is a subclass of CollectionViewCell.

All right, make sure the language is Objective-C and hit Next and Create.

And there's our CollectionViewCell class, which I'll just drag up here.

So you don't always need to create a custom subclass.

But it generally won't hurt.

And of course your code is more re-useable and flexible down the road.

So inside our shiny new custom class, we wanna create an IB outlet for

the image view that we just created.

So we'll hand over to the main story board, select the GifViewerCell,

And in the identity inspector I'm going to specify CollectionViewCell.

And then when we click on the assistant editor so

that we can layout our interface builder and our code side by side.

We're going to select our GifViewerCell.

For some reason it won't let me select,

It won't show me the CollectionViewCell,

So maybe I can just manually select the CollectionViewCell here.

I'll create an IB outlet, We'll simply call this ImageView.

Now, eventually we'll have the API feed us images, but for

now just to test things out, let's hardcode an image.

And of course we can hardcode that image within Interface Builder itself, but

let's do it in code because you're gonna be working a lot with the code, and

CollectionViewControllers, and CollectionViewCells.

So let's figure out how we can populate the collection view controller or

actually the collection view cells within default image.

So, first things first, I am going to add an image.

This can be any image that you want.

I have this nice little image of a kitten here.

Because kittens are cute and the Internet is made up of kittens.

At least that's what I'm told, I don't know.

So going back to our CollectionViewController right here in

the method that says cellForItemAtIndexPath,

we will configure our cell.

And we don't need to change the cell to our custom subclass because

it is the parent class UICollectionView within the signature.

But we can change it here so for

us to use our CollectionViewCell we're going to import it first.

Then going back down here, we will configure our cells.

So we'll say cell,

.imageView.image = [UIImage

imageNamed:@"kitten"];.

Just making sure our asset does say kitten.

It does.

All right and lets run our app there you go,

row after row of kittens.

Don't tell me this isn't make you feel all warm and fuzzy inside.

Before we sign off though, there's one thing that I wanna do is make sure that we

have only one section instead of two.

And of course, when we run the app it's not gonna make the huge difference,

we're just now gonna have sections.

I'll just have one section of 49 items.

Okay our app is beginning to take shape.

Don't worry that it doesn't look exactly perfect.

We'll be circling back to add some polish later on.

Next up we're going to switch gears from our layout to our data.

Where we'll use an SURL session to download data from our API.

If you think you need to take a break, please take one.

Otherwise, take a moment to review what you've just learned and

then meet me in the next stage.