UITableViewHeaderFooterView in InterfaceBuilder

Question

I want to create a custom header section view in a separate .xib using IB

However in IB i cannot find a component UITableViewHeaderFooterView (similar to UITableViewCell) and assign a reuse for it

So how to create in custom header section?

I create a class MySection which inherits from UITableViewHeaderFooterView Create a .xib, MySection.xib Register xib for cell reuse

the problem is, how to use the initWitReuseIdentifier....

Answer 1

It's absolutely possible and Apple provides an example here.

Download the sample code and look at the SectionHeaderView.xib.

The way to do it is to create a xib with a single UIView on it. Then, set the class type to a class that inherits from UITableViewHeaderFooterView.

Once you have a nib with a class that inherits from UITableViewHeaderFooterView, call the following to register the class for reuse as a header or footer:

static NSString * const SectionHeaderViewIdentifier = @"SectionHeaderViewIdentifier";

[self.tableView registerNib:[UINib nibWithNibName:@"SectionHeaderView" bundle:nil] forHeaderFooterViewReuseIdentifier:SectionHeaderViewIdentifier];

To put the view into use, implement the table delegate method tableView:viewForHeaderInSection: like so:

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

    SectionHeaderViewClass *sectionHeaderView = (SectionHeaderView *)[tableView dequeueReusableHeaderFooterViewWithIdentifier:SectionHeaderViewIdentifier];

    // Do stuff...

    return sectionHeaderView;
}

Answer 2

I have written a guide (tested on iOS 9), which comprise of 4 steps:

1. Subclass UITableViewHeaderFooterView
2. Create Nib with the subclass view, and add 1 container view which contains all other views in the header/footer
3. In viewDidLoad, call registerNib:forHeaderFooterViewReuseIdentifier: for the table view
4. Implement viewForHeaderInSection and use dequeueReusableHeaderFooterViewWithIdentifier to get back the header/footer

Answer 3

While all these answers work, they don't quite address the original question of how to set the reuseIdentifier using Interface Builder. It is, indeed, possible with the help of "User Defined Runtime Attributes". You can set the reuseIdentifier directly in Interface Builder using an attribute:

Doing this will accomplish exactly the same thing as the native reuseIdentifier field in UITableViewCell Interface Builder attribute inspector.

Answer 4

Following workarounds enable me to drag-assign IB items to code as variables. UITableViewHeaderFooterView doesnt allow that out of the box.

1. create a (New File/CocoaTouchClass) UITableViewHeaderFooterView .h.m.xib normally

2. temporarily rename superclass from UITableViewHeaderFooterView to UIView. Drag-assign your UI items to code as needed, IB will assign key-value correctly, revert back to UITableViewHeaderFooterView when done.

3. in your tableview, use registerNib: to register instead of registerClass:. prepare the rest of tableview normally (ie:dequeue).

Answer 5

As of iOS 8, subviews of UITableHeaderFooterView should be in a container view and you should not set background on header/footer views. Object Library lacks UITableHeaderFooterView, so I tried the approach of creating an UIView in xib and adding another one into it as Container View. My concern was that there's not content view outlet on UITableHeaderFooterView and I cannot be sure that my content view actually ends up as content view.

This sounds like a hack or API missuse, however I experienced no warnings or problems with this approach:

1. Create a subclass of UITableHeaderFooterView
2. Create an empty xib for it
3. Drag an UITableViewCell from object library
4. Assign the class of your UITableHeaderFooterView to that cell
5. Assign the reuse identifier

I would like to know about any (potential) problems with this approach, please comment.

Answer 6

Its enough to create a view and assign its class in IB (the reuse identifier doesn't need to be set in interface builder (as by a custom UITableViewCell))

Answer 7

UITableViewHeaderFooterView documentation contains registerNib:forHeaderFooterViewReuseIdentifier: method

But currently (as of Sep 4 '13) Object Library in Interface Builder didn't include a UITableViewHeaderFooterView. This makes registerNib:forHeaderFooterViewReuseIdentifier: useless, because there’s no way to configure the view correctly in the nib. Perhaps it is better to try reusing cell ...

Answer 8

1. create new view in xib

2. Load view from nib and set to view as footerview to tableview

UIView *headerview = [[[NSBundle mainBundle] loadNibNamed:@"ReguistrationHeaderView" owner:self options:nil] firstObject]; [self.tableview setTableFooterView:headerview];

Answer 9

I always used UITableViewCell as Headers (or Footers) for my tables to be able to edit them directly in the storyboard.

My workflow :

• I create a MyHeaderTableViewCell class subclassing UITableViewCell and adding all the outlets I need
• I add a UITableViewCell to my table in my storyboard
• I give it a reuse identifier (es: "HeaderCell")
• I dequeue the cell and use its content as my header

The crucial part is returning the contentView of the headerCell (not the headerCell itself) otherwise you'll run into strange behaviors when playing with reloadRowsAt or similar functions (disappearing headers at most).

This is my code :

func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {

    let headerCell = tableView.dequeueReusableCell(withIdentifier: "HeaderCell") as! MyHeaderTableViewCell

    headerCell.lblTitle.text = "My Title"

    return headerCell.contentView }

I never faced issues in doing so (or at least my customers always paid me).