NSCollectionView with sections - like in iPhoto

Question

I'd like to build a NSCollectionView similar to the one in iPhoto '11. I want to group several pictures in section, and create a section header as well. The section header of a specific section is always visible until the last element of that section is visible. You can take a look at the picture to see what I mean.

EDIT: I should add that the contents are not images.

Thanks in advance

Answer 1

You're probably going to have to look at using CALayers directly. NSCollectionView gets most of its magic from CoreAnimation IIRC, and it looks like you might have to duplicate some of that. Alternatively you could try using nested collection views— one containing groups, then each group contains another collection view of individual items.

Either way, your view/layer hierarchy is going to be the same. You'll have a top-level container which has only one column (since groups stretch across the entire width), then each item within that will have any number of columns, based on the item width. i.e. your 'group' collection view items will stretch to fill width, but your individual items within those groups won't.

If you choose to use the raw CALayer approach, then you'll want to look at CAConstraintLayoutManager. This is what provides the magic inside NSCollectionView. A good place to start looking for information on this is Bill Dudney's CoreAnimation book from Pragmatic Programmers. Bill's now the official platform evangelist for Apple, so I think it's safe to say he knows what he's talking about in there.

Overall, I'd suggest using a nested NSCollectionView approach to start with, and look at dropping down to raw CoreAnimation only if performance seems to be lacking, or if you have issues getting some stuff to work. Using NSCollectionView lets you keep all your current NSView-ness in place, so it will be less work. If it turns out ok, then you're home & dry. If not, you've got something else to try which you can tweak to your heart's content.