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()
    }

possible duplicate of [UITableView - change section header color](http://stackoverflow.com/questions/813068/uitableview-change-section-header-color) — luk2302, May 14 '15 at 15:03
you need to set it with returnedView.backgroundColor = UIColor.lightGrayColor() where returnedView is the UIView you initialize in func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? — Jack C, May 14 '15 at 19:55
thanks this changes the color correctly but my width and length settings are all setup in interface builder with autolayout.. how can I get this to adapt to the screen size? — Jp4Real, May 14 '15 at 20:12
You will have to manually calculate the y value based on the data you are using, the x value can be 0, the width value will be UIScreen.mainScreen().bounds.size.width and the height will be around 10.0 (play around with this to your liking) — Jack C, May 14 '15 at 20:36

Jovan Stankovic · Answer 1 · 2019-12-18T20:31:21.717

129

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
}

edited Dec 18 '19 at 20:31

answered Feb 18 '17 at 21:16

Jovan Stankovic

4,661
4
27
16

I get a SIGABORT: Could not cast value of type 'UIView' (0x1b6464bc0) to 'UITableViewHeaderFooterView' – cdub Aug 14 '18 at 05:07
Hi, cdub. I've just tested it and it still works. Maybe you're returning some other view in viewForHeaderInSection callback? Anyway, you can insert - guard view is UITableViewHeaderFooterView else { print(view); return } check before setting color to see what's going on. – Jovan Stankovic Aug 15 '18 at 07:51
This works fine, but please do not force unwrap. You do not need to do that here at all. It just makes your code more prone to errors. – laka Apr 28 '20 at 20:16

score 40 · Accepted Answer · edited Jun 04 '19 at 03:25

40

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
        }

edited Jun 04 '19 at 03:25

mohsen

4,698
1
33
54

answered May 14 '15 at 15:37

Jack C

1,044
2
12
22

Thanks but i can use my array of sections title in this – Jp4Real May 14 '15 at 18:36
So set the textLabel.text property to the desired section title as I suggested :) – Jack C May 14 '15 at 18:44
I need all my sections to have the same lightgreycolor – Jp4Real May 14 '15 at 19:17
So set the backgroundColor to the desired UIColor (lightGrey in your case) – Jack C May 14 '15 at 19:22
can you please post the code you have tried that isnt working – Jack C May 14 '15 at 19:24
5

Setting background color directly to header view raises runtime warning `Setting the background color on UITableViewHeaderFooterView has been deprecated. Please use contentView.backgroundColor instead.` – brigadir Feb 16 '17 at 11:28
Thanks @brigadir, his code is what is missing from that answer above. – CRey Apr 10 '19 at 02:59

score 17 · Answer 3 · answered Nov 09 '16 at 06:41

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
}

score 16 · Answer 4 · edited Jan 13 '22 at 19:00

16

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
}

edited Jan 13 '22 at 19:00

emrcftci

3,355
3
21
35

answered Nov 12 '17 at 11:21

MAGiGO

599
5
13

This answer is a bit incomplete but seems to be the correct method. How would I go about creating the custom header view with a unique id in the first place? Currently I've seen a lot of methods online that just use a custom created cell that returns the content view of that cell. Would it be possible for you to expand a bit? – WBuck Jan 14 '18 at 12:23
I used https://stackoverflow.com/questions/36926612/swift-how-creating-custom-viewforheaderinsection-using-a-xib-file to fill in the blanks – WBuck Jan 14 '18 at 14:56
I find this answer by far the cleanest. – Junsu Kim Aug 22 '21 at 06:20

score 15 · Answer 5 · answered Dec 18 '19 at 11:11

15

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
}

answered Dec 18 '19 at 11:11

Adriatik Gashi

332
4
10

2

Just providing code with no explanation is not helpful. I can't see what this adds that is not covered in the accepted answer. – Dragonthoughts Dec 18 '19 at 11:40
You can check documentation for more or I can suggest you some books what do you think? Let me know I can do it :) – Adriatik Gashi Dec 19 '19 at 11:03
@Dragonthoughts is wrong, tintColor is the puzzle piece i was missing. This is the correct answer. Thanks Adriatik! – Pavel Shevchuk Sep 08 '21 at 11:13

