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...

Paternalism

It would be far better and easy to design this cell in IB rather than in code. – Hectograph

If you have a solution for the code version. I'm interested. Otherwise, I'm not. Thank you. – Paternalism

did you put numberOfSectionsInTableView in your code? – Cruise

yes. it's like: func numberOfSectionsInTableView(tableView: UITableView) -> Int { return 3 } – Paternalism

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. – Rancell

Then how do you explain the green background? (set in mutualFriendsSectionView ) – Paternalism

Answer 1

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.

Paternalism

Answer 2

Try this out for UITableView Section Header.

1. 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
   }
   

2. Height for HeaderView

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

Daugava

Can you use the code formating function please? I'll try your solution then :) – Paternalism

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... – Paternalism

Answer 3

Check if a tableView delegate is connected

Memphis

Answer 4

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
    }
}

Lallation

I get the same result. A green background. – Paternalism