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