Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
Our app consists of a default collection view, which is pretty boring to look at. In this video, let's explore the different styling options that Interface Builder exposes to customize the look of our collection view
-
0:00
All right, let's make our app look a little nicer instead of these ugly,
-
0:04
gray cell backgrounds.
-
0:06
Well, first of all, our cells are way too small.
-
0:10
Also, it should be only in three of them in a row instead of six.
-
0:13
Secondly, the spacing between our items, both vertically and horizontally,
-
0:17
is way too much.
-
0:20
Lastly, the section header that we've got, well,
-
0:23
we don't actually need it cuz we're going to just have one section.
-
0:27
So let's head on over to our story board.
-
0:30
Click on the storyboard and
-
0:32
then selecting the Collection View inside of the Collection View cell.
-
0:37
We'll first click on the attributes inspector and
-
0:40
get rid of the Section Header.
-
0:45
And then click on the size inspector and let's start tinkering around.
-
0:52
So we'll change this cell size to 120 by 120 then down here for
-
0:58
Min Spacing for cells and for lines.
-
1:01
We're simply going to change this to 2 for Cells and 5 for Lines.
-
1:08
And then section insets, basically how the cells sit within a Particular section,
-
1:15
we're going to save 5 for top, 0 for bottom.
-
1:19
And as soon I did five, you saw that the cell moved down just a bit.
-
1:24
Then 5 on the left so the cell is going to move 5 from the left and 5 from the right.
-
1:31
So this minimum spacing, this right here is for
-
1:36
the horizontal spacing and this is for the vertical spacing.
-
1:41
All right, so let's go and run our application again and
-
1:45
see how it looks all right, great.
-
1:48
Our spacing looks much better.
-
1:52
Let's see, Going to change the scaling here.
-
2:01
So we don't have much spacing on the right here.
-
2:08
So maybe we can tinker with that just a smidge.
-
2:13
I'm gonna change that.
-
2:18
All right, that looks a lot better.
-
2:22
So now, let's see what we can do about this cell itself, well, of course we want
-
2:27
the cell to display an image which should be the same size as the cell itself.
-
2:33
We have a cell in our storyboard already so
-
2:35
we can start monkeying around right in here.
-
2:39
So I'll select the cell.
-
2:43
And first I'm going to just change this to the default background color.
-
2:49
So we're not going to mess around with that.
-
2:52
What I'll do is from our object library I'm going to search for image and
-
2:57
then drag over the image into our cell.
-
3:02
And then using the autolayout constraints, let's create a constraint
-
3:07
that is 0 margin from top, bottom, left, and right.
-
3:12
So basically, our image view is flushed with all the margins
-
3:17
of our UICollectionViewCell.
-
3:20
You'll see update the frames and then add the constraints.
-
3:26
So basically our image view is exactly the same size as our collection view cell,
-
3:32
and next let's create a custom subclass for our UI collection view cell.
-
3:38
So I'll say New File.
-
3:41
Cocoa Touch Class, and here we'll say CollectionViewCell
-
3:48
which is a subclass of CollectionViewCell.
-
3:55
All right, make sure the language is Objective-C and hit Next and Create.
-
4:02
And there's our CollectionViewCell class, which I'll just drag up here.
-
4:10
So you don't always need to create a custom subclass.
-
4:14
But it generally won't hurt.
-
4:16
And of course your code is more re-useable and flexible down the road.
-
4:20
So inside our shiny new custom class, we wanna create an IB outlet for
-
4:25
the image view that we just created.
-
4:27
So we'll hand over to the main story board, select the GifViewerCell,
-
4:35
And in the identity inspector I'm going to specify CollectionViewCell.
-
4:44
And then when we click on the assistant editor so
-
4:48
that we can layout our interface builder and our code side by side.
-
4:56
We're going to select our GifViewerCell.
-
5:12
For some reason it won't let me select,
-
5:22
It won't show me the CollectionViewCell,
-
5:28
So maybe I can just manually select the CollectionViewCell here.
-
5:34
I'll create an IB outlet, We'll simply call this ImageView.
-
5:41
Now, eventually we'll have the API feed us images, but for
-
5:45
now just to test things out, let's hardcode an image.
-
5:48
And of course we can hardcode that image within Interface Builder itself, but
-
5:53
let's do it in code because you're gonna be working a lot with the code, and
-
5:57
CollectionViewControllers, and CollectionViewCells.
-
6:01
So let's figure out how we can populate the collection view controller or
-
6:06
actually the collection view cells within default image.
-
6:11
So, first things first, I am going to add an image.
-
6:16
This can be any image that you want.
-
6:18
I have this nice little image of a kitten here.
-
6:22
Because kittens are cute and the Internet is made up of kittens.
-
6:26
At least that's what I'm told, I don't know.
-
6:29
So going back to our CollectionViewController right here in
-
6:34
the method that says cellForItemAtIndexPath,
-
6:39
we will configure our cell.
-
6:43
And we don't need to change the cell to our custom subclass because
-
6:47
it is the parent class UICollectionView within the signature.
-
6:52
But we can change it here so for
-
6:54
us to use our CollectionViewCell we're going to import it first.
-
7:06
Then going back down here, we will configure our cells.
-
7:11
So we'll say cell,
-
7:16
.imageView.image = [UIImage
-
7:22
imageNamed:@"kitten"];.
-
7:30
Just making sure our asset does say kitten.
-
7:34
It does.
-
7:35
All right and lets run our app there you go,
-
7:40
row after row of kittens.
-
7:43
Don't tell me this isn't make you feel all warm and fuzzy inside.
-
7:48
Before we sign off though, there's one thing that I wanna do is make sure that we
-
7:51
have only one section instead of two.
-
7:56
And of course, when we run the app it's not gonna make the huge difference,
-
8:00
we're just now gonna have sections.
-
8:03
I'll just have one section of 49 items.
-
8:07
Okay our app is beginning to take shape.
-
8:10
Don't worry that it doesn't look exactly perfect.
-
8:13
We'll be circling back to add some polish later on.
-
8:17
Next up we're going to switch gears from our layout to our data.
-
8:21
Where we'll use an SURL session to download data from our API.
-
8:26
If you think you need to take a break, please take one.
-
8:29
Otherwise, take a moment to review what you've just learned and
-
8:32
then meet me in the next stage.
You need to sign up for Treehouse in order to download course files.
Sign up