score 13 · Answer 6 · answered Jun 20 '18 at 11:44

13

Swift 4.X

This is tested and working code.

func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
    return UITableViewAutomaticDimension
}

func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
    return "Total Count (41)"
}

func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
    view.tintColor = UIColor.lightGray
    let header = view as! UITableViewHeaderFooterView
    header.textLabel?.textColor = UIColor.darkGray
    header.textLabel?.font = UIFont.systemFont(ofSize: 14, weight: .medium)
}

answered Jun 20 '18 at 11:44

Ashu

3,373
38
34

Hey, using tintColor background changed how? Nice solution I tried using backgroundview.backgroundColor but it did not work thanks! – Yogesh Patel Mar 16 '21 at 13:51
Thanks mate! Setting tintColor worked for me. – Amit Kumar Jun 07 '21 at 07:56

score 4 · Answer 7 · answered Oct 31 '16 at 15:29

Swift 3+

I used this:

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

    let label = UILabel()
    label.translatesAutoresizingMaskIntoConstraints = false
    label.text = stringValues[section]
    headerView.addSubview(label)
    label.leftAnchor.constraint(equalTo: headerView.leftAnchor).isActive = true
    label.rightAnchor.constraint(equalTo: headerView.rightAnchor).isActive = true
    label.centerYAnchor.constraint(equalTo: headerView.centerYAnchor).isActive = true
    label.heightAnchor.constraint(equalToConstant: 25).isActive = true

    return headerView

}

score 4 · Answer 8 · answered Apr 05 '19 at 14:12

Swift 5

override func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {

    guard let headerView = view as? UITableViewHeaderFooterView else { return }

    headerView.backgroundView?.backgroundColor = .red
}

And, if you want different header background (and/or text) colors for each section:

override func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {

    guard let headerView = view as? UITableViewHeaderFooterView else { return }

    switch section {

    case 0:
        headerView.backgroundView?.backgroundColor = .red
        headerView.textLabel?.textColor = .white
    case 1:
        headerView.backgroundView?.backgroundColor = .green
        headerView.textLabel?.textColor = .white
    case 2:
        headerView.backgroundView?.backgroundColor = .yellow
        headerView.textLabel?.textColor = .black

        // etc

    default:
        return
    }

blacker · Answer 9 · 2021-07-01T18:11:40.480

Swift5

Versión updated to iOS 11,12,13,14 with example

change background color and text color:

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

Full example of viewcontroller:

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var tableView: UITableView!
    private let array: [String] = ["ab","bc","cd","de","ef","fg","gh","hi","ij","jk"]
    let sectionHeaderTitleArray = ["test1","test2", "test3"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        if #available(iOS 11, *) {}
        else {
            self.edgesForExtendedLayout = []
        }
        configTableview()
    }
    
    private func configTableview() {
        tableView.registerCell(type: SyncCell.self)
        tableView.separatorColor = #colorLiteral(red: 0, green: 0.3066673801, blue: 1, alpha: 0.19)
        tableView.delegate = self
        tableView.dataSource = self
    }
}


extension ViewController: UITableViewDelegate {
    
    func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
        guard let tableView = view as? UITableViewHeaderFooterView else { return }
        tableView.textLabel?.textColor = UIColor.white
        tableView.contentView.backgroundColor = UIColor.black
    }
    
    func tableView(_ tableView: UITableView,titleForHeaderInSection section: Int) -> String? {
        return sectionHeaderTitleArray[section]
    }
    
    func numberOfSections(in tableView: UITableView) -> Int {
        return 3
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return array.count
    }

    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 130
    }
    
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        print("selected cell: \(indexPath)")
    }
}

