TableView Header/Footer Font in Grouped Table (Swift)

Question

I changed a tableView from Plain to Grouped so that the header/footer does not float over the table and stays anchored to the top and bottom of the table. That was straightforward, but now the font style formatting that I setup is not working. Strangely all other formatting of the header/footer seems to be working though. Any thoughts on what is going and what I am missing are appreciated!

Code below:

// Setup format of the header
func tableView(tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {

    let title = UILabel()
    title.font = UIFont(name: "Avenir Book", size: 12)
    title.textColor = UIColor.whiteColor()


    let header: UITableViewHeaderFooterView = view as! UITableViewHeaderFooterView
    header.contentView.backgroundColor = UIColor(red: 30/255, green: 30/255, blue: 50/255, alpha: 1)
    header.textLabel!.font = title.font
    header.textLabel?.textColor = title.textColor
    header.textLabel?.numberOfLines = 0
    header.textLabel?.lineBreakMode = NSLineBreakMode.ByWordWrapping
    header.textLabel?.textAlignment = NSTextAlignment.Center

}

In a Plain table all of the above works great and looks like this:

However, when I change to Grouped table all of the formatting seems to show up except for the font style this this:

I am puzzled about where the ALL CAPS is coming from.

I tried to implement the solution from this question/answer, but could not get it to work either. Thanks for your ideas!

Godspeed · Accepted Answer · 2016-07-28T00:48:07.137

Assuming that you provided the string for the section title in this method:

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

But in a grouped tableview, that string is changed to all caps. To remove the all caps, try adding one of these two lines in the willDisplayHeaderView method:

header.textLabel?.text = header.textLabel!.text!.capitalizedString
header.textLabel?.text = header.textLabel!.text!.lowercaseString

The first one will capitalize the first letter of every word and the second will make everything lowercase. If you don't want either of those you could add the string directly:

header.textLabel?.text = "Here are a few options for you. Select to learn more"

Ah makes sense! Thanks so much! I went with the option of adding the String into titleForHeaderInSection to keep the sentence case. — Ben, Jul 28 '16 at 01:10

score 4 · Answer 2 · answered Mar 14 '19 at 07:15

Swift 4

use this delegates:

func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        let label: UILabel = {
            let label = UILabel()

            label.textAlignment = .right
            label.textColor = .white
            label.backgroundColor = .clear
            label.font = UIFont.systemFont(ofSize: 20)

            return label
        }()
        return label
    }

and don't forget to set height for header:

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

hope this help.

score 0 · Answer 3 · answered Aug 11 '22 at 15:45

Update for >=iOS 14, with the UIListContentConfiguration API:

override func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
    guard let headerView = view as? UITableViewHeaderFooterView else {
        return
    }

    var config = headerView.defaultContentConfiguration()
    // This needs to explicitly be set if the table view is Grouped style
    // (which it is, to hide sticky backgrounds on section headers),
    // as the deafult style for
    config.textProperties.transform = .none
    
    // Other properties (color, font) as needed...

    // Notably, `ContentConfiguration` requires setting content here as well, 
    // separate from `titleForHeaderInSection`
    config.text = "MyText"
    headerView.contentConfiguration = config
    headerView.setNeedsUpdateConfiguration()   
}

TableView Header/Footer Font in Grouped Table (Swift)

3 Answers3