iPhone Development 101: UITableView: Customizing Table Cells, Headers and Footers

Home

iPhone 101

Learning iOS Programming

Code Tips

Objective-C
User Interface
Distribution
Marketing

Resources

Buttons & Icons

Privacy
Contact

Note: This section is for developers who are not using Storyboards. If you use Storyboards for your project, then you can customize the layout for your table cells directly in the Storyboard editor. Visit Ray Wenderlich's excellent Beginning Storyboards in iOS5 tutorial for an intro.

Customizing Table Cells

If you want to create your own custom table cell styles, you'll need to replace the cell's contentView with your own views. This can be done programmatically by modifying the tableView:cellForRowAtIndexPath: method, and creating new subviews (buttons, labels, background images) when you initialize the cell.


// Customize the appearance of table view cells.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    
    static NSString *CellIdentifier = @"Cell";
    
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        // allocate the cell:
        cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:CellIdentifier] autorelease];
        
        // create a background image for the cell:
        UIImageView *bgView = [[[UIImageView alloc] initWithFrame:CGRectZero] autorelease];
        [cell setBackgroundColor:[UIColor clearColor]];
        [cell setSelectionStyle:UITableViewCellSelectionStyleNone];
        [cell setBackgroundView:bgView];
        [cell setIndentationWidth:0.0];
        
        // create a custom label:                                        x    y   width  height
        UILabel *nameLabel = [[UILabel alloc] initWithFrame:CGRectMake(20.0, 8.0, 300.0, 30.0)];
        [nameLabel setTag:1];
        [nameLabel setBackgroundColor:[UIColor clearColor]]; // transparent label background
        [nameLabel setFont:[UIFont boldSystemFontOfSize:17.0]];
        // custom views should be added as subviews of the cell's contentView:
        [cell.contentView addSubview:nameLabel];
        [nameLabel release];
    }
    
    // Configure the cell:
    ((UIImageView *)cell.backgroundView).image = [UIImage imageNamed:@"awardbg.png"];
    [(UILabel *)[cell.contentView viewWithTag:1] setText:[data1 objectAtIndex:indexPath.row]];

    return cell;
}

The above code creates a table where each cell has a custom background image (awardbg.png) and a text label. Example

The cell's backgroundView goes behind all the other views. If you set a custom background on a plain style table, the background should be 320 points wide. For grouped tables, cell backgrounds should be 300 points wide.

The default cell height is 44 points high; if you want the cell height to be larger (or smaller), you must implement tableView:heightForRowAtIndexPath:

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    return 60;
}

Customizing Table Section Headers/Footers

A grouped table view has multiple sections, and you can customize the section headers by adding these methods to your table view delegate:

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
    return headerView;
}

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {
    return 30.0;
}

- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section {
    return footerView;
}

- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section {
    return 30.0;
}

In this example, headerView and footerView can either be IBOutlets to views you've set up in Interface Builder, or to UIViews you've created programmatically. If you do create these views programmatically, you should create them in the view controller's viewDidLoad method, and save them to retained property variables:

- (void)viewDidLoad {
    [super viewDidLoad];

    UIImageView *hdr = [[[UIImageView alloc] initWithFrame:CGRectZero] autorelease];
    [hdr setBackgroundColor:[UIColor clearColor]];
    [hdr setImage:[UIImage imageWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"hdr" ofType:@"png"]]];
    [self setHeaderView:hdr];
    [hdr release];
    
    UIImageView *footer = [[[UIImageView alloc] initWithFrame:CGRectZero] autorelease];
    [footer setBackgroundColor:[UIColor clearColor]];
    [footer setImage:[UIImage imageWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"footer" ofType:@"png"]]];
    [self setFooterView:footer];
    [footer release];
}

The tableView:viewForFooterInSection: and tableView:viewForFooterInSection: methods may be called frequently as the user scrolls the table, so it's best to return the retained view, rather than recreate it every time the method gets called.

Here's a sample of a custom grouped-style table, and the source code for it:

CustomTableViewController.m

Additional References

Top • Home