How to display tableview section headers with long text in multiple rows?

Question

I am using a table view controller that has multiple sections, with a few sections having long text. When I use titleForHeaderSection, text is getting truncated if length of the

Answer 1

Instead of using titleForHeaderInSection, try using viewForHeaderInSection. This method asks for you to return a view, but since UILabel is a subclass of UIView, you can also return a label!

func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let label = UILabel()
    label.backgroundColor = UIColor.black
    label.textColor = UIColor.white
    label.lineBreakMode = .byWordWrapping
    label.numberOfLines = 0
    label.text = "Here's to the crazy ones. The misfits. The rebels. The troublemakers. The round pegs in the square holes. The ones who see things differently. They're not fond of rules. And they have no respect for the status quo. You can quote them, disagree with them, glorify or vilify them. About the only thing you can't do is ignore them. Because they change things. They push the human race forward. And while some may see them as the crazy ones, we see genius. Because the people who are crazy enough to think they can change the world, are the ones who do."
    return label
}

You'll notice that using this approach, the text goes all the way to the left and right edges of the table view. In most cases, this doesn't look very good, especially if your table view takes up the full width of your device.

A simple fix for this: create a custom subclass of UILabel (I'll call mine TableViewHeaderLabel). Inside this subclass, we'll add insets to the label. We can also move the word wrapping, background color, etc. into this label, in order to make our ViewController file even cleaner!

This is what TableViewHeaderLabel.swift would look like:

import UIKit

class TableViewHeaderLabel: UILabel {

    var topInset:       CGFloat = 0
    var rightInset:     CGFloat = 12
    var bottomInset:    CGFloat = 0
    var leftInset:      CGFloat = 12

    override func drawText(in rect: CGRect) {

        let insets: UIEdgeInsets = UIEdgeInsets(top: self.topInset, left: self.leftInset, bottom: self.bottomInset, right: self.rightInset)
        self.setNeedsLayout()

        self.textColor = UIColor.white
        self.backgroundColor = UIColor.black

        self.lineBreakMode = .byWordWrapping
        self.numberOfLines = 0

        return super.drawText(in: UIEdgeInsetsInsetRect(rect, insets))
    }

}

And then using it would look like this:

func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let label = TableViewHeaderLabel()
    label.text = "Here's to the crazy ones. The misfits. The rebels. The troublemakers. The round pegs in the square holes. The ones who see things differently. They're not fond of rules. And they have no respect for the status quo. You can quote them, disagree with them, glorify or vilify them. About the only thing you can't do is ignore them. Because they change things. They push the human race forward. And while some may see them as the crazy ones, we see genius. Because the people who are crazy enough to think they can change the world, are the ones who do."
    return label
}

Answer 2

You can use viewForHeaderInSection to create headerView. Add UILabel as subview to headerView. Use multi-line property of UILabel to display your text in multiple lines. Also set the height of headerView.