WKPagesCollectionView

我尝试想做一个类似 iOS7 下的 safari tabs 页面那样的效果。

• 有页面翻转的效果;
• 点击一个页面变成正常的显示状态;
• 往左划动会删除这个cell;
• 可以在底部添加新的cell;

点击查看效果视频

]

##使用

• 项目中添加 WKPagesCollectionView目录以及下面的WK.h, WKPagesCollectionView.h, WKPagesCollectionView.m, WKPagesCollectionViewCell.h, WKPagesCollectionViewCell.m, WKPagesCollectionViewFlowLayout.h, WKPagesCollectionViewFlowLayout.m;

• 引用 WKPagesCollectionView;

• 准备数据

    _array=[[NSMutableArray alloc]init];
    for (int a=0; a<=30; a++) {
        [_array addObject:[NSString stringWithFormat:@"button %d",a]];
    }
  

• 创建collectionView

    _collectionView=[[[WKPagesCollectionView alloc]initWithPagesFlowLayoutAndFrame:CGRectMake(0.0f, 0.0f, self.view.frame.size.width, self.view.frame.size.height)] autorelease];
    _collectionView.dataSource=self;
    _collectionView.delegate=self;
    [_collectionView registerClass:[WKPagesCollectionViewCell class] forCellWithReuseIdentifier:@"cell"];
    [self.view addSubview:_collectionView];
    _collectionView.maskShow=YES;
  

• 完成WKPagesCollectionViewDataSource(继承自UICollectionViewDataSource) 和 WKPagesCollectionViewDelegate(继承自UICollectionViewDelegate), 除了要完成UICollectionViewDataSource中提供数据的方法外，还要完成追加数据的方法-(void)willAppendItemInCollectionView:(WKPagesCollectionView *)collectionView 和删除数据的方法 -(void)collectionView:(WKPagesCollectionView *)collectionView willRemoveCellAtNSIndexPath:(NSIndexPath *)indexPath

    #pragma mark - UICollectionViewDataSource and UICollectionViewDelegate
    -(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
        return _array.count;
    }
    -(UICollectionViewCell*)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    //    NSLog(@"cellForItemAtIndexPath:%d",indexPath.row);
        static NSString* identity=@"cell";
        WKPagesCollectionViewCell* cell=(WKPagesCollectionViewCell*)[collectionView dequeueReusableCellWithReuseIdentifier:identity forIndexPath:indexPath];
        cell.collectionView=collectionView;
        UIImageView* imageView=[[[UIImageView alloc]initWithImage:[UIImage imageNamed:@"image-0"]] autorelease];
        imageView.frame=self.view.bounds;
        [cell.cellContentView addSubview:imageView];
        UIButton* button=[UIButton buttonWithType:UIButtonTypeCustom];
        button.frame=CGRectMake(0, (indexPath.row+1)*10+100, 320, 50.0f);
        button.backgroundColor=[UIColor whiteColor];
        [button setTitleColor:[UIColor darkGrayColor] forState:UIControlStateNormal];
        [button setTitle:_array[indexPath.row] forState:UIControlStateNormal];
        [button addTarget:self action:@selector(onButtonTitle:) forControlEvents:UIControlEventTouchUpInside];
        [cell.cellContentView addSubview:button];
        return cell;
    }
    #pragma mark WKPagesCollectionViewDataSource
    ///追加数据
    -(void)willAppendItemInCollectionView:(WKPagesCollectionView *)collectionView{
        [_array addObject:@"new button"];
    }
    ///删除数据
    -(void)collectionView:(WKPagesCollectionView *)collectionView willRemoveCellAtNSIndexPath:(NSIndexPath *)indexPath{
        [_array removeObjectAtIndex:indexPath.row];
    }
  

• 添加一个页面时的操作

    -(IBAction)onButtonAdd:(id)sender{
        [_collectionView appendItem];
    }
  

• 展开显示一个具体的页面,这个在点击页面的时候会自动实现，也可以像下面这样代码调用;

    [_collectionView showCellToHighLightAtIndexPath:indexPath completion:^(BOOL finished) {
        NSLog(@"highlight completed");
    }];
  

• 停止展开，回到普通的滚动模式

    -(IBAction)onButtonTitle:(id)sender{
        NSLog(@"button");
        [_collectionView dismissFromHightLightWithCompletion:^(BOOL finished) {
            NSLog(@"dismiss completed");
        }];
    }
  

##TODO

• bug 每滚动几个时候顶上的那一个就会先看不见然后又突然出现了，还没想到原因 这个问题已经解决，@Nikolay Abelyashev 修复了这个bug,原因是由于WKPagesCollectionView的高度太小，而UICollectionView会把屏幕外的cell不在显示，在WKPagesCollectionView中，屏幕外的3个cell会被取消显示，解决的办法是修改WKPagesCollectionView的frame，使他高出window（这里添加了 topOfScreen:120.0f）,然后把frame.origin.y也往上移动了那么多距离，这样WKPagesCollectionView其实就更大;

