How do you change the colour of a section title in a tableview?
Asked Answered
E

6

23

Here is what I have at the moment.

enter image description here

How do I refer to this so that I can change the text colour to match my index list? The sectionForSectionIndexTitle worked well for adding in the correct section title but how exactly does one access the title element?

Or is it impossible and I need to redraw the view and add it with viewForHeaderInSection?

Erogenous answered 21/9, 2016 at 10:40 Comment(3)
Yes you need to add the label in viewForHeaderInSection.Delacroix
Hye man how did you add the alphabet on the right?Kano
Its called an index list. Heres a vid youtube.com/watch?v=xYSKHna1KJk. Or another link with a great tutorial. edumobile.org/ios/indexed-table-views-in-swiftErogenous
D
65

you can use the one of UITableViewDelegate's method

swift3 and above

  func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
    if let headerView = view as? UITableViewHeaderFooterView {
        headerView.contentView.backgroundColor = .white
        headerView.backgroundView?.backgroundColor = .black
        headerView.textLabel?.textColor = .red
    }
}

objective C

- (void)tableView:(UITableView *)tableView willDisplayHeaderView:(UIView *)view forSection:(NSInteger)section
{
    if([view isKindOfClass:[UITableViewHeaderFooterView class]]){
        UITableViewHeaderFooterView * headerView = (UITableViewHeaderFooterView *) view;
        headerView.textLabel.textColor  = [UIColor RedColor];  
    }
}

for Reference I taken the model answer from here

Dorinedorion answered 21/9, 2016 at 10:45 Comment(1)
Possibly my favourite answer on SO.Lezlielg
C
10

One liner solution (using optional chaining):

override func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
    (view as? UITableViewHeaderFooterView)?.textLabel?.textColor = UIColor.red
}
Chenay answered 15/7, 2017 at 16:4 Comment(3)
How is this different to @Anbu.karthik's solution?Lezlielg
^^ The result is the same, but this one uses optional chaining, hence resulting in one line, instead of a if let condition. I'll update the answer pointing this outChenay
Works for phone and pad but having trouble changing the color of my footer when running on Mac catalystRebroadcast
M
3

Custom Title:

override func tableView(tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
    let title = UILabel()
    title.font = UIFont(name: "SFUIDisplay-Light", size: 13)!
    title.textColor = UIColor.redColor()

    let header = view as! UITableViewHeaderFooterView
    header.textLabel!.font=title.font
    header.textLabel!.textColor=title.textColor
    header.contentView.backgroundColor = UIColor.whiteColor()
}
Micamicaela answered 21/9, 2016 at 10:45 Comment(0)
G
3

Swift Solution

func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
    view.tintColor = UIColor.red
    let header = view as! UITableViewHeaderFooterView
    header.textLabel?.textColor = UIColor.white
}
Gussie answered 15/7, 2020 at 5:3 Comment(0)
P
1

I would use the Appearance() proxy class. I usually add them in a function in AppDelegate and call them didFinishLaunching.

private func setupApperances() {
    UILabel.appearance(whenContainedInInstancesOf: [UITableViewHeaderFooterView.self]).textColor = .red
}
Pro answered 5/12, 2018 at 9:47 Comment(0)
U
0

You can make your own section title (header/footer) view, and it is easy.

class BlackTableViewHeaderFooterView : UITableViewHeaderFooterView {

    override init(reuseIdentifier: String?) {
        super.init(reuseIdentifier: reuseIdentifier)

        contentView.backgroundColor = .black

        textLabel?.font = UIFont.preferredFont(forTextStyle: .body)
        textLabel?.numberOfLines = 0
        textLabel?.textColor = .white
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

class TableViewController : UITableViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.register(BlackTableViewHeaderFooterView.self, forHeaderFooterViewReuseIdentifier: "\(BlackTableViewHeaderFooterView.self)")
        // do other setup
    }

    override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        let header = tableView.dequeueReusableHeaderFooterView(withIdentifier: "\(BlackTableViewHeaderFooterView.self)")
        header.textLabel?.text = "" // set your header title
        return header
    }
}
Uniformed answered 30/8, 2017 at 7:40 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.