Setting the style of UITableView section headers

Question

I'm working with iOS 5 and have dynamically generated cells in a table (2 sections of 3 rows each). Each section has a header that is also dynamically generated using the titleForHeaderInSection call.

I also have an image set as the background for the table that makes the default color of the section headers hard to read. I haven't found a way to change the color of the section headers (or shadow color, font, text size, etc for that matter) either through the Storyboard interface or programmatically! Please help!

Papiamento

Answer 1

You can modify the font size/color/etc by creating your own view for the section header using the method tableView:viewForHeaderInSection:

There's an example of this technique here

Lightish

Thanks! That took care of it! – Papiamento

Answer 2

This also works in iOS5+. It applies to all of the section headers and footers in the tableview and suited my needs.

- (void)viewDidLoad
{
    [super viewDidLoad];

    [[UILabel appearanceWhenContainedIn:[UITableViewHeaderFooterView class], nil] setFont:[UIFont fontWithName:@"MyFont" size:8]];
}

Dan

Enedina

Just what I was looking for to modify the appearance of my table sections defined in a storyboard, without needing to implement tableView:viewForHeaderInSection:. Thanks! – Absher

You cannot use appearance proxy on UILabel. Even if you works, it could break with any revision. – Bazaar

In Swift 2, you can get the UIAppearance instance by using the static appearanceWhenContainedInInstancesOfClasses(_:) method. E.g., UILabel.appearanceWhenContainedInInstancesOfClasses([UITableViewHeaderFooterView.self]).textColor = UIColor.whiteColor() – Spiritualize

Answer 3

The actual easiest way

If you're not doing too much modification, for example just changing the font or colors:

- (void)tableView:(UITableView *)tableView willDisplayHeaderView:(UIView *)view forSection:(NSInteger)section
{
    UITableViewHeaderFooterView *tableViewHeaderFooterView = (UITableViewHeaderFooterView *)view;
    tableViewHeaderFooterView.textLabel.font = [UIFont fontWithName:@"HelveticaNeue-Light" size:12.0f];
    tableViewHeaderFooterView.textLabel.textColor = [UIColor colorWithRed:0.27f green:0.27f blue:0.27f alpha:1.0f];
    tableViewHeaderFooterView.contentView.backgroundColor = [UIColor colorWithRed:0.87f green:0.87f blue:0.87f alpha:1.0f];
}

Bazaar

Having issues with this when my section's text goes for several lines: the view's height does not adjust accordingly. Any idea how to fix this easily? – Insatiate

developer.apple.com/library/ios/documentation/UIKit/Reference/…: – Bazaar

This is by far the simplest way to do it. Kudos!! – Floatage

Answer 4

The UITableViewHeaderFooterView class implements a reusable view that can be placed at the top or bottom of a table section. You use headers and footers to display additional information for that section.

Availability: iOS (6.0 and later)

Example:

[[UILabel appearanceWhenContainedIn:[UITableViewHeaderFooterView class], nil] setColor:[UIColor whiteColor]];

Marquetry

I prefer this solution MUCH more than the accepted one, because you don't have to worry to excatly "rebuild" the header-view if you just want to change background-color or text-color. And it DOES work in iOS 7 if you use setTextColor. But if you want to customize the view more than just exchange some colors, using a complete new view - as the accepted answer suggests - might be the best way. – Alishiaalisia

Answer 5

The easiest way to get a custom section header - use a cell!

Very Similar to the technique used for

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

You can create an instance of a cell prototype that you provide. If your cell includes an outlet for a label, you can set it before returning it:

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger) section
{
    SessionTableViewCell *cell;
    cell = [tableView dequeueReusableCellWithIdentifier:@"SessionSectionHeader"];
    if (cell == nil) {
        cell = [[SessionTableViewCell alloc]
               initWithStyle:UITableViewCellStyleDefault
             reuseIdentifier:@"SessionSectionHeader"];
    }
    cell.myLabel.text = myTitles[section];
    return cell;
}

Note that @"SessionSectionHeader" is the identifier in the storyboard for our cell prototype.

HTH!

Biltong

Yeah, unless you need the section headers to be displayed as they are by default (that is fixed on top even if the first section cell is offscreen). – Incongruity

This also breaks accessibility, since section headers are no longer identifiable. – Erdman