Creating Custom Collection View Cells in iOS7

The Collection View provides a flexible way to present content to the user. Similar to a table view, a collection view gets data from custom data source objects and displays it using a combination of cell, layout, and supplementary views. A collection view can display items in a grid or in a custom layout that you design. In this tutorial we will create a custom collection view cell by adding an image to it.

Update: Dec 29, 2014. The rewritten version in Swift for iOS 8.1 and Xcode 6.1 is available here.

Open Xcode and create a new Single View Application. For product name, use iOS7CustomCollectionViewCellTutorial and then fill out the Organization Name, Company Identifier and Class Prefix fields with your customary values. Make sure only iPad is selected in Devices.

Go to the Storyboard and drag a Collection View from the Library and drop it to the main View. Select the Collection View and go to the Size Inspector. In the Collection View Size section change the Cell Size to 150 by 150.

The Storyboard should look like this.

The next step is to customize our Collection View Cell by adding an image. Download this image, unpack it and add it to the project. Drag an Image View from the Library on to the cell. Select the Image View, go to the Attributes Inspector and add the apple.jpg file to Image field. The Storyboard should now look like this.

We need to hook the custom cell to a CollectionViewCell class . Let’s then add a new class as a subclass ofUICollectionViewCell to the project and name it MyCell. Go back to the Storyboard, select the Assistant Editor and open Cell.h. Ctrl and drag from the Image View to the @interface section and create the following outlet.

Select the Collection View Cell and in the Identity Inspector change the class to MyCell. Navigate to the Attributes Inspector and change the Reuse Identifier to "Cell". Later on we need this string to reference to our custom cell.

Open the ViewController.m file in the Assistant Editor. Ctrl and drag from the Image View to the @interface section and create the following outlet.

Now, we need to make this view controller be conform to the datasource protocol. Go back to the Storyboard and right-click the collection view. Connect the dataSource outlet to the view controller. Then, open ViewController.m and add UICollectionViewDataSource to the class interface:

@interface ViewController () <UICollectionViewDataSource>

Import the MyCell header file

#import "MyCell.h"

Add the following property in the @interface section

@property (strong, nonatomic) UIImage *myImage;

We need this property to assign our image to, change the viewDidLoad method in

- (void)viewDidLoad
[super viewDidLoad];

self.myImage = [UIImage imageNamed:@"apple.jpg"];

Now it's time to implement the UICollectionViewDataSource delegate methods.

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
return 2;

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
return 50;

In this tutorial we use 2 section with 50 items in each section. Next, implement the collectionView:cellForItemAtIndexPath method 

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
MyCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"Cell" forIndexPath:indexPath];
cell.myImageView.image = self.myImage;

return cell;

Here we use our Reuse Identifier which we have made earlier in the Storyboard. We assign our image to the MyImageview.image property of our custom MyCell. Build and Run the project and you will see our image displayed in each cell in the Collection View.

You can download the source code of the iOS7CustomCollectionViewTutorial at the ioscreator repository on github.