UITableView Footer and Header Background color darker than specified

Question

I'm Trying to style a TableviewController, and I wish to set the background to a very light gray and the cells to white, with thick borders of the same gray shade. However, after I set background and header colors, they both turn to be a very dark shade (the color code is ok, and the footer is darker than the header).

This is my code:

    override func viewDidLoad() {
        super.viewDidLoad()
        self.tableView.backgroundView?.backgroundColor = gainsBoro
        self.tableView.backgroundColor = gainsBoro
        self.tableView.separatorStyle = .none
        self.tableView.tableFooterView = UIView()
    }

and to set the header color:

override func tableView(_ tableView: UITableView, willDisplayHeaderView view:UIView, forSection: Int) {
    if let headerTitle = view as? UITableViewHeaderFooterView {
        headerTitle.textLabel?.textColor = UIColor.black
        headerTitle.backgroundView?.backgroundColor = gainsBoro
    }
}

And the result:

Any Ideas?

Answer 1

I'm using UITableViewHeaderFooterView views with Xib files, and I'm registering them when the viewDidLoad is called:

tableView.register(UINib(nibName: "FooterView", bundle: Bundle(for: type(of: self))), forHeaderFooterViewReuseIdentifier: "FooterView")

In the viewForFooterInSection function, when the view is dequeued, you only have to set the tintColor to the color that you want:

func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
    if section == 1 {
        if let view = tableView.dequeueReusableHeaderFooterView(withIdentifier: "FooterView") as? FooterView {               
            view.tintColor = .red
            return view
        }
    }

    return UIView()
}

You can do the same with the Header views but in the viewForHeaderInSection function. I guess it will work without registering the views.

This is what my table view looks like for this example. The blue one is a header view, and the red one is a footer view.

Answer 2

Try to give the alpha value to the header and footer view.

footerView.alpha = 0.3;
headerTitle.alpha = 0.3;