UITableView - change section header color

🌈 How to Change the Color of a Section Header in UITableView 🧩

So you want to make your UITableView section headers stand out by changing their color? Good news! We've got you covered with some easy and up-to-date solutions.

The Problem 🤔

Have you ever felt like the standard section headers in a UITableView are a bit plain? Maybe you want to match your app's branding or add some visual flair to make your table view more eye-catching. The challenge lies in finding a way to change the color of the section headers that works well across different iOS versions.

The Solution 💡

Method 1: Using UITableViewHeaderFooterView

One way to change the color of a section header is by subclassing UITableViewHeaderFooterView and customizing its appearance. Here's how you can do it:

1. Create a new class that inherits from UITableViewHeaderFooterView. Let's call it CustomHeaderView.

class CustomHeaderView: UITableViewHeaderFooterView {
  
}

1. In the implementation of your CustomHeaderView, override the tintColor property with your desired color.

override var tintColor: UIColor! {
  didSet {
    // Update the appearance of your header view based on the new color
  }
}

1. In your UITableViewDelegate implementation, register your CustomHeaderView class for the respective reuse identifier.

tableView.register(CustomHeaderView.self, forHeaderFooterViewReuseIdentifier: "CustomHeaderReuseIdentifier")

1. Finally, in the tableView(_:viewForHeaderInSection:) method, dequeue an instance of CustomHeaderView and return it.

func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
  let headerView = tableView.dequeueReusableHeaderFooterView(withIdentifier: "CustomHeaderReuseIdentifier") as? CustomHeaderView
  return headerView
}

Method 2: Using UITableViewAppearance on iOS 13 and above

Starting from iOS 13, you can use the UITableViewAppearance protocol to customize the appearance of table views. Here's how:

1. In your view controller or app delegate, access the appearance delegate of the UITableView class.

let tableViewAppearance = UITableViewAppearance()

1. Customize the sectionHeaderTintColor property with your desired color.

tableViewAppearance.sectionHeaderTintColor = .systemBlue

1. Set the appearance delegate of the UITableView instances in your app.

UITableView.appearance().standardAppearance = tableViewAppearance

And just like that, your section headers will be rocking your chosen color!

Conclusion 🎉

Changing the color of a section header in UITableViewController can be a simple yet effective way to enhance the look and feel of your app. Whether you decide to go with the UITableViewHeaderFooterView subclass or the UITableViewAppearance protocol, these solutions will help you achieve the desired results.

Give them a try and let us know how it colors your UITableView experience! 😎

Additional Resources 🔍

• Stack Overflow Answer by DJ-S

• UITableViewHeaderFooterView Documentation

• UITableViewAppearance Documentation