UITableViewHeaderFooterView with IB

Question

After many years of avoiding Interface Builder like the plague I decided to give it a chance. It's not easy.

Take UITableViewHeaderFooterView for example. Like UITableViewCell, it has a contentView property. Unlike UITableViewCell, it doesn't have a template in the Interface Builder object library.

How are we supposed to use Interface Builder to create a UITableViewHeaderFooterView with the content inside contentView? The fact that registerNib:forHeaderFooterViewReuseIdentifier: exists makes me think this should be possible somehow.

score 32 · Accepted Answer · edited Jan 10 '15 at 18:02

This is the closest I got to define a UITableViewHeaderFooterView with IB:

a. Create a UITableViewHeaderFooterView subclass (MYTableViewHeaderFooterView).

b. Create a nib file for the contentView only (MYTableViewHeaderFooterContentView).

c. Override initWithReuseIdentifier: in MYTableViewHeaderFooterView to load the view defined in the nib file.

 - (instancetype)initWithReuseIdentifier:(NSString *)reuseIdentifier
{
    self = [super initWithReuseIdentifier:reuseIdentifier];
    if (self)
    {
        NSArray* objects = [[NSBundle mainBundle] loadNibNamed:@"MYTableViewHeaderFooterView"
                                                          owner:self
                                                        options:nil];
        UIView *nibView = [objects firstObject];
        UIView *contentView = self.contentView;
        CGSize contentViewSize = contentView.frame.size;
        nibView.frame = CGRectMake(0, 0, contentViewSize.width, contentViewSize.height);
        [contentView addSubview:nibView];
    }
    return self;
}

d. Register the MYTableViewHeaderFooterView class instead of the nib file:

[self.tableView registerClass:[MYTableViewHeaderFooterView class] forHeaderFooterViewReuseIdentifier:@"cell"];

This is actually unecessary and apple has some sample code to prove this. Linking this question for newcomers http://stackoverflow.com/a/20073742/1652402 — Daniel Galasko, Aug 26 '15 at 11:29
a blast from the past - you can use contentView.bounds instead of CGRectMake, although @DanielGalasko answer is spot on — epolyakov, Jan 17 '16 at 02:54

Markus Rautopuro · Answer 2 · 2014-06-17T11:02:25.183

25

I just did this with a footer and a NIB file:

Create an empty NIB file with name CustomFooterView.xib.
Edit the NIB file in the Interface Builder and change the topmost UIView custom class to UITableViewHeaderFooterView.
Disable Auto Layout in the NIB.
Set the background color of UITableViewHeaderFooterView view to Default.
Make the view freeform and correct size (for example 320 x 44).

In your UITableViewController viewDidLoad register the NIB file to be used with a reuse identifier:

[self.tableView registerNib:[UINib nibWithNibName:@"CustomFooterView" bundle:nil] forHeaderFooterViewReuseIdentifier:@"Footer"];

In your UITableViewController's tableView:viewForFooterInSection: use the Footer identifier to fetch and return the view:

- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section
{
    if (section == 2)
        return [tableView dequeueReusableHeaderFooterViewWithIdentifier:@"Footer"];

    return nil; 
}

edited Jun 17 '14 at 11:02

answered Oct 28 '13 at 12:27

Markus Rautopuro

7,997
6
47
60

3

Works great, though I had to do two more things to get this to work: 1. Disable Auto Layout for the NIB. 2. Set the background color of the `UITableViewHeaderFooterView` view in the NIB to "Default". – Frederik May 05 '14 at 11:43
Thanks @Frederik, I updated the answer based on that. – Markus Rautopuro Jun 17 '14 at 11:03
1

I think this is the better solution because you can connect outlets in this xib, in the other solution you can't – JonEasy Jul 09 '15 at 07:38
This is a much cleaner solution to me. – C. Bess Feb 22 '17 at 03:13
1

This solution worked really well and much cleaner one compared to using tableview cell as header. – Vineeth Joseph Nov 06 '17 at 07:08

score 14 · Answer 3 · answered Aug 31 '14 at 18:37

14

Just use the UITableViewCell template in IB. Change the class to UITableViewHeaderFooterView. Here you have it... with a contentView.

answered Aug 31 '14 at 18:37

Jean-Pierre

560
4
6

1

This is the best solution! – user3378170 Aug 11 '15 at 17:39
I don't know if is a "This is the best solution!" but works fine and is easy to do! Thanks – Guilherme May 16 '20 at 14:28

score 7 · Answer 4 · answered Aug 27 '14 at 11:00

