Cant change color of tableHeaderView for UITableView. (Not section header!)

Question

I need a header for my UITableView . The section header is not working for me 'cause it shouldn't scroll with cells.

So I added tableView.tableHeaderView like this:

 // ViewController

 tableView.tableFooterView = UIView()
 let header = SearchPopularHeaderView()
 header.height(36)
 tableView.tableHeaderView = header

 // ...

 // SearchPopularHeaderView

class SearchPopularHeaderView: UIView {

    private var lblTitle: UILabel!

    override init(frame: CGRect) {
        super.init(frame: frame)

        viewDidLoad()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)

        viewDidLoad()
    }

    private func viewDidLoad() {
        lblTitle = UILabel()
        lblTitle.text = "Most popular".localized()
        lblTitle.font = UIFont.systemFont(ofSize: 12, weight: .bold)
        lblTitle.textColor = UIColor("#e6f2f9")
        self.addSubview(lblTitle)

        lblTitle.centerY(to: self)
        lblTitle.leadingToSuperview(offset: 16)

        self.backgroundColor = UIColor("#3c4958")

        layoutIfNeeded()
    }
}

I tried, and it's not working:

Adding a new container view for the label, edge it to superview, and change color for this container view. It looks like this UIView inherits color from UITableView .

Question: Maybe someone met some problems and know how to change color of tableHeaderView ?

---

PS Please, answers related to tableHeaderView , I know about option make it like a section header or just a cell. Thanks.

Answer 1

Use this extension to set headerView

extension UITableView {

    /// Set table header view & add Auto layout.
    func setTableHeaderView(headerView: UIView) {
        headerView.translatesAutoresizingMaskIntoConstraints = false

        // Set first.
        self.tableHeaderView = headerView

        // Then setup AutoLayout.
        headerView.centerXAnchor.constraint(equalTo: self.centerXAnchor).isActive = true
        headerView.widthAnchor.constraint(equalTo: self.widthAnchor).isActive = true
        headerView.topAnchor.constraint(equalTo: self.topAnchor).isActive = true
    }

    /// Update header view's frame.
    func updateHeaderViewFrame() {
        guard let headerView = self.tableHeaderView else { return }

        // Update the size of the header based on its internal content.
        headerView.layoutIfNeeded()

        // ***Trigger table view to know that header should be updated.
        let header = self.tableHeaderView
        self.tableHeaderView = header
    }
}

then in you controller

override func viewDidLoad() {
        super.viewDidLoad()

     let hView = UIView()
     self.tableView.setTableHeaderView(headerView: hView)

    NSLayoutConstraint.activate([
        hView.heightAnchor.constraint(equalToConstant: 100),
    ])
    self.tableView.updateHeaderViewFrame()

}

Answer 2

The problem was super simple, just to set the width constraint for my header view.

// With 'TinyConstraints'

let hView = SearchPopularHeaderView()
self.tableView.tableHeaderView = hView
sectionHeaderHeight = hView.height(36)
hView.width(to: sview.tableView)

// Without 'TinyConstraints'

let hView = SearchPopularHeaderView()
sview.tableView.tableHeaderView = hView
NSLayoutConstraint.activate([
  hView.heightAnchor.constraint(equalToConstant: 36),
  hView.widthAnchor.constraint(equalTo: self.tableView.widthAnchor)
])

PS Thanks to @jawadAli for helping found a problem.

PSS Library for constraints TinyConstraints