如何真实实现iphone的coveflow效果，见图

上图是网上一直流传的《iPhone手把手教你做CoverFlow！！》，其实是一个虎头蛇尾的东西， 只教人徒劳无功。

 于是追本溯源， 在国外找到下面几则帖子， 才见真章————————

 1.CoverFlow: The Easy Way   By Erica Sadun

 

    After chatting with iPhone developer Cobra about his most recent UICoverFlowLayer example, I decided to simplify UICoverFlowLayer creation. What I found was this: programming cover flow is eerily reminiscent of programming tables. Like tables, you create a data source method in your main application. This data source supplies your coverflow layer with images on demand. And, like tables, you build delegate methods that react to selection changes. When a user taps on an image, you can catch that selection change and do something about it.

The hard part is getting your head around it being a layer. UICoverFlowLayers are layers and not views. Views are first class display objects. Layers are not. To make this work, you slide your layer into some kind of containing view. You customize that view so it can forward user events and the run loop's heartbeat back to the layer. This lets it react to those events. In the following sections, you'll see how to create a really simple UICoverFlowLayer example.

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.

 

2.FlowCover

This demonstrates a simple snippet of code which uses OpenGL ES on the iPhone to create a CoverFlow-like effect. The source code is available for download and can be reused in your own project under a BSD-style license.

Download FlowCover • See Demo

Bug fixes

May 23, 2009: Fixed a memory leak bug in FlowCoverView. See blog for details, and for code changes if you wish to modify your own copy of the code base.

June 17, 2009: Modified draw routine to only draw visible tiles. What are "visible" is set by a constant at the top of FlowCoverView.m. See blog for details. (Thanks to Alessandro Tagliati (alessandro.tagliati gmail.com) for the modification.)

3.OpenFlow: a CoverFlow API replacement for the iPhone

 

By Alex Fajkowski

    The git repository contains an OpenFlow source directory and a sample project showing how you might use it in your application.

For more information, read the blog post at: http://fajkowski.com/blog/2009/08/02/openflow-a-coverflow-api-replacement-for-the-iphone/

This is an initial release of OpenFlow. I licensed it under the liberal MIT open source license.
Please drop me a line to let me know what you think & where you want the project to go from here.

The source code for both OpenFlow and the AFOpenFlowDemo project are currently available as a zip files,
hosted locally. I will be moving this code to an online repository in the very near future.