iPhone Programming Tutorial: Part 6: Creating custom UITableViewCell Using Interface Builder [UITableView]

Introduction:

I am going to write series of UITableView tutorials (Video Tutorials as well). My target is to make the customized UITableView using UITableViewCell which is requested on “Request Tutorial” page. Following are the list of tutorials, which I will be posting on this blog:

1. Create a Simple UITableView [Populate UITableView With Array]
2. Navigatation in UITableView [Navigatation on UITableView using didSelectRowAtIndexPath]
3. Grouped UITableView [Using Interface builder]
4. Tips for UITableView Design [Change UITableView properties i.e background colour, accessory type, add footer and header]
5. Add, Delete & Re-order UITableView rows
6. Creating UITableView using UITableViewCell
7. Adding Pictures into your UITableView using Interface builder
8. UITableView & UITableViewCell examples and tips

[Note: If you want more tutorials on UITableView or UITableViewCell, then add a comment on "Request Tutorial" Page]

Idea of this tutorial:

UITableViewCell tutorial will explain how you can use UITableViewCell in UITableView. Custom UITableViewCell using Interface builder makes table view design very easy. Using UITableViewCell gives you lot of customization over the design of each row. You can easily reduce number of code lines by using UITableViewCell (i.e reduce customization code and easy to manage your table). There are few things which are little hard to do using UITableView but using UITableViewCell they are easily manageable i.e you can manage your cell code in a separate class, you can change the design of cell using nib files more easily then writing codes. So in my point of view, custom UITableViewCell using Interface builder makes your life more easy while developing applications for iPhone.

So in this tutorial, i will write only UITableViewCell and link it with UITableView. I will be using part 2 code, which you can grab from here. Final output of this code will be same as part two but to change the design on table will be really simple. You can watch the video tutorial at the end to skip all the text.

Picture 1 iPhone Programming Tutorial: Part 6: Creating custom UITableViewCell Using Interface Builder [UITableView]
customize UITableView using UITableViewCell

Steps to follow

Follow these steps to achieve the output like above:

Step 1: Open the SimpleTable project in Xcode (you can grab this code from here. [Note: I am using UITableView part 2 code here]). In Xcode, ‘Group and Panel’ right click on classes, select >Add> New File..>. Now select UITableViewCell and name it ‘TableViewCell’, press finished.

Picture 2 iPhone Programming Tutorial: Part 6: Creating custom UITableViewCell Using Interface Builder [UITableView]
Add UITableViewCell

Picture 3 iPhone Programming Tutorial: Part 6: Creating custom UITableViewCell Using Interface Builder [UITableView]
Select UITableViewCell from wizard

Picture 4 iPhone Programming Tutorial: Part 6: Creating custom UITableViewCell Using Interface Builder [UITableView]
Name the UITableViewCell class

Step 2: Now in ‘TableViewCell.h’ file add following code before @end and after #import:

@interface TableCellView : UITableViewCell {
IBOutlet UILabel *cellText;
}

- (void)setLabelText:(NSString *)_text;

Step 3: Now open ‘TableViewCell.m’ file and write a setter method for label like this:

- (void)setLabelText:(NSString *)_text;{
cellText.text = _text;
}

Step 4: Open SimpleTableViewController.h file and write following:

#import "TableCellView.h"
@interface SimpleTableViewController : UIViewController {
IBOutlet UITableView *tblSimpleTable;
NSArray *arryData;
IBOutlet TableCellView *tblCell;
}

Step 5: Open SimpleTableViewController.h file and import ‘TableCellView.h’ at top.

#import "TableCellView.h"

In cellForRowAtIndexPath method remove all the code or either comment the code. Add the following code in that method:

static NSString *MyIdentifier = @"MyIdentifier";
MyIdentifier = @"tblCellView";

TableCellView *cell = (TableCellView *)[tableView dequeueReusableCellWithIdentifier:MyIdentifier];
if(cell == nil) {
[[NSBundle mainBundle] loadNibNamed:@"TableCellView" owner:self options:nil];
cell = tblCell;
}

[cell setLabelText:[arryData objectAtIndex:indexPath.row]];
return cell;

Step 6: Now open NextView.xib file from your Xcode project. Press cmd + shift + s to save as this file, and give it a name TableViewCell and ‘Add’ to ‘SimpleTable’ project:

