NSCollectionView with Header and Footer

Question

I need something like this:

But my code do this:

func collectionView(collectionView: NSCollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> NSView {
    let a = myView()
    if kind == NSCollectionElementKindSectionHeader {
        a.frame = NSMakeRect(0, 0, 1000, 10)
    }
    else if kind == NSCollectionElementKindSectionFooter {
        a.frame = NSMakeRect(0, 0, 1000, 12)
    }
    return a
}

func numberOfSectionsInCollectionView(collectionView: NSCollectionView) -> Int {
    return 3
}

override func numberOfItemsInSection(section: Int) -> Int {
    if section == 0 {
        return 5
    }
    else if section == 1 {
        return 5
    }
    return 10
}

The two headers and footers are in the position x=0,y=0, so how calculate the y position from my custom views (Header and Footer)?

Answer 1

According to Apple's sample project CocoaSlideCollection, section header and footer are available to NSCollectionViewFlowLayout, check out AAPLBrowserWindowController and AAPLWrappedLayout for more details.

To convert into Swift and English :P, the brief explanation is as below:

1. Implements the protocol NSCollectionViewDelegateFlowLayout
2. Implements the two methods referenceSizeForHeaderInSection and referenceSizeForFooterInSection
3. viewForSupplementaryElementOfKind will be called after step 2

For step 3, I use the following code

func collectionView(collectionView: NSCollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> NSView {
    var nibName: String?
    if kind == NSCollectionElementKindSectionHeader {
        nibName = "Header"
    } else if kind == NSCollectionElementKindSectionFooter {
        nibName = "Footer"
    }
    let view = collectionView.makeSupplementaryViewOfKind(kind, withIdentifier: nibName!, forIndexPath: indexPath)
    return view
}

The identifier nibName used here, links to the two nib files I created to set the NSView, namely Header.xib and Footer.xib

This is the result collectionView I get.

Hope it helps, I am creating a video tutorial for this. Help it helps.

Edit 1:

Sample Code is now available