user3354840
user3354840

Reputation: 43

UIcollection view support cover flow

Hi friends is it possible to add a cover flow effect in uicollection view in horizontal layout.if possible means kindly tell me how to implement the effect.

Upvotes: 2

Views: 4273

Answers (2)

Husam
Husam

Reputation: 8558

Here is a good project based on UICollectionView for you.

Upvotes: 1

Zeeshan
Zeeshan

Reputation: 4244

Yes it is possible, You need to Implement your custom UICollectionViewFlowLayout.

Make a custom class which inherits UICollectionViewFlowLayout

- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds {
    return YES; }

- (UICollectionViewScrollDirection)scrollDirection {
    return UICollectionViewScrollDirectionVertical; }

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {

    UICollectionView *collectionView = [self collectionView];
    UIEdgeInsets insets = [collectionView contentInset];
    CGPoint offset = [collectionView contentOffset];
    CGFloat minY = -insets.top;

    NSArray *attributes = [super layoutAttributesForElementsInRect:rect];

    // minY is Point where we implement this cover flow.
    if (offset.y < minY) {  

        // Figure out how much we've pulled down 
        CGFloat deltaY = fabsf(offset.y - minY);

        for (UICollectionViewLayoutAttributes *attrs in attributes) {

            // Locate the header attributes
            NSString *kind = [attrs representedElementKind];
            if (kind == UICollectionElementKindSectionHeader) {

                // This is header's height and y based on how much the user has scrolled down.
                CGSize headerSize = [self headerReferenceSize];
                CGRect headerRect = [attrs frame];
                headerRect.size.height = MAX(minY, headerSize.height + deltaY);
                headerRect.origin.y = headerRect.origin.y - deltaY;
                [attrs setFrame:headerRect];
                break;
            }
        }
    }
    return attributes; }

Now in your class where you allocate UICollectionView

CustomCoverFlowHeaderCollectionViewLayout *flow;  flow = [[CustomCoverFlowHeaderCollectionViewLayout alloc] init]; [stretchyLayout setHeaderReferenceSize:CGSizeMake(320.0, 160.0)];   // Set our custom layout [collectionView setCollectionViewLayout: flow];  [collectionView setAlwaysBounceVertical:YES];    [collectionView registerClass:[UICollectionReusableView class]    forSupplementaryViewOfKind:UICollectionElementKindSectionHeader
          withReuseIdentifier:@"myCoverCollectionView"];

You are almost done

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView 
       viewForSupplementaryElementOfKind:(NSString *)kind 
                             atIndexPath:(NSIndexPath *)indexPath {
if (!header) {

    header = [collectionView dequeueReusableSupplementaryViewOfKind:kind
                                                withReuseIdentifier:@"myCoverCollectionView" forIndexPath:indexPath];
    CGRect bounds;
    bounds = [header bounds];

    UIImageView *imageView;
    imageView = [[UIImageView alloc] initWithFrame:bounds];
    [imageView setImage:[UIImage imageNamed:@"background"]];
    [imageView setContentMode:UIViewContentModeScaleAspectFill];
    [imageView setClipsToBounds:YES];
    [imageView setAutoresizingMask:UIViewAutoresizingFlexibleHeight];
    [header addSubview:imageView];
}
return header; }

Upvotes: 2

Related Questions