Table section header: multi-line/word wrapping

Question

I am trying to make a table in which the section headers can be long strings. I thought I had the settings right (dynamic number of lines, word wrapping set) but instead the string is simply truncated at the end. Note that the section header is sized with a height of 80, elsewhere, which is enough to display about 3 lines of text.

// Format section header
override func tableView(tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {

    let header: UITableViewHeaderFooterView = view as! UITableViewHeaderFooterView
    header.contentView.backgroundColor = mainColorBlue
    header.textLabel.textColor = UIColor.whiteColor()

    header.textLabel.textAlignment = NSTextAlignment.Left
    header.textLabel.numberOfLines = 0 // Dynamic number of lines
    header.textLabel.lineBreakMode = NSLineBreakMode.ByWordWrapping
    header.textLabel.font = UIFont(name: "HelveticaNeue-Thin", size: 16)!
    header.textLabel.text = objectsArray[section].sectionName

}

Did you get this to work? Would appreciate knowing how you resolved it. — zeeple, Oct 20 '15 at 18:16

score 2 · Answer 1 · answered Mar 10 '17 at 18:27

You will have to create a custom headerView. This is what I did - Swift 3, you would have to customize it for your use:

override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
//Need to create a label with the text we want in order to figure out height
    let label: UILabel = createHeaderLabel(section)
    let size = label.sizeThatFits(CGSize(width: view.width, height: CGFloat.greatestFiniteMagnitude))
    let padding: CGFloat = 20.0
    return size.height + padding
}

override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let headerView = UITableViewHeaderFooterView()
    let label = createHeaderLabel(section)
    label.autoresizingMask = [.flexibleHeight]
    headerView.addSubview(label)
    return headerView
}

func createHeaderLabel(_ section: Int)->UILabel {
    let widthPadding: CGFloat = 20.0
    let label: UILabel = UILabel(frame: CGRect(x: widthPadding, y: 0, width: self.view.width - widthPadding, height: 0))
    label.text = sectionTextArray[section]// Your text here
    label.numberOfLines = 0;
    label.textAlignment = NSTextAlignment.left
    label.lineBreakMode = NSLineBreakMode.byWordWrapping
    label.font = UIFont.preferredFont(forTextStyle: UIFontTextStyle.subheadline) //use your own font here - this font is for accessibility 
    return label
}

score 2 · Answer 2 · answered Jul 04 '18 at 17:46

2

Specify Automatic height dimension -

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

answered Jul 04 '18 at 17:46

Rahul

10,457
4
35
55

score 1 · Answer 3 · edited May 23 '17 at 12:25

1

I do the opposite I set number of lines to a huge number and then Dynamic size works.

In IB
Dont set any WIDTH/HEIGHT constants
only Leading Trailing/Top/Bottom around controls in TableViewCells

self.tableView.sectionHeaderHeight = UITableViewAutomaticDimension; self.tableView.estimatedSectionHeaderHeight = 25;

- (void)viewDidLoad
{
    [super viewDidLoad];

    //-----------------------------------------------------------------------------------
    //DYNAMIC TEXT and TABLE ROW HEIGHT
    //-----------------------------------------------------------------------------------
    self.tableView.estimatedRowHeight = 80.0f;
    //also done in heightForRowAtIndexPath
    self.tableView.rowHeight = UITableViewAutomaticDimension;

    self.tableView.sectionHeaderHeight = UITableViewAutomaticDimension;
    self.tableView.estimatedSectionHeaderHeight = 80.0f;

}
//comment out
//- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {

See also Is it possible to obtain a dynamic table view section header height using Auto Layout?

edited May 23 '17 at 12:25

Community

1
1

answered Jan 28 '16 at 14:04

brian.clear

5,277
2
41
62

How do you not set any width/height constants in the storyboard? Even if you try setting the height of the header to 0, it'll limit you at 1 – SwiftMatt May 29 '16 at 04:24
correction I can set widths but I never set FIXED heights (e.g. height = 44) so label grow downwards. If I need a minimum height I set it to be GREATER THAN OR EQUAL TO height >= 44 using the drop down in IB. It works but IB can complain with warnings. I think the content hugging needs tweaking to get it 100% approved by IB – brian.clear May 31 '16 at 08:58
```Dont set any WIDTH/HEIGHT constants``` This actually worked for me. I removed all height constants for every element and set a different value for hugging priority. And it finally worked as expectation. – Fredric Cliver Mar 28 '21 at 08:19

Table section header: multi-line/word wrapping

3 Answers3