Question

I am trying to create a table view header with rounded corners but a gap is appearing on the top of the header view and I cannot get rid of it. See picture:

this is the code I have for the header

#define HEADER_HEIGHT 35.0f


- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
   return HEADER_HEIGHT;
}

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {


   if (tableView.tableHeaderView) { // header was already created... go away
     return tableView.tableHeaderView;
   }

   CGFloat width = 300.0f;
   CGRect rectArea = CGRectMake(10.0f, 5.0f, width, HEADER_HEIGHT);

   tableView.tableHeaderView = [[[UIView alloc] initWithFrame:rectArea] autorelease];

   UIColor *orange =  [UIColor colorWithRed:(255.0f/255.0f) green:(228.0f/255.0f) blue:0.0f alpha:1.0f];

   [tableView.tableHeaderView setBackgroundColor:orange];

   rectArea = CGRectMake(10.0f, 5.0f, width, HEADER_HEIGHT);
   UILabel *lbl = [[UILabel alloc] initWithFrame:rectArea];
   lbl.text = NSLocalizedString(@"TGERAL", @"");
   lbl.textAlignment = UITextAlignmentLeft;
   lbl.font = [UIFont systemFontOfSize:13.0f];
   lbl.textColor = [UIColor blackColor];
   lbl.backgroundColor = [UIColor clearColor];
   lbl.numberOfLines = 2.0f;
   lbl.lineBreakMode = UILineBreakModeWordWrap;
   //[lbl sizeToFit];

   [tableView.tableHeaderView addSubview:lbl];
   [lbl release];

   self.tableView.tableHeaderView.layer.cornerRadius = 6.0f;

   return tableView.tableHeaderView;
}

If I change HEADER_HEIGHT or I add a certain amount of pixels to the height of the tableHeaderView or to the label height, all that happens is an increase in the gap.

Do you guys know what I am missing?

thanks

Answer 1

A tableview has two types of headers, and I think you’re confusing / intertwining the two.

The first is the table header. The second is table section headers.

I’m unclear which one you want. If you want a single header for the whole table, you want the table header, and you set it using tableView.tableHeaderView = myHeaderView. You can set the height of this header by setting the frame height for your view. The tableView will set the width of this header automatically.

If you want individual headers in each table section, you must override tableView:viewForHeaderInSection:, and return a custom view. Again, you should set the initial frame for this view to the height you want; the tableview will adjust the width.