UITableView custom section header appears below the cells

Question

I've a custom section header in my UITableView and I can't figure out why they are appearing bellow the UITableViewCell of the table. See the screenshots:

UITableViewCell are above the section header

This is the code that creates the section header:

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

    return [LojaInfoHeaderView lojaInfoHeaderForSection:section withTitle:sectionTitle opened:[self sectionIsOpen:section] andDelegate:self];
}
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {
    return [LojaInfoHeaderView viewHeight];
}

And the section's cell are inserted or deleted when the user touches the section header:

- (void)lojaInfoHeader:(LojaInfoHeaderView *)lojaInfoHeader sectionDidOpen:(NSInteger)section {
    NSArray *indexPathsToInsert = [self indexPathsForSection:section];
    [self setSection:section open:YES];
    [_tableView insertRowsAtIndexPaths:indexPathsToInsert withRowAnimation:UITableViewRowAnimationTop];
}

- (void)lojaInfoHeader:(LojaInfoHeaderView *)lojaInfoHeader sectionDidClose:(NSInteger)section {
    NSArray *indexPathsToDelete = [self indexPathsForSection:section];
    [self setSection:section open:NO];
    [_tableView deleteRowsAtIndexPaths:indexPathsToDelete withRowAnimation:UITableViewRowAnimationTop];    
}

How can I make the section header appears above the cells? How to fix it?

Update to show how things are created

These are the class methods I'm using:

+ (CGFloat)viewHeight {
    return 44.0;
}

+ (LojaInfoHeaderView *)lojaInfoHeaderForSection:(NSInteger)section withTitle:(NSString *)title opened:(BOOL)isOpen andDelegate:(id<LojaInfoHeaderDelegate>)delegate {
    LojaInfoHeaderView *newHeader = [[[LojaInfoHeaderView alloc] initWithFrame:CGRectMake(0, 0, 320, 44)] autorelease];
    newHeader.section = section;
    [newHeader setTitle:title];
    newHeader.delegate = delegate;
    [newHeader setOpen:isOpen animated:NO];
    return newHeader;
}

Are you positive that [LojaInfoHeaderView viewHeight] is actually returning the correct height and not returning 0? — imaginaryboy
Yes, the implementation is + (CGFloat)viewHeight { return 44.0; } // and 44 is the correct height. — Felipe Cypriano
Off topic: how are you getting the nav bar and toolbar and all the bar buttons to have that lovely purple color? Are you running under iOS 4.x? Thanks. (Not sure of best way to get response - short of posting question directed to you.) — westsider
thanks. does that override "Done" button and others that get the 'special' aqua blue color? — westsider

Felipe Cypriano Felipe Cypriano · Accepted Answer · 2010-12-04T19:28:23

I found the problem. I was setting the backgroundColor using alpha (yeah, I can't believe I miss this).

Wrong code in initWithFrame:

self.backgroundColor = [UIColor colorWithRed:0 green:0 blue:0 alpha:0.1];

Correct code:

self.backgroundColor = [UIColor colorWithRed:0.89 green:0.89 blue:0.89 alpha:1.0];

UITableView custom section header appears below the cells

2 Answers