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:

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;

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 ()


@implementation CCCViewController

    [self.myCollection registerNib:[UINib nibWithNibName:@"MyCustomCell" bundle:[NSBundle mainBundle]]

- (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);


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

Screen Shot 2013-11-14 at 1.40.42 AM

Getting started with sencha touch!


Sencha Touch is a HTML 5 framework that allows you to create cross platform mobile apps. When used with cordova you can build HTML apps that look and feel like a native app allowing you to cut down in your development time and budget. The frameworks learning curve is a little steep but once you get it down, development is quick and painless.

Lets get started

To get started we are going to need to download a couple things and get our environment set up. It might seem like a lot, but once you are set up you should be able to create Touch projects quick and easy. Here is what we need to download:

Now that we have everything downloaded, install MAMP to get your server up and running, and install sencha cmd. Once sencha cmd is installed run the following cmd:


You should see something like this in your terminal:
Terminal output

This means sencha cmd is installed correctly and you we are getting close to creating our app.

Next take your sencha touch sdk download  and unzip its contents into you web server directory, put mine under a touch directory. This will allow you view documentation and demo apps locally on your machine, as well as a good getting started guide http://localhost/touch/SETUP.html.

Now that everything is set up lets build our app! We will be using sencha cmd to scaffold out the app. The command we are going to use is:

sencha -sdk /path/to/sencha-touch-sdk generate app MyApp /path/to/www/myapp

With my setup this is what my command will look like for my app called PowPowPowerball

sencha -sdk /Applications/MAMP/htdocs/touch generate app PowPowPowerball /Applications/MAMP/htdocs/PowPowPowerball

And thats it, your app is created. With your web server running navigate to your project. It should look like this:
Your new sencha touch app

Take a look inside your project and you will see what sencha cmd has built out. Below is the basic layout of the project.

.sencha/                # Sencha-specific files (for example configuration)
    app/                # Application-specific content
        sencha.cfg      # Configuration file for Sencha Cmd
        plugin.xml      # Plugin for Sencha Cmd
    workspace/          # Workspace-specific content (see below)
        sencha.cfg      # Configuration file for Sencha Cmd
        plugin.xml      # Plugin for Sencha Cmd

touch/                  # A copy of the Sencha Touch SDK
    cmd/                # Sencha Touch-specific content for Sencha Cmd
        sencha.cfg      # Configuration file for Sencha Cmd
        plugin.xml      # Plugin for Sencha Cmd
    src/                # The Sench Touch source
    sencha-touch-*.js   # Pre-compiled and bootstrap files

app                     # Your application's source code in MVC structure
        Main.js         # The main view of the application

        app.css         # The main stylesheet, compiled from app.scss

        app.scss        # The Sass file which compiles to app.css above,
                        # includes Sencha Touch theme by default

    icons               # Application icons for all mobile devices
                        # When replacing these default images with your own,
                        # make sure the file name and the dimension stays exactly the same
    loading             # Application start-up screens for iOS devices
                        # Similarly to icons, make sure the file names and
                        # dimension stays the same
    images              # Put other images used by your application here

app.js                  # Contains application's initialization logic
app.json                # Application descriptor
packager.json           # Configuration for native packaging

Thats it, now get started building out your app!

Hello And Welcome

Sledge Dev is a web and mobile development studio that specializes in custom development solutions. Our goal is to build awesome apps, that a lot of people use. We will try to post at least one article a day whether its just a quick note about something cool we learned or a full tutorial on building a mobile app. We are very excited to get started and hope you guys stop by every day to check in on us and see what we are working. We send out newsletters every couple of months, and if you are interested in signing up please fill out the form in the side bar.