Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

iOS

Posted by clintbarron
clintbarron
11,943 Points

Tableview Header Style

Hi guys. I am implementing a UITableView with dynamic content, and have split the content into 3 sections. When I add section headers they look vastly different to the section headers you see in the native iOS applications.

For example, when going to Settings > General > Storage & iCloud Usage, the headings are capitalised and in small font. When I create headings, they're much larger.

Does anyone know what's going on? As far as I can see you cannot style the headers.

While I'm at it, is typing a blank string the only way to have sections without headers but still divided? If you specify the header as nil, it just bumps right up to its predecessor.

Many thanks.

1 Answer

Jeremy Conley
Jeremy Conley
4,791 Points
Jeremy Conley
Jeremy Conley
4,791 Points

I would suggest to create your own custom view, set up a label within the view with whatever style you want (eg: capitalized label with small text). Then in your controller with the tableview, simply override the view for header method and return your custom view.

override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        let myCustomHeader = CustomHeaderView()

        //Since you have 3 sections, set the titles of the label you create based on section #
        if section == 0 {
            myCustomHeader.titleLabel.text = "Section 1"
        } else if section == 1 {
            myCustomHeader.titleLabel.text = "Section 2"
        } else if section == 2 {
            myCustomHeader.titleLabel.text = "Section 3"
        }

        return myCustomHeader
    }