Picture 5 iPhone Programming Tutorial: Part 6: Creating custom UITableViewCell Using Interface Builder [UITableView]
Save As nib file

Picture 6 iPhone Programming Tutorial: Part 6: Creating custom UITableViewCell Using Interface Builder [UITableView]
Name UITableViewCell xib file
Picture 7 iPhone Programming Tutorial: Part 6: Creating custom UITableViewCell Using Interface Builder [UITableView]
Save nib file

Step 7: Now in TableViewCell.xib file, select ‘View’ and then select Edit>Delete (or press ‘back space’ button) to remove the View from xib file

Picture 8 iPhone Programming Tutorial: Part 6: Creating custom UITableViewCell Using Interface Builder [UITableView]
Remove View from TableCellView.xib

Picture 9 iPhone Programming Tutorial: Part 6: Creating custom UITableViewCell Using Interface Builder [UITableView]
Deleted View from TableCellView

Step 8: Now press cmd + shift + l to open Library. Drag ‘Table View Cell’ to ‘TableViewCell.xib’ file. Select ‘Table View Cell’ and press cmd + 4 and write ‘TableCellView’ in class and press cmd + 1 and write ‘tblCellView’ in Identifier.

Picture 10 iPhone Programming Tutorial: Part 6: Creating custom UITableViewCell Using Interface Builder [UITableView]
Add UITableViewCell to nib file

Picture 11 iPhone Programming Tutorial: Part 6: Creating custom UITableViewCell Using Interface Builder [UITableView]
Assign Class to Table Cell View

Picture 12 iPhone Programming Tutorial: Part 6: Creating custom UITableViewCell Using Interface Builder [UITableView]
Add Identifier to Table Cell View

Step 9: Now select ‘Files Owner’ and press cmd + 4 and type ‘SimpleTableViewController’ in class. Also press cmd + 2 and drag tblCell to ‘Table View Cell’ like in the below picture:

Picture 13 iPhone Programming Tutorial: Part 6: Creating custom UITableViewCell Using Interface Builder [UITableView]
Give class name to File’s Owner
Picture 14 iPhone Programming Tutorial: Part 6: Creating custom UITableViewCell Using Interface Builder [UITableView]
Map UITableViewCell to Table View Controller

Step 10: Now drag a label inside UITableViewCell and select ‘TableViewCell’, drag cellText with label.

Picture 15 iPhone Programming Tutorial: Part 6: Creating custom UITableViewCell Using Interface Builder [UITableView]
Map Label

Step 11: Save the interface builder and your code. Run the application and you will see the output like this:

Picture 16 iPhone Programming Tutorial: Part 6: Creating custom UITableViewCell Using Interface Builder [UITableView]
Custom UITableViewCell Output

Looked at bottom pictures to change the color of labels and cell Accessory:

Picture 17 iPhone Programming Tutorial: Part 6: Creating custom UITableViewCell Using Interface Builder [UITableView]
Change Table Cell View Accessory

Picture 18 iPhone Programming Tutorial: Part 6: Creating custom UITableViewCell Using Interface Builder [UITableView]
Change Label Text colour

Picture 19 iPhone Programming Tutorial: Part 6: Creating custom UITableViewCell Using Interface Builder [UITableView]
Label Colour text change

Run the application and you will see the final output.

Picture 1 iPhone Programming Tutorial: Part 6: Creating custom UITableViewCell Using Interface Builder [UITableView]
Final Output of Custom UITableViewCell

Custom UITableViewCell code

You can grab this code from here.

Now watch me doing it

Popularity: 79% [?]

My name is Adeem M Basraa. I am a software engineer from Lahore, PK. I’ve been involved in software development for nearly 4 years, with the last 1 year focused on application development for mobile devices (iPhone & Android).

