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!
Great tutorial! First one that I’ve seen that actually shows how to add custom table cells using IB and not entirely programmatically. Keep up the good work.
Thank you for your kind words Emil! I’ll certainly try to keep releasing tutorials – I’ve been doing them when I come across something which I’ve found hard to find information about on the internet / books.
Interestingly, the UITableViewCell thing has been approached by so many people in so many different ways, and there’s no true right or wrong way really.
Anyway, glad you liked the tutorial!
This can’t be right. ???
tableView:cellForRowAtIndexPath: returns a new UITableViewCell for each row. In your tutorial, it is returning the same object repeatedly!
For example, consider the conventional code:
if ((cell = [tableView dequeueReusableCellWithIdentifier:item_type]) == nil) {
cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:item_type] autorelease]; …
So, shouldn’t it be something like:
if ((cell = [tableView dequeueReusableCellWithIdentifier:item_type]) == nil) {
cell = [[cellOne copy] autorelease];…
?
Hi David,
What you say is sort of true, but in my example, there are only ever 2 rows. Therefore cellForRowAtIndexPath is returning a certain cell for row 0 (1st row) and a certain cell for row 1 (2nd row). This enables me to create the cell in IB and link it with outlets like I have shown.
Your method would be a good addition to be able to do the case where you have a generic cell which you want to use more than once in the same table, but want to use IB to create the cell and have it in the same XIB as the rest of the interface.
Matt
Hello,
Great tutorial Matt! A quick question: If you want to make your cells higher than the standard cells, how do you make sure that they are working properly? What I mean is that when making your custom cells higher, they are cut off sort of as they don’t fit in a standard cell (if this is clear at all).
Keep up the great work!
BN
Hello!
Yes you can do that with the heightForRowAtIndexpath function. Take a look at the documentation for the table view data source protocol and you should be able to find that function. You can just return a different height for each of your cells. Then you can make those cells the correct height in IB and you’re away. If you set things correctly in IB with regard to auto-resizing options then you’d even be able to have variable sized cells if you wanted.
Hope that helps!
Cell height related
It’s actually in the delegate not data source, here’s the link:
http://developer.apple.com/iphone/library/documentation/UIKit/Reference/UITableViewDelegate_Protocol/Reference/Reference.html#//apple_ref/occ/intfm/UITableViewDelegate/tableView:heightForRowAtIndexPath:
I started writing a tutorial about this a few days ago and finished it a few minutes ago, so if you want to see an alternative way of doing this check out my blog and feel free to comment!
http://humblecoder.blogspot.com/2009/05/iphone-tutorial-creating-table-cells-in.html
It’s not as professional looking as Matt’s, but hopefully as informative.
Nice little tutorial there Henrik! I like the idea you’ve done there, slightly different way of doing it to me. I’ve actually developed another method for doing custom cells as well but I really hope Apple decide to make it easier somehow because the difficulty is that you can’t have a NIB which is purely a view, which is just annoying…
Good Tutorial…I want to have a two cell in a row,as in contacts we have “text message” and “add to favourites” in a single row how to do that…. can anyone help me?