Integration and Customization of Coverflow Library

This blog describe how to integrate cover flow effect in application using open source library .

First get the source code for CoverFlow from this link:-https://github.com/thefaj/OpenFlow

1.)Open your project and all the files in your project.
2.)Add QuartzCore and CoreGraphics Frameworks.
3.)In your View Controller.h file
import - #import "AFOpenFlowView.h"
@interface AFOpenFlowViewController : UIViewController <AFOpenFlowViewDataSource, AFOpenFlowViewDelegate>

In .m file

in viewDidLoad method do

-(void)viewDidLoad
{
NSString *imageName;
for (int i=0; i < 30; i++) {
imageName = [[NSString alloc] initWithFormat:@"%d.jpg", i];
[(AFOpenFlowView *)self.view setImage:[UIImage imageNamed:imageName] forIndex:i];
[imageName release];
}
[(AFOpenFlowView *)self.view setNumberOfImages:30];
}
add these methods:-

- (UIImage *)defaultImage {
return [UIImage imageNamed:@"transparentdefault.png"];
}

- (void)openFlowView:(AFOpenFlowView *)openFlowView selectionDidChange:(int)index {
NSLog(@"Cover Flow selection did change to %d", index);

}

Customization of Cover Flow Effect:-

In AFItemView.m file you will see this method:-

if (self = [super initWithFrame:frame]) {
self.opaque = YES;
self.backgroundColor = NULL;
verticalPosition = 0;
horizontalPosition = 0;

// Image View
imageView = [[UIImageView alloc] initWithFrame:frame];
imageView.opaque = YES;
[self addSubview:imageView];
}
Now suppose you want a white frame outside your image so for that what you have to do is:-

Then write this:-

if (self = [super initWithFrame:frame]) {
self.opaque = YES;
self.backgroundColor = NULL;
verticalPosition = 0;
horizontalPosition = 0;

// Image View
imageView = [[UIImageView alloc] initWithFrame:frame];
imageView.opaque = YES;
[self addSubview:imageView];

UIView* customView=[[UIView alloc]initWithFrame:CGRectMake(0, 220, 265, 20)];
customView.backgroundColor=[UIColor whiteColor];
customView.tag=22;
[self addSubview:customView];
[customView release];

UIView* customView2=[[UIView alloc]initWithFrame:CGRectMake(0, 20, 265, 7)];
customView2.backgroundColor=[UIColor whiteColor];
[self addSubview:customView2];
[customView2 release];

UIView* customView3=[[UIView alloc]initWithFrame:CGRectMake(0, 20, 8, 220)];
customView3.backgroundColor=[UIColor whiteColor];
[self addSubview:customView3];
[customView3 release];

UIView* customView4=[[UIView alloc]initWithFrame:CGRectMake(265, 20, 8, 220)];
customView4.backgroundColor=[UIColor whiteColor];
[self addSubview:customView4];
[customView4 release];
}

add this code in your this method

REMOVING IMAGE REFLECTION EFFECT:-

in OpenFlowView.m file

- (void)setImage:(UIImage *)image forIndex:(int)index {
// Create a reflection for this image.
//UIImage *imageWithReflection = [image addImageReflection:kReflectionFraction];
NSNumber *coverNumber = [NSNumber numberWithInt:index];
//[coverImages setObject:imageWithReflection forKey:coverNumber];
[coverImages setObject:image forKey:coverNumber];
[coverImageHeights setObject:[NSNumber numberWithFloat:image.size.height] forKey:coverNumber];

// If this cover is onscreen, set its image and call layoutCover.
AFItemView *aCover = (AFItemView *)[onscreenCovers objectForKey:[NSNumber numberWithInt:index]];
if (aCover) {
//[aCover setImage:imageWithReflection originalImageHeight:image.size.height reflectionFraction:kReflectionFraction];
[aCover setImage:image originalImageHeight:image.size.height reflectionFraction:kReflectionFraction];
[self layoutCover:aCover selectedCover:selectedCoverView.number animated:NO];
}
}

- (void)layoutCover:(AFItemView *)aCover selectedCover:(int)selectedIndex animated:(Boolean)animated
{

//newPosition.y = halfScreenHeight + aCover.verticalPosition; //comment this
newPosition.y = halfScreenHeight ;//add this
}

INCREASING/DECREASING IMAGE WIDTH:-

IN AFItemView.m file

- (void)setImage:(UIImage *)newImage originalImageHeight:(CGFloat)imageHeight reflectionFraction:(CGFloat)reflectionFraction {
[imageView setImage:newImage];
verticalPosition = imageHeight * reflectionFraction / 2;
originalImageHeight = imageHeight;
self.frame = CGRectMake(0, 20, newImage.size.width+40, newImage.size.height-20);//adjust coordinates yourself
}