Swift 3 UICollectionView reusable section header will not display

Question

In swift 3 with Xcode 8.2 I can't get a reusableHeaderView to display with UICollectionView. I placed breakpoints at various points in my header view file and they are never tripped. Here is my code.

import UIKit

class WishListViewController: UIViewController,
                         UICollectionViewDelegateFlowLayout,
                         UICollectionViewDataSource {

var collectionView: UICollectionView!

var wishListItems = [[String:Any]]()

var shops = [[String: Any]]()

let cellId = "WishListCell"

let headerId = "WishListHeaderView"

var screenSize: CGRect!
var screenWidth: CGFloat!
var screenHeight: CGFloat!

let imageAspectRatio: CGFloat = 1.2

override func viewDidLoad() {

    super.viewDidLoad()

    screenSize = UIScreen.main.bounds
    screenWidth = screenSize.width
    screenHeight = screenSize.height

    let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
    layout.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
    layout.itemSize = CGSize(width: screenWidth, height: ((screenWidth / 3) * imageAspectRatio) + 20)
    layout.minimumInteritemSpacing = 0
    layout.minimumLineSpacing = 0
    layout.estimatedItemSize.height = ((screenWidth / 3) * imageAspectRatio) + 20
    layout.estimatedItemSize.width = screenWidth

    collectionView = UICollectionView(frame: self.view.frame, collectionViewLayout: layout)

    collectionView.delegate = self

    collectionView.dataSource = self

    collectionView.register(WishListCell.self, forCellWithReuseIdentifier: cellId)

    collectionView.register(WishListHeaderView.self, forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: headerId)

    collectionView.backgroundColor = UIColor.white

    self.view.addSubview(collectionView)

    // Do any additional setup after loading the view.
}

func collectionView(_ collectionView: UICollectionView,
                    viewForSupplementaryElementOfKind kind: String,
                    at indexPath: IndexPath) -> UICollectionReusableView {

    switch kind {

    case UICollectionElementKindSectionHeader:

        let headerView = collectionView.dequeueReusableSupplementaryView(ofKind: kind,
                                                                         withReuseIdentifier: headerId,
                                                                         for: indexPath) as! WishListHeaderView

        headerView.textLabel.text = shops[indexPath.section]["shop_name"] as? String

        return headerView

    default:

        assert(false, "Unexpected element kind")
    }
}

Here is my header view file.

import UIKit

class WishListHeaderView: UICollectionReusableView {

var textLabel: UILabel

let screenWidth = UIScreen.main.bounds.width

override init(frame: CGRect) {

    textLabel = UILabel()

    super.init(frame: frame)

    self.addSubview(textLabel)

    textLabel.font = UIFont.systemFont(ofSize: UIFont.smallSystemFontSize)

    textLabel.textAlignment = .left

    textLabel.numberOfLines = 0

    textLabel.lineBreakMode = NSLineBreakMode.byWordWrapping

    textLabel.translatesAutoresizingMaskIntoConstraints = false

    NSLayoutConstraint.activate([


        NSLayoutConstraint(item: textLabel, attribute: .leading, relatedBy: .equal,
                           toItem: self, attribute: .leadingMargin,
                           multiplier: 1.0, constant: 0.0),

        NSLayoutConstraint(item: textLabel, attribute: .trailing, relatedBy: .equal,
                           toItem: self, attribute: .trailingMargin,
                           multiplier: 1.0, constant: 0.0),
        ])

    self.backgroundColor = .white

}

required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}
}

Answer 1

You need to implement height for header function for your collection view.

func collectionView(_ collectionView: UICollectionView,
                 layout collectionViewLayout: UICollectionViewLayout,
                 referenceSizeForHeaderInSection section: Int) -> CGSize

then return the height you want it to be.