UICollectionView

2017/10/25 15:37
阅读数 57
 

前言

上一章节我讲完了纵向瀑布流的布局,有朋友私信我问横向怎么做,其实横向就是你在X轴扩充内容,原本是动态计算高度的,现在变成动态计算宽度,原本是记录列长度的数组,现在用来记录行长度。基本的原理都差不多,大家可以多多自己摸索一下。

横向瀑布流

那么本章节,我们的主要重心就放在布局的变式上面,通过各种有趣的布局方式,来获得我们想要的UI效果。

本章节一共进行如下几个功能的书写:

1.page悬停。

2.横向布局及动画效果。

3.增、删Item及其动画效果。

预备工作:

我们首先要写好最基本的UICollectionView的构建代码,这些都在本系列的第一章节有,就不再赘述。然后我们需要写的是横向布局的布局代码,还记得代码的核心写在哪个方法吗?

-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath;

基本布局的核心代码:

-(void)prepareLayout
{
    [super prepareLayout];
    //为了横向布局,这里我们将列数等于数据源个数
    self.columnCount = [self.collectionView numberOfItemsInSection:0];
    self.columnSpace = 20;//列之间的间距加宽10
    self.rowSpace = 10;
    //由于我们需要从第0个Item到最后一个,要他们和UICollectionView的中心点重合完成Page悬停效果,所以我们做适当改动
    self.sectionInsets = UIEdgeInsetsMake(5.0f, self.collectionView.bounds.size.width*0.35, 5.0f, self.collectionView.bounds.size.width*0.35);;

    [self.columnYArray removeAllObjects];
    for (NSInteger index = 0; index < self.columnCount; index++) {
        [self.columnYArray addObject:@(self.sectionInsets.top)];
    }
    //我们假定数据源只有一组。
    //当然也可以有多组,这样的话我们只要用嵌套循环就可以遍历所有的Item了。
    [self.attributesArray removeAllObjects];
    for (NSInteger index = 0; index<[self.collectionView numberOfItemsInSection:0]; index++) {

        UICollectionViewLayoutAttributes * attributes = [self layoutAttributesForItemAtIndexPath:[NSIndexPath indexPathForItem:index inSection:0]];

        [self.attributesArray addObject:attributes];
    }
}

-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewLayoutAttributes * attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];

    CGFloat width = self.collectionView.bounds.size.width;
    CGFloat height = self.collectionView.bounds.size.height;

    CGFloat w = width*0.3;
    CGFloat h = height*0.2;

    CGFloat x = self.sectionInsets.left + (self.columnSpace + w)*indexPath.item;
    CGFloat y = height*0.4;

    attributes.frame = CGRectMake(x, y, w, h);

    //这里我们增加了contentX来记录最长X轴距离,砍掉循环查询
    self.contentX = attributes.frame.origin.x + attributes.frame.size.width;

    return attributes;
}
//由于我们变成了横向布局,所以我们需要改变collectionView的滑动范围
-(CGSize)collectionViewContentSize
{
    return CGSizeMake(self.contentX + self.sectionInsets.right, 0);
}

至此,我们的基本效果就出来了:

基本效果

1.page悬停。

要完成page悬停,我们需要计算当前的x轴偏移量与最近的中心点的差值,然后让UICollectionView加上这段偏移量。

而我们的UICollectionViewLayout提供了一个方法- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity;来告诉我们当前UICollectionView将要滑到的位置和方向。于是利用这一点,我们的代码如下:

-(CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity
{
    CGFloat midCenterX = self.collectionView.center.x;
    CGFloat cardWidth = self.collectionView.bounds.size.width*0.3;

    CGFloat realMidX = proposedContentOffset.x + midCenterX;

    //这里我们用滑动内容的中心点对每个完整的Item求余,获得整数Item以外的偏移量
    CGFloat more = fmodf(realMidX-self.sectionInsets.left, cardWidth+self.columnSpace);
    //上一行获取的偏移量对Item中心点的间距,也就是我们的偏移量需要再增加的偏移量。
     //返回这个经过计算的偏移量,系统会帮我们无痕的完整偏移。
    return CGPointMake(proposedContentOffset.x-(more-cardWidth/2.0), 0);    
}

效果如下(注意看底部的滑动块):

Page悬停

2.横向布局及动画效果。

在预备工作中我们完成了横向布局的书写,那么我们需要对这种死板的布局加上一点动画效果。

通过与中心点距离的比例,我们改变Item的scale和alpha,来完成一个越靠近中心点,透明度越低越大,反之越高越小的布局。这里用到的关键就是UICollectionViewLayoutAttributes的transform和alpha属性。

我们对核心方法做一点改变:

-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewLayoutAttributes * attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];

    CGFloat width = self.collectionView.bounds.size.width;
    CGFloat height = self.collectionView.bounds.size.height;

    CGFloat w = width*0.3;
    CGFloat h = height*0.2;

    CGFloat x = self.sectionInsets.left + (self.columnSpace + w)*indexPath.item;
    CGFloat y = height*0.4;

    attributes.frame = CGRectMake(x, y, w, h);

    //这里我们增加了contentX来记录最长X轴距离,砍掉循环查询
    self.contentX = attributes.frame.origin.x + attributes.frame.size.width;

    //获取滑动内容实时显示尺寸的中心点
    CGFloat centerX = self.collectionView.contentOffset.x + self.collectionView.frame.size.width * 0.5;
    //获取当前Item的中心距滑动内容实时显示尺寸的中心点的差值并完成比例计算
    CGFloat delta = ABS(attributes.center.x - centerX);
    CGFloat scale = 1.0 - delta / self.collectionView.frame.size.width;
    //通过比例,来进行2D变形和透明度变化。
    attributes.transform = CGAffineTransformMakeScale(scale, scale);
    attributes.alpha = scale;

    return attributes;
}