##实现的方式 ###实现滚动

我使用了UICollectionView来实现，本质上是一个垂直的列表，而主要的工作是来创造一个CollectionViewLayout, (我定义为WKPagesCollectionViewFlowLayout)每一个cell其实是和当前屏幕一样大小的，也就是说其实就是有一堆和屏幕一样大的cell错开折叠在一起，他们之间的间隔设置为self.minimumLineSpacing=-1*(self.itemSize.height-160.0f);。

为了实现翻转的效果，我在WKPagesCollectionViewFlowLayout中的 -(NSArray*)layoutAttributesForElementsInRect:(CGRect)rect 中修改了transform3D。

看上去貌似比较简单，而如果所有的页面都是固定的角度的话，的确也没问题，但是我想像safari里那样在滚动时有点视差的效果，所以就为每个页面设置了不同的翻转角度了，其实就是在layoutAttributesForElementsInRect 中根据每个cell的位置来计算角度使得他们在滚动条滚动时有点不同的角度，下面这个是设置角度的方法:

	-(void)makeRotateTransformForAttributes:(UICollectionViewLayoutAttributes*)attributes{
	    attributes.zIndex=attributes.indexPath.row;///要设置zIndex，否则遮挡顺序会有编号
	    CGFloat distance=attributes.frame.origin.y-self.collectionView.contentOffset.y;
	    CGFloat normalizedDistance = distance / self.collectionView.frame.size.height;
	    normalizedDistance=fmaxf(normalizedDistance, 0.0f);
	    CGFloat rotate=RotateDegree+20.0f*normalizedDistance;
	    //CGFloat rotate=RotateDegree;
	    NSLog(@"makeRotateTransformForAttributes:row:%d,normalizedDistance:%f,rotate:%f",
	          attributes.indexPath.row,normalizedDistance,rotate);
	    ///角度大的会和角度小的cell交叉，即使设置zIndex也没有用，这里设置底部的cell角度越来越大
	    CATransform3D rotateTransform=WKFlipCATransform3DPerspectSimpleWithRotate(rotate);
	    attributes.transform3D=rotateTransform;
	    
	}

-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)path
{
    NSLog(@"layoutAttributesForItemAtIndexPath:%d",path.row);
    UICollectionViewLayoutAttributes* attributes=[super layoutAttributesForItemAtIndexPath:path];
    [self makeRotateTransformForAttributes:attributes];
    return attributes;
}
-(NSArray*)layoutAttributesForElementsInRect:(CGRect)rect
{
    NSLog(@"layoutAttributesForElementsInRect:%@",NSStringFromCGRect(rect));
    NSArray* array = [super layoutAttributesForElementsInRect:rect];
    for (UICollectionViewLayoutAttributes* attributes in array) {
        [self makeRotateTransformForAttributes:attributes];
    }
    return array;
}

现在运行的时候，滚动起来就和想要的效果差不多了，虽然不如safari那么细节完美，大概的意思是达到了。

##实现删除

后面我想做出safari那样按住其中一个cell往左滑动就删除的效果，在每个cell里面添加一个scrollView，然后scrollViewDidEndDragging 中达到一定距离的时候就触发删除好了，而UICollectionView中的performBatchUpdates就可以很好的完成删除的动画了。

	-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{
	    if (self.showingState==WKPagesCollectionViewCellShowingStateNormal){
	        if (scrollView.contentOffset.x>=90.0f){
	            NSIndexPath* indexPath=[self.collectionView indexPathForCell:self];
	            NSLog(@"delete cell at %d",indexPath.row);
	            //self.alpha=0.0f;
	            ///删除数据
	            id<WKPagesCollectionViewDataSource> pagesDataSource=(id<WKPagesCollectionViewDataSource>)self.collectionView.dataSource;
	            [pagesDataSource collectionView:(WKPagesCollectionView*)self.collectionView willRemoveCellAtNSIndexPath:indexPath];
	            ///动画
	            [self.collectionView performBatchUpdates:^{
	                [self.collectionView deleteItemsAtIndexPaths:@[indexPath,]];
	            } completion:^(BOOL finished) {
	                
	            }];
	        }
	    }
	}

为了添加和删除的时候动画的好看一点，我们还得修改 (UICollectionViewLayoutAttributes*)initialLayoutAttributesForAppearingItemAtIndexPath:(NSIndexPath *)itemIndexPath 和 -(UICollectionViewLayoutAttributes*)finalLayoutAttributesForDisappearingItemAtIndexPath:(NSIndexPath *)itemIndexPath

