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!

score 37 · Answer 1 · answered Oct 29 '12 at 09:02

37

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

answered Oct 29 '12 at 09:02

Dan Power

1,141
1
12
18

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! – Eric Baker Apr 25 '13 at 01:36
You cannot use appearance proxy on UILabel. Even if you works, it could break with any revision. – Cameron Lowell Palmer Aug 05 '13 at 19:17
In Swift 2, you can get the `UIAppearance` instance by using the static `appearanceWhenContainedInInstancesOfClasses(_:)` method. E.g., `UILabel.appearanceWhenContainedInInstancesOfClasses([UITableViewHeaderFooterView.self]).textColor = UIColor.whiteColor()` – Isaac Overacker Aug 31 '16 at 20:42

score 17 · Accepted Answer · edited Oct 04 '20 at 20:51

17

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

edited Oct 04 '20 at 20:51

Ry-

218,210
55
464
476

answered Mar 04 '12 at 16:36

jonkroll

15,682
4
50
43

Thanks! That took care of it! – Russell Winkler Mar 04 '12 at 18:35

Cameron Lowell Palmer · Answer 3 · 2014-03-18T15:15:18.993

13

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];
}

edited Mar 18 '14 at 15:15

answered Mar 18 '14 at 15:07

Cameron Lowell Palmer

21,528
7
125
126

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? – Konrad Mar 26 '16 at 17:38
https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITableViewDelegate_Protocol/index.html#//apple_ref/occ/intfm/UITableViewDelegate/tableView:heightForHeaderInSection: – Cameron Lowell Palmer Mar 26 '16 at 19:31
This is by far the simplest way to do it. Kudos!! – Tim Kokesh Dec 12 '18 at 06:02

score 7 · Answer 4 · edited May 08 '13 at 03:04

7

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]];

edited May 08 '13 at 03:04

Jared

25,627
7
56
61

answered May 08 '13 at 02:45

magofdl

79
1
5

2

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. – Habizzle Oct 12 '13 at 13:12

score 0 · Answer 5 · answered Oct 31 '13 at 09:04

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!

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). — Sea Coast of Tibet, Apr 01 '14 at 20:03
This also breaks accessibility, since section headers are no longer identifiable. — Robin Daugherty, Mar 06 '18 at 06:00

Setting the style of UITableView section headers

5 Answers5

The actual easiest way

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