Custom UITableViewCell in IB

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:

#import 

@interface customTableCellViewController : UIViewController  {
 IBOutlet UITableViewCell *cellOne;
 IBOutlet UITableViewCell *cellTwo;
}

@property (nonatomic, retain) IBOutlet UITableViewCell *cellOne;
@property (nonatomic, retain) IBOutlet UITableViewCell *cellTwo;

@end

Adding the items in Interface Builder

Open customTableCellViewController.xib in IB 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 “File’s 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 “File’s 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 outlined below.

tableView:cellForRowAtIndexPath:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
 if([indexPath row] == 0) return cellOne;
 if([indexPath row] == 1) return cellTwo;
 return nil;
}

numberOfSectionsInTableView:

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

tableView:numberOfRowsInSection:

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
 return 2;
}

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 that’s 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 user’s input.

Go play!