我在WKPagesCollectionViewFlowLayout 中添加了insertIndexPaths 和 deleteIndexPaths 来记录用来添加和删除的位置,因为这个两个回调在添加和删除时会被调用，而且不仅仅是针对正在添加或者删除的NSIndexPath,其他行也会被调用，而我们这里只要处理正在添加和删除的NSIndexPath;

	-(UICollectionViewLayoutAttributes*)initialLayoutAttributesForAppearingItemAtIndexPath:(NSIndexPath *)itemIndexPath{
	    UICollectionViewLayoutAttributes* attributes=[super initialLayoutAttributesForAppearingItemAtIndexPath:itemIndexPath];
	    NSLog(@"initialLayoutAttributesForAppearingItemAtIndexPath:%d",itemIndexPath.row);
	    if ([self.insertIndexPaths containsObject:itemIndexPath]){
	        if (!attributes)
	            attributes=[self layoutAttributesForItemAtIndexPath:itemIndexPath];
	        CATransform3D rotateTransform=WKFlipCATransform3DPerspectSimpleWithRotate(-90.0f);
	        attributes.transform3D=rotateTransform;
	    }
	    return attributes;
	}
	-(UICollectionViewLayoutAttributes*)finalLayoutAttributesForDisappearingItemAtIndexPath:(NSIndexPath *)itemIndexPath{
	    NSLog(@"finalLayoutAttributesForDisappearingItemAtIndexPath:%d",itemIndexPath.row);
	    UICollectionViewLayoutAttributes* attributes=[super finalLayoutAttributesForDisappearingItemAtIndexPath:itemIndexPath];
	    if ([self.deleteIndexPaths containsObject:itemIndexPath]){
	        if (!attributes){
	            attributes=[self layoutAttributesForItemAtIndexPath:itemIndexPath];
	        }
	        CATransform3D moveTransform=CATransform3DMakeTranslation(-320.0f, 0.0f, 0.0f);
	        attributes.transform3D=CATransform3DConcat(attributes.transform3D, moveTransform);
	    }    
	    return attributes;
	    
	}

开始的时候会发生一些意想不到的动画效果，滚动到底部，然后在模拟器下按下command+t打开慢速动画的时候就看的很清楚了，往左滑动来删除最后两个cell,在删除时一开始的效果是正常的，而几乎在完成之后，会看到一闪，出现了两个cell在很奇怪的位置，然后又动画慢慢回到预订的位置。

现在的问题就是，如果我删除带有button-0,button-1,button-2,button-3这样的cell，动画是正常的，但是如果我删除最后几个cell,带有button-6,button-7,button-8的，就会出现意想不到的动画。

而且我发现如果我的cell的翻转角度如果是全部固定的，那在删除cell时是不会发生奇怪的动画的，我的makeRotateTransformForAttributes2中是指定了一个固定的角度。

####Fixed

后来终于知道问题在哪里了，只是由于contentSize计算错误导致内容区域不够所以在删除cell后又自动滚动时产生了奇怪的行为，所以-(CGSize)collectionViewContentSize中的高度一定要正确。

###实现添加页面

现在页面有两种状态，一种就是这种普通的滚动页面的状态，当点击某一个页面的时候，他会翻转到全屏显示，这时我称作是highlight。如果只是在普通的滚动状态下，会先滚动到屏幕地步，然后添加一个页面，之后又会把这个页面展开到highLight显示状态。而如果现在整个collectionView本身就已经有一个页面在hightLight了，那应该先退回到普通状态，再重复之前的添加页面过程。

下面是在WKPagesCollectionView中的添加页面的方法;

	///追加一个页面
	-(void)appendItem{
	    if (self.isHighLight){
	        [self dismissFromHightLightWithCompletion:^(BOOL finished) {
	            [self _addNewPage];
	        }];
	    }
	    else{
	        [self _addNewPage];
	    }
	}
	///添加一页
	-(void)_addNewPage{
	    int total=[self numberOfItemsInSection:0];
	    [self scrollToItemAtIndexPath:[NSIndexPath indexPathForRow:total-1 inSection:0] atScrollPosition:UICollectionViewScrollPositionBottom animated:YES];
	    double delayInSeconds = 0.3f;
	    dispatch_time_t popTime = dispatch_time(DISPATCH_TIME_NOW, (int64_t)(delayInSeconds * NSEC_PER_SEC));
	    dispatch_after(popTime, dispatch_get_main_queue(), ^(void){
	        ///添加数据
	        [(id<WKPagesCollectionViewDataSource>)self.dataSource willAppendItemInCollectionView:self];
	        int lastRow=total;
	        NSIndexPath* insertIndexPath=[NSIndexPath indexPathForItem:lastRow inSection:0];
	        [self performBatchUpdates:^{
	            [self insertItemsAtIndexPaths:@[insertIndexPath]];
	        } completion:^(BOOL finished) {
	            double delayInSeconds = 0.3f;
	            dispatch_time_t popTime = dispatch_time(DISPATCH_TIME_NOW, (int64_t)(delayInSeconds * NSEC_PER_SEC));
	            dispatch_after(popTime, dispatch_get_main_queue(), ^(void){
	                [self showCellToHighLightAtIndexPath:insertIndexPath completion:^(BOOL finished) {
	                    
	                }];
	            });
	            
	        }];
	    });
	}