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.



If you enjoy my content, please consider supporting me on Ko-fi. In return you can browse this whole site without any pesky ads! More details here.

Leave a Comment!

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