Change the sections header background color in UITableView using an array of headers

Question

I have a array of headers that I use

let sectionHeaderTitleArray = ["test1","test2","test3]

and they are showed using

func tableView[tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
return self.sectionHeaderTitleArray[section] as String
} 

Now all of this works fine but I would like to modify the background color of the headers so that they are more visible (Darker Color)

any idea if I can do this in a simple line or do I need to use a custom cell to create this

thanks

update

  //number of sections and names for the table

    func numberOfSectionsInTableView(tableView: UITableView) -> Int {
        return self.sectionHeaderTitleArray.count
    }

    func tableView(tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
        return self.sectionHeaderTitleArray[section] as String
    }
    func tableView(tableView: UITableView, ViewForHeaderInSection section: Int) -> UIView? {
        return self.tableView.backgroundColor = UIColor.lightGrayColor()
    }

Solution 1

Instead of using the

func tableView(_ tableView: UITableView,titleForHeaderInSection section: Int) -> String?

data source method, you can use the

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

delegate method and simply customize the UIView returned as you wish.

For example set the text of the UILabel textLabel to your desired value and the backgroundColor to the desired UIColor.

func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let returnedView = UIView(frame: CGRectMake(x, y, width, height)) //set these values as necessary
    returnedView.backgroundColor = UIColor.lightGrayColor()

    let label = UILabel(frame: CGRectMake(labelX, labelY, labelWidth, labelHeight))
    label.text = self.sectionHeaderTitleArray[section]
    returnedView.addSubview(label)

    return returnedView
}

SWIFT 5

override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
            let returnedView = UIView(frame: CGRect(x: x, y: y, width: width, height: height)) //set these values as necessary
            returnedView.backgroundColor = .white

            let label = UILabel(frame: CGRect(x: x, y: y, width: width, height: height))

            label.text = self.sectionHeaderTitleArray[section]
            returnedView.addSubview(label)

            return returnedView
        }

Solution 2

If you're using only titleForHeaderInSection :

func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
    (view as! UITableViewHeaderFooterView).contentView.backgroundColor = UIColor.black.withAlphaComponent(0.4)
    (view as! UITableViewHeaderFooterView).textLabel?.textColor = UIColor.white
}

Solution 3

You have to keep both

titleForHeaderInSection

AND

viewForHeaderInSection

Here is some working code in Swift 3

func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
    return self.sectionHeaderTitleArray[section]
}

func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let returnedView = UIView(frame: CGRect(x: 0, y: 0, width: view.frame.size.width, height: 25))
    returnedView.backgroundColor = .lightGray

    let label = UILabel(frame: CGRect(x: 10, y: 7, width: view.frame.size.width, height: 25))
    label.text = self.sectionHeaderTitleArray[section]
    label.textColor = .black
    returnedView.addSubview(label)

    return returnedView
}

Solution 4

SWIFT 5

public func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let header = tableView.dequeueReusableHeaderFooterView(withIdentifier: "headerId") as! CustomHeader
    let background = UIView(frame: view.bounds, background: .clear)
    header.backgroundView = background
    return header
}

---

SWIFT 4

Super easy, by setting header's view, contentView background color..

override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
   let header = tableView.dequeueReusableHeaderFooterView(withIdentifier: "headerId") as! CustomHeader
   header.contentView.backgroundColor = AnyColor
   return header
}

Solution 5

Swift 5 iOS 13:

//Remove 'override' if you don't override from UITableviewController
override func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
    guard let headerView = view as? UITableViewHeaderFooterView else { return }
    headerView.tintColor = .clear //use any color you want here .red, .black etc
}

View more solutions