Matt Galloway

My home on the 'net.

RSS
Search

Navigate

Navigate

Navigate

About
Tutorials
Code
Archives

Custom UITableViewCell in IB
Custom cells are an extremely useful UI element to use in apps that I have been using since the start of iOS development and I wrote a
tutorial (below) to show how to create custom cells in IB. Since then, there has been a lot of development around frameworks and
libraries for custom cells. Ive recently written a review of Sensible Cocoas Sensible TableView which might be of interest to readers.
I think that Sensible Cocoas Sensible TableView is a very decent library to use if you want to quickly create a table view hierarchy
that displays complicated data sets.

Creating the project

Create a new project with the View-based Application template and call it CustomTableCell.

Setting up the view controller

Open CustomTableCellViewController.h and add two IB outlets which we will use to reference to the custom UITableViewCell
objects which we will create later. Also, we are going to be using this as a table view delegate and data source so we should state that
this class will conform to these protocols. Your CustomTableCellViewController.h should look like this after editing:
1
2
3
4
5
6
7
8

#import <UIKit/UIKit.h>
@interface CustomTableCellViewController : UIViewController <UITableViewDataSource, UITableViewDelegate>
@property (nonatomic, strong) IBOutlet UITableViewCell *cellOne;
@property (nonatomic, strong) IBOutlet UITableViewCell *cellTwo;
@end

Adding the items in Interface Builder

Open CustomTableCellViewController.xib and drop in a Table View (not a Table View Controller), making it fill the view.
Set the the table view properties to Style > Grouped.
Link the delegate and dataSource outlets of the table view to Files Owner as illustrated by this screenshot:

Add two Table View Cell items in IB to your CustomTableCellViewController.xib file. Then, open each table view cell item and
drop something different onto each one of them so you will tell them apart.
Now we need to link these table view cells to the IB outlets we created earlier. To do this, right click on Files Owner and link
cellOne and cellTwo outlets to the table view cells you have just created. You should then have something which looks like this:

Save and close CustomTableCellViewController.xib.

Controller Code
Open CustomTableViewController.m
We will need to implement three functions, namely tableView:cellForRowAtIndexPath:, numberOfSectionsInTableView: and
tableView:numberOfRowsInSection: which are the usual data source protocol functions which we need to implement. The three
functions are shown below.
1 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
2
if (indexPath.row == 0) return cellOne;
3
if (indexPath.row == 1) return cellTwo;
4
return nil;
5}

1 - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
2
return 1;
3}

1 - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {

2
return 2;
3}

These functions tell the table view to display 1 section, with 2 cells and when the table view asks for each cell, the custom
UITableViewCell objects are returned.

And thats it!

If you now build and run the application then you will notice that your custom cells are being shown brilliant! Now you can do
something fun with the custom cells! For instance you could put a text box or a slider in it and then bind actions of it to a function in
your view controller to act upon the users input.
Like I mentioned before though, I do suggest using something like Sensible Cocoas Sensible TableView if you want to create much
more customisable table views than you can do yourself. They even have mechanisms for using Interface Builder which, like my
tutorial here, I find very useful.

Updates
EDIT: Updated for Xcode 4
EDIT: Updated for latest code styling
Tweet

Like

Share 4 people like this. Be the first of your friends.

Comments
Add a comment...

Also post on Facebook

Posting as Swati Sharma

Comment

.
It would be more interesting to do it with dynamic cells list generated from data source that
observes a collection in a data model (MVC without a model layer seems to be none-MVC).
Reply Like Follow Post September 18, 2014 at 10:15am
Sumit Sharma

Follow

Hi Matt... I was developing an iOS application in which I am using custom cell. Suppose I
want to draw three image view on a custom.So should I take three image view or they can be
created at run time.
Reply Like Follow Post May 30, 2013 at 10:49am
Facebook social plugin

Recent Posts
iOS 7 by Tutorials
Book review -- Learning iOS Design: A Hands-On Guide for Programmers and Designers
A look inside blocks: Episode 3 (Block_copy)
Effective Objective-C 2.0
Why I've been quiet recently

GitHub Repos
RWDevCon-Swift-Language-Basics
RWDevCon-Swift-and-Cocoa
CocoaBugs
Bugs found in Apple's Cocoa / Cocoa Touch frameworks
@mattjgalloway on GitHub

Stack Overflow

Books

Affiliates

Copyright 2015 - Matt Galloway - Powered by Octopress