Search code examples
groupingappearanceikimagebrowserview

customizing IKImageBrowserView group appearance


I am trying to change the appearance of the group header of an IKImageBrowserView. I've seen that we can provide an custom CALayer with IKImageBrowserGroupHeaderLayer but I do not know at all how to use it (how to get the size of the layer, know if the group is selected, ....)

Do you have any pointer for this?

Thanks


Solution

  • I have had a go at this today and it appeared reasonably straightforward. It was important to note, however, that it appears to only work with IKImageGroupDisclosureStyle groups.

    This provided a nice pink line along the top of each group. It seems that when the view displays the layer, it resizes the layer to the width of the browser view, so what I put in width for bounds made no difference to the result, however it does honour height.

    - (NSDictionary *) imageBrowser:(IKImageBrowserView *) aBrowser groupAtIndex:(NSUInteger) index
    {
        CALayer *headerLayer = [CALayer layer];
        headerLayer.bounds = CGRectMake(0.0, 0.0, 100.0, 30.0);
        CGColorRef colour = CGColorCreateGenericRGB(1.0, 0.5, 0.7, 1.0);
        headerLayer.backgroundColor = colour;
        CGColorRelease(colour);
    
        return [NSDictionary dictionaryWithObjectsAndKeys:
            [NSNumber numberWithInt: IKGroupDisclosureStyle], IKImageBrowserGroupStyleKey,
            headerLayer, IKImageBrowserGroupHeaderLayer,
        nil];
    }
    

    Regarding "know if the group is selected", I assume you mean if one of the items within the group is selected? I would observe the view's selectionIndexes for changes, determining which item or items were selected, then determining in which group they fall (using a similar process to how you provided the IKImageBrowserGroupRangeKey when configuring the group, which I hope you have cached!) and calling reloadData with one of the groups returning a different layer configuration (or whatever) based on whether it contains a selected item or not.