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.

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.

Add UITableViewCell

Select UITableViewCell from wizard

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:

Save As nib file

Name UITableViewCell xib file

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

Remove View from TableCellView.xib

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.

Add UITableViewCell to nib file

Assign Class to Table Cell View

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:

Give class name to File’s Owner

Map UITableViewCell to Table View Controller

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

Map Label

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

Custom UITableViewCell Output

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

Run the application and you will see the final output.

Final Output of Custom UITableViewCell

Custom UITableViewCell code

You can grab this code from here.

Now watch me doing it

www.youtube.com/watch?v=rHfLEX4ra0o