UITableViewHeaderFooterView: Unable to change background color

Chun picture Chun · Mar 24, 2013 · Viewed 53.8k times · Source

I'm trying to change the background color of UITableViewHeaderFooterView. Although the view is appearing, the background color remains the default color. I'm getting a log from xcode saying:

Setting the background color on UITableViewHeaderFooterView has been deprecated. Please use contentView.backgroundColor instead.

However, none of the following options work:

myTableViewHeaderFooterView.contentView.backgroundColor = [UIColor blackColor];
myTableViewHeaderFooterView.backgroundView.backgroundColor = [UIColor blackColor];
myTableViewHeaderFooterView.backgroundColor = [UIColor blackColor];

I've also tried changing the background color of the view in the xib file.

Any suggestions? Thanks.

Answer

SwiftArchitect picture SwiftArchitect · Aug 31, 2014

iOS 8, 9, 10, 11...

The only way to set any color (with any alpha) is to use backgroundView:

Swift

self.backgroundView = UIView(frame: self.bounds)
self.backgroundView.backgroundColor = UIColor(white: 0.5, alpha: 0.5)

Obj-C

self.backgroundView = ({
    UIView * view = [[UIView alloc] initWithFrame:self.bounds];
    view.backgroundColor = [UIColor colorWithWhite: 0.5 alpha:0.5];
    view;
    });

Responses to Comments

  • None of these other options reliably work (despite the comments below)

    // self.contentView.backgroundColor = [UIColor clearColor];
    // self.backgroundColor = [UIColor clearColor];
    // self.tintColor = [UIColor clearColor];
    
  • the backgroundView is resized automatically. (No need to add constraints)

  • Control alpha with UIColor(white: 0.5, alpha: 0.5) or backgroundView.alpha = 0.5.
    (of course, any color will do)

  • When using XIB, make root view a UITableViewHeaderFooterView and associate the backgroundView programmatically:

    Register with:

    tableView.register(UINib(nibName: "View", bundle: nil),
                       forHeaderFooterViewReuseIdentifier: "header")
    

    Load with:

    override func tableView(_ tableView: UITableView,
                            viewForHeaderInSection section: Int) -> UIView? {
        if let header =
            tableView.dequeueReusableHeaderFooterView(withIdentifier: "header") {
            let backgroundView = UIView(frame: header.bounds)
            backgroundView.backgroundColor = UIColor(white: 0.5, alpha: 0.5)
            header.backgroundView = backgroundView
            return header
        }
        return nil
    }
    

Demo

↻ replay animation

► Find this solution on GitHub and additional details on Swift Recipes.