触类旁通 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。