24 Comments on "iPhone Programming Tutorial: Part 6: Creating custom UITableViewCell Using Interface Builder [UITableView]"

  1. very nice tutorial, thanks

  2. Adeem Basraa says:

    keep visiting as i m going to write more post on UITableView and UITableViewCell including more customization.

  3. Zxed says:

    Having odd issues with my customcell view., will try to use ur tutorial tomorrow.,

  4. Mark says:

    Thanks, closest yet to what I’m trying. Suppose the Cell view had a UITextLabel that gets edited. How do I get that change back to the table controller (to save the change)? Related, how do I call every cell (e.g., enabled, to turn edit on/off), since controller doesn’t have array of tblCells?

  5. YG says:

    Hi, thanks for all the tutorials!

    I would like to know if it is possible or not, to create a specific view for each cell.
    I saw a lot of tutorials which are using the label to change a word, but I would like to create a table view looking like this

    TABLE VIEW

    CELL1
    CONTENT1
    CELL2
    CONTENT2
    CELL3
    NEW_TABLEVIEW
    CELL3.1
    CELL3.2
    CELL4
    CONTENT4

    And this using a specific view for each one, so that I can configure them just like I need. A label only contains text, but it would be interesting to be able to change more than that. There’s no tutorial like this on all the world wide google :)

    Hope you can do that…

  6. Yara says:

    Hello,

    It works! Thanks.

    In this line
    [[NSBundle mainBundle] loadNibNamed:@”TableCellView” owner:self

    Shouldn’t we use TableViewCell instead of TableCellView ?

    In the following command you are telling us
    “a name TableViewCell and ‘Add’ to ‘SimpleTable’ project:”

    If they are different it doesn’t work.

    Thanks again, best regards,
    yara

  7. Tarun Mishra says:

    Hi!
    I tried to insert the TableCellView.xib in SimpleTableViewController.xib;
    Steps are:
    1)I cut the TableCelView from TableCellView.xib
    and paste it inside the SimpleTableViewControler.xib
    2)I deleted the TableCellView.xib
    3)I made the appropiate connection in SimpleTableViewControler.xib with TableCellView item.
    4)I deleted the line
    [[NSBundle mainBundle] loadNibNamed:@”TableCellView” owner:self options:nil];

    Now,the application runs successfully but it shows only one item in the tableView. Also the height of the Cell is very much stretched.

    Pleae tell me how to fix it.

    I require to contain the XIBs in a sigle filr.

  8. Brat says:

    Hi,

    is there any tutorials for creating chat message bubbles table view.

  9. ott-- says:

    Thanks, this was great help. Before that I tried to set up the TableViewCell just programmatically (without a nib), and it almost made me mad.

  10. Adeem Basraa says:

    It’s very easy may be soon I write that too.

  11. Bowie says:

    Thanks!.

    How would you push to a new UITableView?

  12. Mattias Malmqvist says:

    Wow, this was actually big great help!

    I’ve been wondering how this can be done for quite some time and found only quite difficult solutions but yours was really smooth.

    I’m surprised you haven’t got more comments regarding this.

    Thanks a lot!

Trackbacks for this post

  1. iPhone SDK Tutorial or Video Tutorial - {Part 4} Tips for UITableView Design [Add Header, Footer, background images & change design] | iPhone Diary | Tips
  2. iPhone SDK Tutorial + Video Tutorial - {Part 2} Navigation in UITableView | iPhone Diary | Tutorial
  3. iPhone SDK Tutorial + Video Tutorial - {Part 3} Grouped UITableView | iPhone SDK Tutorial for Beginners | Tutorial
  4. iPhone SDK Tutorial or Video Tutorial – {Part 5}: Add, Delete & Reorder UITableView Rows | iPhone SDK Tutorial for Beginners | Cydia
  5. iPhone Tutorial – {Part 7}: Adding Pictures into your table’s using Interface builder | iPhone SDK Tutorial for Beginners | Tips
  6. iPhone SDK Tutorial + Video Tutorial - {Part 1} UITableView using NSArray | iPhone SDK Tutorial for Beginners | Tutorial
  7. Complete List of UITableView UITableViewCell Tutorials + Video Tutorials | iPhone SDK Tutorial for Beginners | Tips
  8. iPhone App Performance Optimization « Software Development, Research and Learn
  9. iPhone App Performance Optimization | Research, Dev and Share
  10. Custom UITableViewCell | Matt Hunter's Blog
  11. How to put the green Add icon unconditionally on the Insert row - Applerr.com All about Apple Products - Applerr.com All about Apple Products
  12. Three20 And Custom NIB TableViewCells

Got something to say? Go for it!