7

I found easier way.

1) Create subclass of UITableViewCell and set your xib file

2) In your header file change superclass from UITableViewCell to UITableViewHeaderFooterView

That's it.

answered Aug 27 '14 at 11:00

mdziadkowiec

1,531
13
11

5

This does not appear to work with XCode 6.4, at least. When you try to change the class in IB, it doesn't complete (a good sign things are going wrong). If you click away and come back, it reverts to `UITableViewCell`. If you look in the Nib's object list, a `UITableViewCell` is shown. When you do try to load, an assertion fires when the header is dequeued about it being the wrong kind: `'invalid nib registered for identifier (sectionHeader) - nib must contain exactly one top level object which must be a UITableViewHeaderFooterView instance'` – Benjohn Jul 15 '15 at 11:55

score 6 · Answer 5 · answered Jan 14 '16 at 05:21

This solution works well, especially if you want it to work correctly in relation to Readable Content Guides (introduced in iOS 9). Instead of creating a UITableViewHeaderFooterView, it simply returns a custom UIView (from a XIB) when it is required:

Create a new class that subclasses UIView ("AwesomeHeaderView") and create your outlets:
```
class AwesomeHeaderView: UIView {
    @IBOutlet var myCustomLabel: UILabel!
}
```
Create a XIB file ("MyNewHeader.xib") with a UIView as the parent view. Change the parent UIView's class type to your newly created custom class ("AwesomeHeaderView"). As required, add any additional views as it's children and link outlets etc. (NB: To ensure views comply to the new Readable Content Guides I check the boxes "Preserve Superview Margins" and "Follow Readable Width" on all objects).

In your UIViewController (or UITableViewController) call the following:

func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    guard let headerView = NSBundle.mainBundle().loadNibNamed("MyNewHeader", owner: nil, options: nil).first as? AwesomeHeaderView else {
        return nil
    }

    // configure header as normal
    headerView.backgroundColor = UIColor.redColor()
    headerView.myCustomLabel.textColor = UIColor.whiteColor()
    headerView.myCustomLabel.text = "Hello"

    return header
}

xianwill · Answer 6 · 2015-10-22T06:13:46.363

I also experienced the deprecation warning above and an inability to set background color, etc.. Eventually, I found that according to Apple's documentation,

You can use [the UITableViewHeaderFooter] class as-is without subclassing in most cases. If you have custom content to display, create the subviews for your content and add them to the view in the contentView property.

Following that suggestion, I took these steps:

I created a xib with a view that extends only UIView--not UITableViewHeaderFooter.
In viewDidLoad I registered the built-in UITableViewHeaderFooter class

tableView.registerClass(UITableViewHeaderFooterView.self, forHeaderFooterViewReuseIdentifier: "sectionHeader")

In the viewForHeaderInSection delegate of my UITableViewController, I dequeued the header view by that identifier and checked to see if the header view already contained a subview. If not, I load my xib and add it. Then I set my text as needed.

override func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let header = self.tableView.dequeueReusableHeaderFooterViewWithIdentifier("sectionHeader")!

if header.contentView.subviews.count == 0 { header.contentView.addSubview(loadMyNib()) }

let myView = header.contentView.subviews[0] as! MyView
myView.label.text = "..."

This seems to work, leverages reuse, and does not produce any warnings.

https://developer.apple.com/library/prerelease/tvos/documentation/UIKit/Reference/UITableViewHeaderFooterView_class/index.html#//apple_ref/occ/instm/UITableViewHeaderFooterView/prepareForReuse

dklt · Answer 7 · 2016-01-22T04:31:38.637

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

create a (New File/CocoaTouchClass) UITableViewHeaderFooterView .h.m.xib normally
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.
in your tableview, use registerNib: to register instead of registerClass:. prepare the rest of tableview normally (ie:dequeue).

score 0 · Answer 8 · answered Oct 07 '15 at 16:13

An awful hack I figured out is to create a IBOutlet contentView ih your headerFooter class and hook it up to the your "content view" in the xib (Have your xib laid out like a tableViewCell, View->contentView->mystuff).

You'll get warnings, ok ready for the hack...

Delete the IBOutlet and it will all work.

score 0 · Answer 9 · answered Nov 16 '21 at 08:28

The best way I found:

Create your HeaderFooterView(.h/.m), such as header
Create a xib(view), name the same
Make the root view class as your class(header)
[important] Connect all outlets to the root view, not the File's Owner

Last, register your nib to table(All done).

UITableViewHeaderFooterView with IB

9 Answers9

Linked