Build a custom UICollectionViewCell

Today I was working on an iPhone project that required a custom UICollectionViewCell in my UICollectionView. Utilizing interface builder, and a custom xib you use this same technique to customize just about any UI component.

I made my the project available from git hub:

https://github.com/barrettbreshears/CustomCollectionViewCell

Add new view

Open up your project and add a new user interface view file. I am going to name mine MyCustomCell.xib. Open your new file and you will see an empty view. Select the view and delete it, we will be replacing it with a CollectionViewCell. Now drag a UICollectionViewCell onto the xib file. You should get something that looks like this:
Custom Collection Veiw Cell

For this demo we are just going to add a label, that we can set a custom message in each cell. To add a label to our cell drag a label from the object library onto the cell.

Cell with label

With our view set up lets get to our custom cell’s class file. Create a new Cocoa Touch object c class. And give it the same name as your custom xib, and select UICollectionViewCell as the subclass.

Add cocoa touch fileMyCustomCell

 

Once the file is created we will add our our label as an IBOutlet. This is what   MyCustomCell.h looks like now

//
//  MyCustomCell.h
//  CustomCollectionCell
//
//  Created by Barrett Breshears on 11/14/13.
//  Copyright (c) 2013 Barrett Breshears. All rights reserved.
//
#import <UIKit/UIKit.h>
@interface MyCustomCell : UICollectionViewCell
@property (nonatomic, strong) IBOutlet UILabel *customLabel;
@end

Go back to your custom view cell and select the CollectionViewCell and select the identity inspector. Under the custom class property set MyCustom cell as the Class. This will give you access to the IBOutlets specified in MyCustomCell.h. After the custom class is set select the connections inspector to view your available connects. Under Outlets customLabel should appear. Drag and drop customLabel onto the label inside the collection cell.

Set custom class

Connect customLabel Outlet

 

Now the hard part is over! Lets hook up our custom cell, by registering the nib with the collection view. My demo app is a single view with a collection as a subview. Below is my view controller.

#import "CCCViewController.h"
#import "MyCustomCell.h"

@interface CCCViewController ()

@end

@implementation CCCViewController

-(void)viewWillAppear:(BOOL)animated{
    [self.myCollection registerNib:[UINib nibWithNibName:@"MyCustomCell" bundle:[NSBundle mainBundle]]
        forCellWithReuseIdentifier:@"MyCustomCell"];
}

- (void)viewDidLoad
{
    [super viewDidLoad];

	// Do any additional setup after loading the view, typically from a nib.
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return 10;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    MyCustomCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"MyCustomCell" forIndexPath:indexPath];
    [cell.customLabel setText:[NSString stringWithFormat:@"My custom cell %ld", (long)indexPath.row]];
    return cell;
}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
    return CGSizeMake(150, 150);
}

@end

When we run the app we get the our custom collection view cell loaded.

Screen Shot 2013-11-14 at 1.40.42 AM

Author: barrettbreshears

I don't take showers, only blood baths.

8 thoughts on “Build a custom UICollectionViewCell”

  1. You claimed you made the project available on github. You only made three files available. We can’t run the project if there isn’t a project file. You should update that.

    1. Sorry about that, I figured since this is a general overview people could use this in their own project. I will try to get the whole project up on github this weekend. Thanks for the feedback!

  2. -(void)viewWillAppear:(BOOL)animated{
    [self.myCollection registerNib:[UINib nibWithNibName:@”MyCustomCell” bundle:[NSBundle mainBundle]]
    forCellWithReuseIdentifier:@”MyCustomCell”];
    }

    i have a problem in self.myCollection. What is that ? Sorry im a 1 week old iOS developer 😛

    1. self.myCollection is the collection view that you are registering the nib to. Let me know if that makes sense or not. Follow me on tiwtter @barrettbreshear and send me a message if you need more help!

  3. Hi Barret,

    If I want to develop a chatting app, should I use UICollectionView or UITableView?

    Do you have any tutorial to recommend for creating chatting app?

    Thanks.

Comments are closed.