iPhone 实现简单的CoverFlow 效果

第一种实现

iPhone 实现简单的CoverFlow 效果

      

首先声明一下，这篇文章的作者正是本人(Leo)，由于之前代码里面有几个小的问题，一直很忙，今天晚上抽出了点时间来给大家更正一下，要是根据下面一步步的来做的话，一定能建立出绚丽的coverFlow 效果来。

大家好，今天来给大家讲讲iPhone里面的CoverFlow技术。

CoverFlow 并未加入的苹果的官方SDK，但是它仍然是标准的UIKit，因此我么可以提取出UICoverFlowLayer.h文件。那我们怎么生成 CoverFlow效果呢？下面一步教你怎么实现简单的CoverFlow效果：首先建立一个View based Application。

名字随便起就行 这里我命名为CoverFlow如图：



写到这里我们已经把CoverFlow 的工程建好了，接下来我们要做的就是coding了。

首先新建一个空文件，将UICoverFlowLayer.h里面的所有代码都拷贝进入，然后命名为
“UICoverFlowLayer.h”

/*
*     Generated by class-dump 3.1.1.
*
*     class-dump is Copyright (C) 1997-1998, 2000-2001, 2004-2006 by Steve Nygard.
*/

// #import "CALayer.h"

@interface UICoverFlowLayer : NSObject // CALayer
{
void *_private;
}

- (id)initWithFrame:(struct CGRect)fp8 numberOfCovers:(unsigned int)fp24 numberOfPlaceholders:(unsigned int)fp28;
- (unsigned int)numberOfCovers;
- (unsigned int)numberOfPlaceholders;
- (void)dealloc;
- (void)setDelegate:(id)fp8;
- (void)setPlaceholderImage:(void *)fp8 atPlaceholderIndex:(unsigned int)fp12;
- (void)setPlaceholderIndicesForCovers:(unsigned int *)fp8;
- (void)_prefetch:(unsigned int)fp8 atIndex:(unsigned int)fp12;
- (void)_requestBatch;
- (void)_requestImageAtIndex:(int)fp8 quality:(unsigned int)fp12;
- (void)_requestImageAtIndex:(int)fp8;
- (void)_notifySelectionDidChange;
- (void)transitionIn:(float)fp8;
- (void)transitionOut:(float)fp8;
- (void)transition:(unsigned int)fp8 withCoverFrame:(struct CGRect)fp12;
- (void)transitionIn:(float)fp8 fromFrame:(struct CGRect)fp12;
- (void)transitionOut:(float)fp8 toFrame:(struct CGRect)fp12;
- (void)setDisplayedOrientation:(int)fp8 animate:(BOOL)fp12;
- (void)setInfoLayer:(id)fp8;
- (void)setImage:(void *)fp8 atIndex:(unsigned int)fp12 type:(unsigned int)fp16;
- (void)setImage:(void *)fp8 atIndex:(unsigned int)fp12 type:(unsigned int)fp16 imageSubRect:(struct CGRect)fp20;
- (void)setImage:(void *)fp8 atIndex:(unsigned int)fp12;
- (unsigned int)indexOfSelectedCover;
- (unsigned int)_coverAtScreenPosition:(struct CGPoint)fp8;
- (void)_recycleLayer:(int)fp8 to:(int)fp12;
- (void)_setNewSelectedIndex:(int)fp8;
- (void)_updateTick;
- (void)displayTick;
- (void)dragFlow:(unsigned int)fp8 atPoint:(struct CGPoint)fp12;
- (void)selectCoverAtIndex:(unsigned int)fp8;
- (void)selectCoverAtOffset:(int)fp8;
- (unsigned int)coverIndexAtPosition:(float)fp8;
- (void)_setupFlippedCoverLayer:(id)fp8;
- (void)flipSelectedCover;
- (int)benchmarkTick;
- (void)benchmarkHeartbeatLongScrub;
- (void)benchmarkHeartbeatShortScrub;
- (void)benchmarkHeartbeatScrubAndWait;
- (void)benchmarkTightLoop;
- (void)benchmarkTightLoopScrub;
- (BOOL)benchmarkLoadScrub;
- (BOOL)benchmarkImageManager:(void *)fp8;
- (void)benchmarkSetEnv;
- (void)benchmarkMode:(int)fp8;
- (void)benchmarkTickMode:(int)fp8;
- (void)benchmarkImageMode:(int)fp8;
- (void)benchmarkPerformanceLog:(BOOL)fp8;
- (void)benchmarkTightLoopTime:(unsigned int)fp8;
- (void)benchmarkLongScrubSpeed:(float)fp8;
- (void)benchmarkSkipImageLoad:(BOOL)fp8;

@end

修改  CoverFlowViewController.h  为下面内容

#import <UIKit/UIKit.h>
#import "CoverFlowView.h"
@protocol COverFlowViewDelegate

-(void)flipSelectedCover;

@end
@interface FlipView : UIView
{
UITextView *textView;
id<COverFlowViewDelegate> delegate;
}
@property (nonatomic,retain)UITextView *textView;
@property (nonatomic,retain)id<COverFlowViewDelegate> delegate;
@end