重新运行后,得到的效果如图:

横向动效

3.增、删Item及其动画效果。

有时候我们需要再UI上通过交互的形式添加新数据或者删除已有的数据,而且需要配备相应的动画效果,那么我们需要用到如下的代码:

首先我们需要完成增和删的操作(这些操作在UICollectionView的点击事件中完成):

-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    __block ViewController * weakself = self;
    if (indexPath.row%2) {
        //奇数Item的点击我们删除数据源尾部,并且调用CollectionView的deleteItemsAtIndexPaths:方法删除Item
        [self.cardCollectionView performBatchUpdates:^{
            NSMutableArray * theArray = [NSMutableArray arrayWithArray:self.dataArray];
            BJCardModel * model = [BJCardModel new];
            model.indexStr = [NSString stringWithFormat:@"%ld",theArray.count];
            [theArray addObject:model];
            weakself.dataArray = [NSArray arrayWithArray:theArray];

            NSIndexPath * indexpath = [NSIndexPath indexPathForItem:self.dataArray.count-1 inSection:0];
            [weakself.cardCollectionView insertItemsAtIndexPaths:@[indexpath]];

        } completion:nil];
    }else{
        //偶数Item的点击我们在数据源尾部增加新数据,并且调用CollectionView的insertItemsAtIndexPaths:方法新增Item
        [self.cardCollectionView performBatchUpdates:^{
            NSMutableArray * theArray = [NSMutableArray arrayWithArray:self.dataArray];
            [theArray removeLastObject];
            weakself.dataArray = [NSArray arrayWithArray:theArray];

            NSIndexPath * indexpath = [NSIndexPath indexPathForItem:self.dataArray.count inSection:0];
            [weakself.cardCollectionView deleteItemsAtIndexPaths:@[indexpath]];

        } completion:nil];
    }

}

然后我们再自定义的Layout中,新增两个数组,来记录新增和删除的updateItem,因为在上面我们可以发现

[weakself.cardCollectionView insertItemsAtIndexPaths:@[indexpath]];
[weakself.cardCollectionView deleteItemsAtIndexPaths:@[indexpath]];

改变都是以数组的形式进行改变,尽管我们一次只改变一个。在多数据更改的情况下,我们需要用数组来记录,并在动画执行时对其完成判断:

//这个方法在即将发生改变时进行,并且提供了需要改变的Item数组
- (void)prepareForCollectionViewUpdates:(NSArray *)updateItems
{
    [super prepareForCollectionViewUpdates:updateItems];

    NSLog(@"准备改变");

    UICollectionViewUpdateItem *update = updateItems[0];
    NSLog(@"%ld -- %ld",update.indexPathBeforeUpdate.section,update.indexPathBeforeUpdate.row);
    NSLog(@"%ld -- %ld",update.indexPathAfterUpdate.section,update.indexPathAfterUpdate.row);
    NSLog(@"%ld",update.updateAction);


    self.deleteIndexPaths = [NSMutableArray array];
    self.insertIndexPaths = [NSMutableArray array];

    for (UICollectionViewUpdateItem *update in updateItems)
    {
        if (update.updateAction == UICollectionUpdateActionDelete)
        {
            [self.deleteIndexPaths addObject:update.indexPathBeforeUpdate];
        }
        else if (update.updateAction == UICollectionUpdateActionInsert)
        {
            [self.insertIndexPaths addObject:update.indexPathAfterUpdate];
        }
    }
}

//这个方法在新增时进行,并且提供了需要改变的Item的IndexPath
-(UICollectionViewLayoutAttributes *)initialLayoutAttributesForAppearingItemAtIndexPath:(NSIndexPath *)itemIndexPath
{
    NSLog(@"插入动画 : %ld -- %ld ",itemIndexPath.section,itemIndexPath.row);

    UICollectionViewLayoutAttributes * att = [super initialLayoutAttributesForAppearingItemAtIndexPath:itemIndexPath];

    if ([self.insertIndexPaths containsObject:itemIndexPath]) {
        if (!att) {
            att = [self layoutAttributesForItemAtIndexPath:itemIndexPath];
        }

        att.alpha = 0.1f;
    }

    return att;
}

//这个方法在删除时进行,并且提供了需要改变的Item的IndexPath
-(UICollectionViewLayoutAttributes *)finalLayoutAttributesForDisappearingItemAtIndexPath:(NSIndexPath *)itemIndexPath
{
    NSLog(@"删除动画 : %ld -- %ld ",itemIndexPath.section,itemIndexPath.row);

    UICollectionViewLayoutAttributes * att = [super finalLayoutAttributesForDisappearingItemAtIndexPath:itemIndexPath];

    if ([self.deleteIndexPaths containsObject:itemIndexPath]) {
        if (!att) {
            att = [self layoutAttributesForItemAtIndexPath:itemIndexPath];
        }

        att.alpha = 1.0f;
        att.transform = CGAffineTransformMakeRotation(DEGREES_TO_RADIANS(90));

    }

    return att;
}

//这个方法发生在改变完成时,我们对数组置nil
- (void)finalizeCollectionViewUpdates
{
    [super finalizeCollectionViewUpdates];

    NSLog(@"完成改变");

    self.deleteIndexPaths = nil;
    self.insertIndexPaths = nil;
}

至此我们的动画效果如下:

效果

我的动画效果比较简陋,纯粹是为了告诉大家怎么走通这个流程而进行的,大家可以根据自己的需要完成一些炫酷的动效。



作者:BradleyJohnson
链接:http://www.jianshu.com/p/d2421b88ee64
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部