觸類旁通 willDisplayCell在UICollectionView中的一些應用

1、UICollectionViewCell動畫

上一篇博客寫仿58同城實現UITableViewCell動畫,一樣UiCollectionView中也能用,上一個是從右到左的動畫還比較好弄, 但若是ScrollView滑動方向時垂直的,動畫方向也是垂直的話那就有一些要注意的了,由於Cell的frame是根據父視圖ScrollView的ContentSize、偏移量、ContentInset決定的,因此設置frame.Y要特別注意.x也要注意不能使用0.

//
//  ViewController.m
//  CollectionCell
//
//  Created by City--Online on 15/11/9.
//  Copyright © 2015年 City--Online. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()<UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout>
@property(nonatomic,strong) UICollectionView *collectionView;
@property (nonatomic,strong) NSMutableArray *showedIndexPaths;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    _showedIndexPaths=[[NSMutableArray alloc]init];
    float itemWidth=(self.view.bounds.size.width-3)/4;
    UICollectionViewFlowLayout  *collectionViewFlowLayout=[[UICollectionViewFlowLayout alloc]init];
    
    collectionViewFlowLayout.minimumInteritemSpacing=1.0;
    collectionViewFlowLayout.minimumLineSpacing=0.0;
    collectionViewFlowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;
    collectionViewFlowLayout.sectionInset = UIEdgeInsetsMake(0.0, 0.0, 0, 0.0);

    collectionViewFlowLayout.itemSize=CGSizeMake(itemWidth, itemWidth);
    collectionViewFlowLayout.estimatedItemSize=CGSizeMake(itemWidth, itemWidth);
    
    collectionViewFlowLayout.scrollDirection=UICollectionViewScrollDirectionVertical;

    collectionViewFlowLayout.headerReferenceSize=CGSizeMake(0, 0);
    collectionViewFlowLayout.footerReferenceSize=CGSizeMake(0, 0);
    
    _collectionView=[[UICollectionView alloc]initWithFrame:CGRectMake(0, self.view.bounds.size.height-itemWidth*2, self.view.bounds.size.width, itemWidth*2) collectionViewLayout:collectionViewFlowLayout];
    _collectionView.backgroundColor=[UIColor whiteColor];
    _collectionView.delegate=self;
    _collectionView.dataSource=self;
    _collectionView.allowsSelection=YES;
    _collectionView.allowsMultipleSelection=YES;
    
    [_collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cell"];
   
    [self.view addSubview:_collectionView];
}
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return 1;
}
//單元格
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewCell *cell =[collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];
    
    cell.backgroundColor = [UIColor colorWithRed:arc4random()%256/ 255.0  green:arc4random()%256 / 255.0 blue:arc4random()% 256 / 255.0  alpha:1];
   
    return cell;
    
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return 8;
    
}
- (void)collectionView:(UICollectionView *)collectionView willDisplayCell:(UICollectionViewCell *)cell forItemAtIndexPath:(NSIndexPath *)indexPath
{
    if ([_showedIndexPaths containsObject:indexPath]) {
        return;
    }
    else
    {
        [_showedIndexPaths addObject:indexPath];
        NSLog(@"%@",NSStringFromCGRect(cell.frame));
        
        CGRect toFrame=cell.frame;
        //Y ScrollView滑動到底部的時的Y
        cell.frame=CGRectMake(cell.frame.origin.x,_collectionView.contentSize.height+_collectionView.contentOffset.y+_collectionView.contentInset.top, cell.bounds.size.width, cell.bounds.size.height);
        cell.layer.cornerRadius=cell.bounds.size.width/2;

        [UIView animateWithDuration:(indexPath.row)*0.2+0.2 delay:0 options:UIViewAnimationOptionCurveEaseIn animations:^{
            cell.frame=toFrame;
        } completion:^(BOOL finished) {
           
        }];
    }
}
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    NSLog(@"%@",indexPath);
}
- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

效果圖:

2、仿百度 右邊一個Cell,左邊兩個Cell

在一些APP中也會有下面右邊一個Cell,左邊兩個Celll相似的佈局,除了用UICollectionViewFlowLayout自定義外,簡單一點就能夠在willDisplayCell中改變Cell的frame。