Editable tableHeaderView in UITableView (like Contacts App)

Question

Hello!

I'm currently trying to implement a editable details view using a grouped UITableView. I'd like it to look like the Contacts application:

• in viewing-state it should display the header as plain label (in Contacts it's the name with TRANSPARENT background).
• in editing-state it should display the header as editable UITableViewCell (in Contact's the tableHeader? changes from just the plain text with transparent background to a standard UITableViewCell with white background).

I'm not really sure what the best way is the achieve this. First I've tried to add the header as UILabel tableHeaderView (which works great), but then I cannot switch this to a UITableViewCell. A possibility would be to remove the header and add a new section when entering editing mode.

Currently I'm trying to always use a UITableViewCell and make it transparent in viewing mode and switch it to default in editing mode. However, I haven't been able to make the UILabel of the UITableViewCell (which is in UITableViewCellStyleDefault) transparent (although I did manage to make the UITableViewCell transparent, but not the textLabel inside it).

What is the best way to implement this behavior?

Answer 1

What you are trying to do is very standard, consider implementing these protocols in the UITableViewDatasource, especially the titleForHeaderInSection & commitEditingStyle:

Configuring a Table View
– tableView:cellForRowAtIndexPath:  required method
– numberOfSectionsInTableView:
– tableView:numberOfRowsInSection:  required method
– sectionIndexTitlesForTableView:
– tableView:sectionForSectionIndexTitle:atIndex:
– tableView:titleForHeaderInSection:
– tableView:titleForFooterInSection:

Inserting or Deleting Table Rows
– tableView:commitEditingStyle:forRowAtIndexPath:
– tableView:canEditRowAtIndexPath:

Remember to choose the type of your TableView as Group instead of Plain in the Interface Builder.

Answer 2

I've done this too (although a moot point with the changes to the Contacts app in iOS4!) My solution uses two different header views and switches between them based on isEditing:

- (UIView *)infoHeaderAnimated:(BOOL)animated {
    UIView *header = [[[UIView alloc] initWithFrame:CGRectMake(0.0, 0.0, 320.0, 90.0)] autorelease];
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(98.0, 41.0, 221.0, 21.0)];
    label.font = [UIFont boldSystemFontOfSize:17.0];
    label.backgroundColor = [UIColor clearColor];
    label.text = baseEntity.labelText;
    [header addSubview:label];
    [label release];
    return header;
}

- (UIView *)editingHeaderAnimated:(BOOL)animated {
    UIView *header = [[[UIView alloc] initWithFrame:CGRectMake(0.0, 0.0, 320.0, 90.0)] autorelease];
    UITableView *tv = [[UITableView alloc] initWithFrame:CGRectMake(78.0, 10.0, 240.0, 90.0) style:UITableViewStyleGrouped];
    tv.backgroundColor = [UIColor clearColor];
    tv.dataSource = self;
    tv.delegate = self;
    tv.rowHeight = 62.0;    //@@@ height of cell and frame depend on elements
    tv.tag = kEditingHeaderTag;
    editingHeaderTableView = [tv retain];
    [header addSubview:tv];
[tv release];   
    return header;
}