从零开始UICollectionView(4)--横向动画效果布局及page悬停、增删Item及其动画

2017-01-14 10:20:22来源:http://www.jianshu.com/p/d2421b88ee64作者:BradleyJohnson人点击

第七城市
前言

上一章节我讲完了纵向瀑布流的布局,有朋友私信我问横向怎么做,其实横向就是你在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;
}

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



效果

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


下节预告:我会完成一些由上述章节内容组合成的有趣的UICollectionView布局,到时作为UICollectionView系列的终结篇,将奉上所有Demo。谢谢各位。
注:若你觉得这文章确实帮到你了,或是支持一下原创技术文章,请为我点个赞。大爷若是还能打赏打赏,那就更好不过了。




第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台