UITableView Section Header not showing

Question

I'm trying to make section headers with autolayout. A simple header with a title and a counter

class ProfilePeopleListHeaderViewCell: UIView {

  let titleLeftOffset = 12
  let counterRightOffset = 5
  let counterWidth = 50

  var title = "title" {
    didSet {
      titleLabel.text = title
    }
  }
  var numberOfPeople = 0 {
    didSet {
      peopleCounter.text = "\(numberOfPeople)"
    }
  }

  let titleLabel = UILabel()
  let peopleCounter = UILabel()


  convenience init(title: String, numberOfPeople:Int) {
    self.init()
    self.title = title
    self.numberOfPeople = numberOfPeople
    backgroundColor = UIColor.greenColor()
    titleLabel.textColor = Constants.Colors.ThemeGreen
    titleLabel.textAlignment = .Left
    if #available(iOS 8.2, *) {
      titleLabel.font = Constants.Fonts.Profile.PeopleListHeaderFont
      peopleCounter.font = Constants.Fonts.Profile.PeopleListHeaderFont
    } else {
      titleLabel.font = UIFont.systemFontOfSize(14)
      peopleCounter.font = UIFont.systemFontOfSize(14)
    }

    peopleCounter.textAlignment = .Right
    peopleCounter.textColor = Constants.Colors.ThemeDarkGray

    addSubview(titleLabel)
    addSubview(peopleCounter)
    self.titleLabel.snp_makeConstraints { (make) -> Void in
      make.centerY.equalTo(self)
      make.height.equalTo(self)
      make.width.equalTo(peopleCounter).multipliedBy(3)
      make.left.equalTo(self).offset(titleLeftOffset)
    }

    self.peopleCounter.snp_makeConstraints { (make) -> Void in
      make.centerY.equalTo(self)
      make.height.equalTo(self)
      make.width.equalTo(counterWidth)
      make.left.equalTo(titleLabel.snp_right)
      make.right.equalTo(self).offset(counterRightOffset)
    }
  }

}

The code to retrieve the header is:

  let mutualFriendsSectionView = ProfilePeopleListHeaderViewCell(title: Strings.Title.MutualFriends, numberOfPeople: 0)

  override func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
     if section == 1 {
        //mutualFriendsSectionView.layoutSubviews()
        return mutualFriendsSectionView
      }
  }

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

I get a green background in the section header. But I don't see any label...

It would be far better and easy to design this cell in IB rather than in code. — Shripada, Feb 23 '16 at 03:38
If you have a solution for the code version. I'm interested. Otherwise, I'm not. Thank you. — Mikael, Feb 23 '16 at 04:07
yes. it's like: func numberOfSectionsInTableView(tableView: UITableView) -> Int { return 3 } — Mikael, Feb 23 '16 at 04:17
Your `mutualFriendsSectionView` does not have any frame set via code or auto layout constraint. That might be the reason why your label does not showing up since the label constraint is related to its superview which is `mutualFriendsSectionView`. — seto nugroho, Feb 23 '16 at 05:53
Then how do you explain the green background? (set in mutualFriendsSectionView ) — Mikael, Feb 23 '16 at 05:57

score 9 · Answer 1 · edited Sep 11 '18 at 09:19

Try this out for UITableView Section Header.

Programatically create headerview

func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let headerView = UIView.init(frame: CGRectMake(0, 0, tblView.bounds.size.width, 50))
    let lblHeader = UILabel.init(frame: CGRectMake(15, 13, tableView.bounds.size.width - 10, 24))
    if section == 0 {
        lblHeader.text = "Image Settings"
    }
    else if section == 1 {
        lblHeader.text = "Personal Settings"
    }
    else {
        lblHeader.text = "Other Settings"
    }
    lblHeader.font = UIFont (name: "OpenSans-Semibold", size: 18)
    lblHeader.textColor = UIColor.blackColor()
    headerView.addSubview(lblHeader)
    headerView.backgroundColor = UIColor(colorLiteralRed: 240.0/255.0, green: 240.0/255.0, blue: 240.0/255.0, alpha: 1.0)
    return headerView
}

Height for HeaderView

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

Can you use the code formating function please? I'll try your solution then :) — Mikael, Feb 23 '16 at 04:36
I can see the Section header now but I still don't understand why my ProfilePeopleListHeaderViewCell class doesn't work... The only difference I see is that you're using CGRectMake instead of autolayout... — Mikael, Feb 23 '16 at 04:54

score 3 · Answer 2 · answered Jul 07 '20 at 08:36

3

Check if a tableView delegate is connected

answered Jul 07 '20 at 08:36

Blazej SLEBODA

8,936
7
53
93

score 0 · Answer 3 · edited Aug 06 '16 at 05:33

0

try instantiating your headerView inside viewForHeader method

Edit your code as below

override func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? 
{

    let mutualFriendsSectionView = ProfilePeopleListHeaderViewCell(title: Strings.Title.MutualFriends, numberOfPeople: 0)
    if section == 1 
    {
        //mutualFriendsSectionView.layoutSubviews()
        return mutualFriendsSectionView
    }
}

edited Aug 06 '16 at 05:33

P.J.Radadiya

1,493
1
12
21

answered Feb 23 '16 at 04:41

gunjot singh

2,578
20
28

I get the same result. A green background. – Mikael Feb 23 '16 at 04:50

score 0 · Accepted Answer · answered Feb 23 '16 at 08:28

0

Actually it's working. my mistake was to believe that didSet{} was also called within the class -> it's not the case.

When I was setting the title in the init() it was not setting the label text.

answered Feb 23 '16 at 08:28

Mikael

2,355
1
21
45

UITableView Section Header not showing

4 Answers4