How to style a table view header / footer

- by

The UITableView implements a header and a footer when you’re using the tableView:titleForHeaderInSection method (tableView:titleForFooterInSection respectively). However when the header (or the footer) is displayed you can’t change the font or colour of your text.

You can however implement the following methods in your table view delegate and create a custom UILabel object for the header like so:

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
    UILabel *headerLabel = [[UILabel alloc]init];
    headerLabel.text = @"My Custom Section Header";
    headerLabel.textColor = [UIColor whiteColor];
    headerLabel.shadowColor = [UIColor blackColor];
    headerLabel.font = [UIFont fontWithName:@"Chalkduster" size:24];
    headerLabel.backgroundColor = [UIColor clearColor];
    headerLabel.textAlignment = UITextAlignmentCenter;
    return headerLabel;

You can achieve the same for the footer by using the tableView:viewForFooterInSection method.

More info can be found in the UITableViewDelegate Protocol Reference.

Add your voice!

This site uses Akismet to reduce spam. Learn how your comment data is processed.