Why can't I get a header for a UICollectionView?

Question

I'm attempting to create a UICollectionView of grouped images (currently using random images from internet), with each group having their own header.

My problem is - I can't get the header view to display correctly.
I set the header view's background color to yellow.

Here's the header view:

The following is the current collection with the two groups and their respective headers:

As you can see, the headers have been resized to the size of their member cells and positioned within the collection rather than in their intended header position.

Here's the layout code:

override func viewDidLoad() {

createFriends(sender:self)
let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .Vertical;
layout.itemSize = CGSizeMake(50.0, 50.0);
layout.sectionInset = UIEdgeInsetsMake(10.0, 10.0, 50.0, 10.0);
layout.headerReferenceSize = CGSizeMake(320.0, 40.0)

layout.minimumLineSpacing = 10.0;
layout.minimumInteritemSpacing = 10.0;

gCollectionView.collectionViewLayout = layout

let myNib = UINib(nibName: "(1.1)HeaderViewCell",bundle: nil)
gCollectionView.registerNib(myNib, forCellWithReuseIdentifier: kCellIdentifier)
    }

Here's the header code (probably don't need the reference size, being that it was set in the layout):

func collectionView(collectionView: UICollectionView, layout 
          collectionViewLayout: UICollectionViewLayout,
          referenceSizeForHeaderInSection section: Int) -> CGSize {
     return CGSizeMake(100.0, 30.0)
}


func collectionView(collectionView: UICollectionView, 
                     viewForSupplementaryElementOfKind kind: String,
                     atIndexPath indexPath: NSIndexPath) -> 
                     UICollectionReusableView {


    let headerView = 
    collectionView.dequeueReusableCellWithReuseIdentifier(kCellIdentifier, 
         forIndexPath: indexPath) as mediaHeaderView

    headerView.backgroundColor = UIColor.yellowColor()  // ... YELLOW background
    return headerView          
}

Question: Why don't I get proper-positioned header per group of items?

Answer 1

Max K. had it right; but made a couple of typos.

let myNib = UINib(nibName: "(1.1)HeaderCell",bundle: nil)
        gCollectionView.registerNib(myNib, forSupplementaryViewOfKind:UICollectionElementKindSectionHeader, withReuseIdentifier: kHeaderCellIdentifier)

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

        if kind == UICollectionElementKindSectionHeader {
            let headerView = collectionView.dequeueReusableSupplementaryViewOfKind(UICollectionElementKindSectionHeader,
                withReuseIdentifier:kHeaderCellIdentifier, forIndexPath: indexPath) as mediaHeaderView
            return headerView
        } else {
            return UICollectionReusableView()
        }
}

Answer 2

You have to use func registerNib(_ nib: UINib?, forSupplementaryViewOfKind kind: String, withReuseIdentifier identifier: String) to register a nib for header.

Try this one: gCollectionView.registerNib(myNib, forSupplementaryViewOfKind:UICollectionElementKindSectionHeader, withReuseIdentifier: kHeaderReuseId)

And of course you have to use func dequeueReusableSupplementaryViewOfKind(_ elementKind: String, withReuseIdentifier identifier: String, forIndexPath indexPath: NSIndexPath!) -> AnyObject to retrieve reusable header view

   func collectionView(collectionView: UICollectionView,
    viewForSupplementaryElementOfKind kind: String,
    atIndexPath indexPath: NSIndexPath) ->
    UICollectionReusableView {

        if kind == UICollectionElementKindSectionHeader {
            let headerView = collectionView.dequeReusableSupplementaryViewOfKind(UICollectionElementKindSectionHeader, withReuseIdentifier:kHeaderReuseId, forIndexPath: indexPath) as mediaHeaderView

            headerView.backgroundColor = UIColor.yellowColor()  // ... YELLOW background
            return headerView
        } else {
            assert(0) // shouldn't happen
            return UICollectionReusableView
        }
}