dev gr
dev gr

Reputation: 2431

Best way to create custom UITableview section header in storyboard

Current I am creating a prototype cell in storyboard and using this cell as a section header. Inside tableView:viewForHeaderInSection: method, I am dequeuing the cell and returning it.

My section header cell has a UITextField and a UIButton in it. When I tap on text field keyboard appears but as soon as focus is moved away from text field whole section header disappears. This happens when I return the cell directly as section header view, but if I return a newly allocated UIView as section header view onto which cell is added as subview then everything works fine besides autoresizing masks.

Why header is disappearing?

I am not sure what could be the best thing todo here.

-(UIView *) tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
    static NSString *CellIdentifier = @"SectionHeader"; 

SettingsTableViewCell *sectionHeaderCell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    //return sectionHeaderCell; // returning cell directly, section header disappears when focus is moved away from text field.
UIView * headerView = [[UIView alloc] initWithFrame:sectionHeaderCell.frame];
[headerView addSubView:sectionHeaderCell];
return sectionHeaderCell;//header view never disappears, but auto resizing masks do not work. Need to know how to set autoresizing masks to headerView so that it resizes correctly.

}  

Upvotes: 10

Views: 18855

Answers (4)

Laszlo
Laszlo

Reputation: 2778

I had the same issue and the fix was to return the cell's contentView like:

-(UIView *) tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
static NSString *CellIdentifier = @"SectionHeader"; 

   SettingsTableViewCell *sectionHeaderCell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

   sectionHeaderCell.myPrettyLabel.text = @"Greetings";
   sectionHeaderCell.contentView.backgroundColor = [UIColor whiteColor]; // don't leave this transparent

   return sectionHeaderCell.contentView;
}  

And you get the same autolayouted results as before, but without the disappearing.

Upvotes: 9

Nelley Chung
Nelley Chung

Reputation: 59

In iOS 8, it's simple really. Just design your header the same way you design your cell. Everything is the same, you can put custom class and don't forget to add reuse identifier.

When it comes to use it in the code, just return that cell in tableView:viewForHeaderInSection method.

Don't forget to implement tableView:heightForHeaderInSection if you want to use fix height or tableView:estimatedHeightForHeaderInSection if the height depends on the cell intrinsic size.

Upvotes: 2

Sergey Demchenko
Sergey Demchenko

Reputation: 2954

I am sure you can use UITableViewCell as a section header, because UITableViewCell is subclass of UIView, so according to LSP

“objects in a program should be replaceable with instances of their subtypes without altering the correctness of that program.”

Upvotes: 2

Becca Royal-Gordon
Becca Royal-Gordon

Reputation: 17861

Prototype cell table views only allow you to design cells in the storyboard editor, not section headers and footers. Your attempt to use a UITableViewCell as the section header is a clever hack, but it's just not supported by the classes involved—UITableViewCell is not designed to be used for anything other than a table view cell. It could do a lot worse than the view disappearing or not being laid out correctly; UIKit would be well within its rights to fail an assertion, delete all the app's data, revoke your developer certificate, or set your house on fire.

If you want your code to function properly, your choices are to either create your section headers in code or to put them in a separate XIB file. I know that's not what you want to do, but those are the options you have.

Upvotes: 23

Related Questions