extension ViewController: UITableViewDataSource {
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let item = array[indexPath.row]
        let cell = tableView.dequeueReusableCell(type: SyncCell.self, forIndexPath: indexPath)
        cell.configCell(text: item)
        cell.selectionStyle = .none
        return cell
    }
    
}

Background color not changing any suggestion for label it's working? — Yogesh Patel, Mar 16 '21 at 13:48

score 3 · Answer 10 · answered Feb 16 '18 at 13:33

If you are using titleForHeaderInSection, then the easiest way is to add in viewDidLoad():

self.tableView.backgroundColor = UIColor.clear

For some reason, setting ClearColor for Background in the View section for the TableView in the Interface Builder doesnt always set it to transparent. But adding this one line in the code (for me at least) does.

score 1 · Answer 11 · answered Oct 24 '18 at 07:14

override viewForHeaderInSection and create UITableViewHeaderFooterView

 override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    var headrview = tableView.dequeueReusableHeaderFooterView(withIdentifier: "aaa")
    if headrview == nil {
        headrview = UITableViewHeaderFooterView(reuseIdentifier: "aaa")
    }
    let bview = UIView()
    bview.backgroundColor = Theme.current.navigationColor
    headrview?.backgroundView = bview
    headrview?.textLabel?.textColor = Theme.current.primaryTextColor
    return headrview
}

score 0 · Answer 12 · answered Apr 03 '18 at 14:48

0

Swift 4 solution.

    override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let headerView:UIView = UIView()
        headerView.backgroundColor = UIColor.lightGray
   return headerView
}

answered Apr 03 '18 at 14:48

dscrown

578
1
5
21

score 0 · Answer 13 · answered Dec 02 '20 at 10:11

0

If you have a custom header view, you can do it with contentView.backgroundColor.

answered Dec 02 '20 at 10:11

GreatCornholio

97
2
16

Vitalik Kizlov · Answer 14 · 2021-05-27T11:43:54.923

There is no need to use hacks such as willDisplayHeaderView method or others. Simply create your own class of UITableViewHeaderFooterView. Then in func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? return your created custom header view. You should change background color not directly for your header view but for contentView of your header view

let headerView = tableView.dequeueReusableHeaderFooterView(withIdentifier: NotificationSettingsHeaderView.reuseIdentifier) as! NotificationSettingsHeaderView
headerView.label.text = dataSource.snapshot().sectionIdentifiers[section].title
headerView.contentView.backgroundColor = .red
return headerView

What's even better is to setup background color in init of your header view subclass

score -1 · Answer 15 · answered Jan 26 '18 at 19:13

-1

This will change it for all the headers in your application :

UITableViewHeaderFooterView.appearance().backgroundColor = theme.subViewBackgroundColor

answered Jan 26 '18 at 19:13

devjme

684
6
12

Muhammadjon · Answer 16 · 2019-12-03T05:02:00.143

-1

override or implement the function tableview will display

public func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
        let headerView = (view as? UITableViewHeaderFooterView)
        headerView?.tintColor = .clear
    }

edited Dec 03 '19 at 05:02

answered Dec 02 '19 at 07:17

Muhammadjon

190
2
11

score -1 · Answer 17 · edited Apr 09 '20 at 18:02

-1

We can change the footer color in a section of tableView using the below code snippet.

call the Method heightForFooterInSection

func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat { return 5.0 }
call the method viewForFooterInSection

func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? { let viw = UIView(frame: CGRect(x: 0, y: 0, width: tableView.frame.width, height: 5)) viw.backgroundColor = .white return viw }

Hope this will help you. This is a tested Code.

edited Apr 09 '20 at 18:02

Karthick Ramesh

1,451
20
30

answered Apr 09 '20 at 07:17

Khushtar parvez

21
7

1

Height should be equal in both methods – Khushtar parvez Apr 09 '20 at 07:19
Welcome to SO. It would be great if you can format the code part with the SO's inbuild code formatting tool. – Karthick Ramesh Apr 09 '20 at 07:46
next time I will @KarthickRamesh – Khushtar parvez Apr 09 '20 at 09:00

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

17 Answers17