@interface CoverFlowViewController : UIViewController
<COverFlowViewDelegate> 
{
CoverFlowView *cfView;
FlipView *flipView;
BOOL is_Flip;
}
@property(nonatomic,retain)CoverFlowView *cfView;
@property (nonatomic,retain)FlipView *flipView;
@property BOOL is_Flip;
-(void)start;
@end

修改  CoverFlowViewController.m 内容为下


//
//  CoverFlowViewController.m
//  CoverFlow
//
//  Created by apple007 on 10-1-4.
//  Copyright __MyCompanyName__ 2010. All rights reserved.
//

#import "CoverFlowViewController.h"
#import "UICoverFlowLayer.h"
#import "CoverFlowView.h"

@implementation FlipView
@synthesize textView,delegate;

-(id)init
{
self = [super initWithFrame:CGRectMake(0, 0, 320, 460)];
textView = [[UITextView alloc] initWithFrame:CGRectMake(0, 0, 320, 460)];
[self setBackgroundColor:[UIColor clearColor]];
[textView setBackgroundColor:[UIColor redColor]];
[textView setTextColor:[UIColor yellowColor]];
[textView setText:@"This is a pic"];
return self;
}
-(void)dealloc
{
[textView release];
[super dealloc];    
}
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
[delegate flipSelectedCover];
}
@end

@interface UIView (extended)
- (void) startHeartbeat: (SEL) aSelector inRunLoopMode: (id) mode;
- (void) stopHeartbeat: (SEL) aSelector;
@end

@implementation CoverFlowViewController
@synthesize cfView,flipView,is_Flip;


// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
- (void)viewDidLoad {
[self.view setUserInteractionEnabled:YES];
self.cfView = [[CoverFlowView alloc] initWithFrame:CGRectMake(0, 0, 320, 480) addCount:1];
[self.cfView.cfLayer setDelegate:self];
[self.cfView.cfLayer selectCoverAtIndex:1];
self.view = self.cfView;
[self start];

self.flipView = [[FlipView alloc] init];
[self.flipView setDelegate:self];
[super viewDidLoad];
}

- (void)didReceiveMemoryWarning {
// Releases the view if it doesn't have a superview.
[super didReceiveMemoryWarning];

// Release any cached data, images, etc that aren't in use.
}

- (void)viewDidUnload {
// Release any retained subviews of the main view.
// e.g. self.myOutlet = nil;
}


- (void)dealloc {
[flipView release];
[cfView release];
[super dealloc];
}
-(void)loadView
{
[super loadView];    
}
-(void)start
{
[self.cfView startHeartbeat: @selector(tick) inRunLoopMode: (id)kCFRunLoopDefaultMode];
[self.cfView.cfLayer transitionIn:2.0f];
}
#pragma mark delegate
- (void) coverFlow: (id) coverFlow selectionDidChange: (int) index
{

}
- (void) coverFlowFlipDidEnd: (UICoverFlowLayer *)coverFlow 
{ 
if(!self.is_Flip)
{
[self.cfView addSubview:self.flipView];
self.is_Flip = YES;
}else
{
[self.flipView removeFromSuperview];
self.is_Flip = NO;
}
}
- (void) coverFlow:(id)coverFlow requestImageAtIndex: (int)index quality: (int)quality
{
UIImage *whichImg = [UIImage imageNamed:[NSString stringWithFormat:@"00%d.jpg",index]];
[coverFlow setImage:[whichImg CGImage]  atIndex:index type:quality];
}

// Return a flip layer, one that preferably integrates into the flip presentation
- (id) coverFlow: (UICoverFlowLayer *)coverFlow requestFlipLayerAtIndex: (int) index
{
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 140, 140)];
[view setBackgroundColor:[UIColor redColor]];
return [view layer];
}
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
[self.cfView flipSelectedCover];
}
-(void)flipSelectedCover
{
[self.cfView flipSelectedCover];
}
@end



然后新建一个UIView的子类 并命名为 CoverFlowView.h  并创建 .m文件

修改CoverFlowView.h 文件内容为下 

//
//  CoverFlowView.h
//  CoverFlow
//
//  Created by apple007 on 10-1-4.
//  Copyright 2010 __MyCompanyName__. All rights reserved.
//

#import <UIKit/UIKit.h>
#import "UICoverFlowLayer.h"
@interface UIView (LayerSet)   //类别
- (void) setLayer: (id) aLayer;
@end



@interface CoverFlowView : UIView {
UICoverFlowLayer *cfLayer;
UIImageView            *phimg;
}
- (CoverFlowView*)initWithFrame:(CGRect)aRect addCount:(NSInteger)count;
@property (nonatomic,retain) UIImageView            *phimg;
@property (nonatomic,retain)UICoverFlowLayer *cfLayer;
- (void) tick;
- (void) flipSelectedCover;
@end


修改 CoverFlowView.m 内容为下 

