Creating a View container

As the UICoverFlowLayer class is just a layer, not a stand-alone view, I created a CoverFlowView class. Its entire reason for being is to encompass the layer and channel events to it. As you can see, there's not much to it. It's a basic UIView with one instance variable, which points to the cover flow layer. Any mouse events get sent to that layer, and the ticking heartbeat of the main event loop is passed along as well.

@interface CoverFlowView : UIView {
   id cfLayer;
}
@end

@implementation CoverFlowView

// React To User Events

- (void) reactTo:(id)event flow:(int)flow

{

  CGRect rect = GSEventGetLocationInWindow(event);

  [cfLayer dragFlow: flow atPoint: rect.origin];

}

- (void) mouseUp: (id)event {[self reactTo:event flow:2];}

- (void) mouseDown: (id)event {[self reactTo:event flow:0];}

- (void) mouseDragged: (id)event {[self reactTo:event flow:1];}

- (BOOL) ignoresMouseEvents {return NO;}

// Initialize so it knows about its cfLayer

- (void) setLayer: (id)aLayer {cfLayer = aLayer;}

// Forward the heartbeat

- (void) tick {[cfLayer displayTick];}

@end

Creating the Cover Flow Layer

To build cover flow, you build the cover flow view, allocate the cover flow layer and insert it into place in the view. Notice how you specify the number of covers to be used when you first create the layer.

    // Create the main UIView

    CGRect mainRect = CGRectMake(0.0f, 0.0f, 320.0f, 480.0f);

    mainView = [[CoverFlowView alloc] initWithFrame:mainRect];


    // Add the cover flow Layer

    cfLayer = [[UICoverFlowLayer alloc] initWithFrame:mainRect

         numberOfCovers: [picList count]];

    [cfLayer setDelegate:self];

    [[mainView _layer] addSublayer:cfLayer];

    [mainView setLayer: cfLayer];

Cover Flow layers require a placeholder layer. This layer is the placeholder for all your art. It is a core surface that exactly matches the dimensions of each coverflow image to be used. All images use the same placeholder dimensions.

    // Add the placeholder layer

    [cfLayer setPlaceholderImage: [self createCoreSurface]];

Another, optional, layer is the information layer. I found it simple enough to create a UITextLabel, grab its layer and attach that as the cover flow's info layer:

    label = [[UITextLabel alloc] init]; 

    [cfLayer setInfoLayer:[label _layer]];

Make sure when creating your view, that you use a relatively bright foreground color and a clear (alpha set to 0.0f) background color so the info layer "floats" over the cover flow images.

    [label setBackgroundColor:getColor(0.0f, 0.0f, 0.0f, 0.0f)];

    [label setColor:getColor(1.0f, 1.0f, 1.0f, 0.75f)];

Supplying Images

In this example, I perform a simple search for thumbnails in an iPhone's DCIM/100APPLE folder. This has the advantage of producing very small images that load quickly and do not bog down a complex cover flow. If you need to work with larger data, you may want to pre-scale in advance to keep your memory load down and keep your cover flow moving smoothly. Using the icon.pngs from the /Applications folder also works well.

Supply the UIImages (or more specifically imageRefs from UIImages) by their numerical index. The requests do not come in any specific order. Use the natural order of your data to match the index to the picture.

// Image Data Source Method
- (void) coverFlow:(id)cf requestImageAtIndex: (int)idx quality: (int)q
{
   id whichImg = [PICDIR stringByAppendingPathComponent:
                    [picList objectAtIndex:idx]];
   id img = [UIImage imageAtPath:whichImg];
   [cfLayer setImage:[img imageRef]  atIndex:idx type:q];
}

Moving between Images

Cover flow layers produce simple selection did change delegate method calls when the selected item changes. You can use that change to do something. In this example, I update the information text with the name of the selected thumbnail.

// Selection Delegate Method -- User picked an object
- (void) coverFlow: (id) cf selectionDidChange: (int) idx
{
   [label setText:[picList objectAtIndex:idx]];
}

Sample Code

I've posted the complete sample code here for your reference.