How to use IKImagebrowserView's group display?

The effect I want is like the iPhoto group(or timeline) displaying.

I have already realized the common IKImageBrowserView. which is like

But I don't know how to assign them in different groups.

I referred: customizing IKImageBrowserView group appearance, which is the only post in stackoverflow, maybe.

I used the 4 methods of IKImageBrowserDataSource.

- (NSUInteger)numberOfItemsInImageBrowser:(IKImageBrowserView *)browser;
- (id)imageBrowser:(IKImageBrowserView *)browser itemAtIndex:(NSUInteger)index;
- (NSUInteger)numberOfGroupsInImageBrowser:(IKImageBrowserView *)browser;
- (NSDictionary *)imageBrowser:(IKImageBrowserView *)browser groupAtIndex:(NSUInteger)index;

I think I don't know how to write code for the last 2 methods.

You definitely need to implement those last two methods for groups to appear. If you simply want to see the effect, you can do something like this:

- (NSUInteger) numberOfGroupsInImageBrowser:(IKImageBrowserView *) aBrowser
{
    return 1;
}
- (NSDictionary *) imageBrowser:(IKImageBrowserView *) aBrowser groupAtIndex:(NSUInteger) index
{
    NSRange r = {0, 3};
    return @{IKImageBrowserGroupRangeKey: [NSValue valueWithRange:r],
             IKImageBrowserGroupBackgroundColorKey: [NSColor redColor],
             IKImageBrowserGroupStyleKey: [NSNumber numberWithInt:IKGroupDisclosureStyle]};
}

The important key in the directory returned by groupAtIndex is IKImageBrowserGroupRangeKey. This describes what range of images are in a given group. Note that NSRange is a structure and is not derived from NSObject so it can't be used as a value in a dictionary. Hence, it must be converted to an NSValue.

For this to be truly useful you'll want to cache your set of range values and provide a mechanism for grouping and ungrouping images, but I hope this is enough to get you started