//
//  CoverFlowView.m
//  CoverFlow
//
//  Created by apple007 on 10-1-4.
//  Copyright 2010 __MyCompanyName__. All rights reserved.
//
#import <QuartzCore/QuartzCore.h>
#import "CoverFlowView.h"
#import "UICoverFlowLayer.h"



@implementation CoverFlowView
@synthesize cfLayer,phimg;

- (CoverFlowView*)initWithFrame:(CGRect)aRect addCount:(NSInteger)count {
self = [super initWithFrame:aRect];

self.cfLayer = [[UICoverFlowLayer alloc] initWithFrame:CGRectMake(0, 0, 320, 480) 
numberOfCovers:12
numberOfPlaceholders:1];
[[self layer] addSublayer:(CALayer *)self.cfLayer];
self.phimg = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 30, 30)];
[self.cfLayer setPlaceholderImage: [self.phimg layer] atPlaceholderIndex:1];

unsigned int *pharray = malloc(count * sizeof(int));
for (int i = 0; i < 12; i++) pharray[i] = 0;;
[cfLayer setPlaceholderIndicesForCovers:pharray];
[self setUserInteractionEnabled:YES];
return self;
}
- (void)drawRect:(CGRect)rect {
// Drawing code
}
- (void)dealloc {
[phimg release];
[cfLayer release];
[super dealloc];
}
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
[self.cfLayer dragFlow:0 atPoint:[[touches anyObject] locationInView:self]];
}
- (void) touchesMoved:(NSSet*)touches withEvent:(UIEvent*)event
{
[self.cfLayer dragFlow:1 atPoint:[[touches anyObject] locationInView:self]];
}
- (void) touchesEnded:(NSSet*)touches withEvent:(UIEvent*)event
{    
[self.cfLayer dragFlow:2 atPoint:[[touches anyObject] locationInView:self]];
}

- (void) flipSelectedCover
{
[self.cfLayer flipSelectedCover];
}

- (void) tick
{
[self.cfLayer displayTick];
}
@end


好了 写到这里我们的coverFlow 工程已经接近尾声了，还要说名一点，就是图片。
我用了大约8～9张图片，记不清了  图片命名为 001.png 002.png ....... 011.png 
大家直接把图片拖到工程里面就行了。好了 看一下程序运行的效果吧！！


效果很炫吧！！下次我再给大家详细的讲解一下CoverFlow的原理。还有本空间会陆续的发布一些iPhone的相关技术，有兴趣的可以加我，也可以去我们公司论坛发贴，欢迎大家来访。

公司网址：www.aisidechina.com         

第二种实现

iPhone中实现CoverFlow简介

简要描述

CoverFlow在iPhone中一种非常炫的效果(见图), 通常用来浏览图片及视频等文件。

在iPhone的SDK中有个UICoverFlowLayer类，可以用来实现CoverFlow效果。不过遗憾的是，该类属于私有API,我们无法使用该类。不过我们借助于开源框架AFOpenFlow来实现。

首先，需要在项目中添加OpenFlow开源框架([http://apparentlogic.com/openflow/]),并添加需要显示的图片。

再添加一个RootViewController作为默认页面,该类的头文件定义如下:

{code}#import <UIKit/UIKit.h>

#import "AFOpenFlowView.h"

// 实现了AFOpenFlowViewDataSource和AFOpenFlowViewDelegate委托.

@interface ImageBrowserController : UIViewController<AFOpenFlowViewDataSource, AFOpenFlowViewDelegate> {

      // 用来存储图片对象.

      NSArray *coverImageData;

}

// 设置默认显示的图片.

- (void) imageDidLoad:(NSArray *)arguments;

@end{code}

在RootViewController.m中，首先重载viewDidLoad方法，用于加载图并生成CoverFlow视图。

{code}- (void)viewDidLoad{

// Use sample images, but load them all at once.

// Load Images.

coverImageData = [NSArray arrayWithObjects:[UIImage imageNamed:@"2569531.jpg"],

  [UIImage imageNamed:@"2569547.jpg"],

  [UIImage imageNamed:@"2569554.jpg"],

  [UIImage imageNamed:@"V1440x900.jpg"],

  [UIImage imageNamed:@"2569555.jpg"],

  [UIImage imageNamed:@"2569562.jpg"],

  [UIImage imageNamed:@"2569565.jpg"],

  nil];

// Set the Images in OpenFlow View and set the count of images.

for (int i=0; i < [array count]; i++) {

[(AFOpenFlowView *)self.view setImage:[array objectAtIndex:i] forIndex:i];

}

[(AFOpenFlowView *)self.view setNumberOfImages:[array count]];

}{code}

现在我们需要设置程序启动时默认显示的图片:

{code}- (void) imageDidLoad:(NSArray *)arguments{

UIImage *loadedImage = (UIImage *) [arguments objectAtIndex:0];

NSNumber *imageIndex = (NSNumber *) [arguments objectAtIndex:1];

[(AFOpenFlowView *)self.view setImage:loadedImage forIndex:[imageIndex intValue]];

}{code}