Undefined Value

While working on an iPhone application, I decided I wanted to change the colors of the background and section headers of a UITableView with the UITableViewStyleGrouped style. It took a lot more work than I expected, so I'm sharing what I learned with anyone else who needs to do this.

To review: when you create a table view with the grouped style, each section of the table shows up as a rounded rectangle, section titles are displayed as dark gray text between the rectangles, and the background is gray. I wanted the background to be a pale pastel color, so I looked into how to change that.

Of course, I first looked at the options in Interface Builder. A table view has a background color that can be set in IB, but setting that didn't accomplish anything.

With a bit of Googling, I learned that the way to give a table view a background color is to set the background color to [UIColor clearColor], and let the color (or image) of whatever is behind the table view show through. So, I set my window's backgroundColor to the color I wanted, and then added this to my table view's controller class:

#define TableViewTag 8888

- (void)viewDidLoad {
    [super viewDidLoad];

    // Make table view's background transparent to allow window background to be visible
    UITableView *tableView = (UITableView *)[self.view viewWithTag:TableViewTag];
    tableView.backgroundColor = [UIColor clearColor];
}

In Interface Builder, I set the tag of the table view to 8888. Another way to do this would be to have an outlet for the table view, but I didn't want to do that in this particular case.

So, that gave the table the background color I wanted, but I then noticed that the dark-gray section titles didn't look good against that color. I started looking for some sort of "sectionHeaderTextColor" property on the table view, but of course, there was no such thing.

After more Googling, I concluded that there was no way to just set the color. What you have to do is provide your own custom section header view containing a text label. With that, you can set whatever colors you want. So, I added these implementations of UITableViewDataSource protocol methods to my table view controller:

#define SectionHeaderHeight 40


- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {
    if ([self tableView:tableView titleForHeaderInSection:section] != nil) {
        return SectionHeaderHeight;
    }
    else {
        // If no section header title, no section header needed
        return 0;
    }
}


- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
    NSString *sectionTitle = [self tableView:tableView titleForHeaderInSection:section];
    if (sectionTitle == nil) {
        return nil;
    }

    // Create label with section title
    UILabel *label = [[[UILabel alloc] init] autorelease];
    label.frame = CGRectMake(20, 6, 300, 30);
    label.backgroundColor = [UIColor clearColor];
    label.textColor = [UIColor colorWithHue:(136.0/360.0)  // Slightly bluish green
                                 saturation:1.0
                                 brightness:0.60
                                      alpha:1.0];
    label.shadowColor = [UIColor whiteColor];
    label.shadowOffset = CGSizeMake(0.0, 1.0);
    label.font = [UIFont boldSystemFontOfSize:16];
    label.text = sectionTitle;

    // Create header view and add label as a subview
    UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, SectionHeaderHeight)];
    [view autorelease];
    [view addSubview:label];

    return view;
}

I also added a suitable implementation of tableView:titleForHeaderInSection:, and everything worked.

If there is a simpler way to do this, I'd love to hear about it.