iOS Kingdom —— UICollectionView 流水布局

加班狗

UICollectionView 简介

    UICollectionVew 与 UITableView 有很多相似之处。在传说中，苹果为 collectionView 做了优化，使其界面流畅度更好（反正在下没有感觉出来）。与 tableView 相比，collectionView 多了一个横向滑动，而且动画的添加也更灵活。现在我来教大家用 UICollectionView 来实现一些简单的动画。

最终实现效果图:

Rotation3 效果图

实现原理:

UICollectionViewFlowLayout 实现动画原理

大家先不要怕原理图复杂，只要你看明白 “UICollectionViewFlowLayout 实现动画原理” 图带色的线，再结合后面的代码实现，你就会觉得 UICollectionView 的动画原来也就那样，So So easy 啦。

代码实现:

1. 创建一个 UICollectionViewFlowLayout 的子类 WQLayout

@interface WQLayout : UICollectionViewFlowLayout

@end

2. 创建一个 UIViewController 的子类并为其添加 collectionView 子视图，实现 UICollectionViewDelegate, UICollectionViewDataSource 的返回 Setion 与 返回 NumberInSetion 和返回 Cell 的方法（这个平时写多了，在这里在下就不写了）

WQLayout *layout = [[WQLayout alloc] init];

layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;

// 设置 Cell 的宽高

layout.itemSize = CGSizeMake(sWidth/2, sWidth/2 * 4/3);

self.collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 64, sWidth, sHeight/2) collectionViewLayout:layout];

self.collectionView.delegate = self;

self.collectionView.dataSource = self;

[self.view addSubview:self.collectionView];

设置完上以内容，这个类基本上你可以不怎么理它了。因为它的动画实现都在 UICollectionViewFlowLayout 的子类 WQLayout 里。

3. 动画实现

要实现动画，你首先要了解这几个方法：

> - (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds; 当你实现这个方法，并返回 YES 时，让每次更改都调   都重新获取 cell 的几何信息

> - (NSArray*)layoutAttributesForElementsInRect:(CGRect)rect; 获得某个范围内的 cell 的 attribute （动画都在这里实现），这里返回一个 cell 的 attribute 数组

> - (void)prepareLayout; 将要发生 layout （这个方法里放的一般用来初始化一些数据）

> - (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity; 这个方法可以是在你滑动过后，手指离开屏幕时，系统就会调用，告诉你它将停止在哪个位置（proposedContentOffset），加速度（velocity）是多少。这里会返回一个停止时的位置

1）首先我们来看一下重写 layoutAttributesForElementsInRect: 这个方法怎么实现动画：

-(NSArray*)layoutAttributesForElementsInRect:(CGRect)rect {

/** 获得 rect 里的 cell 的 attribute */

NSArray *attributes = [super layoutAttributesForElementsInRect:rect];

/** collectionView 的相对于 contentOffset 的最左边的中心点的距离 */

CGFloat cCenter = self.collectionView.contentOffset.x + self.collectionView.width/2.0 :

/** collectionView 的宽 */

self.cSize = self.collectionView.width;

for (UICollectionViewLayoutAttributes *attribute in attributes) {

        /** cell 相对于 contentOffset 最左边的中心点的距离 */

        self.aCenter =  attribute.center.x;

        /** 3D 旋转 */
        CATransform3D tran3D = CATransform3DIdentity;
        tran3D.m34 = -0.002;
        attribute.transform3D = CATransform3DRotate(tran3D, M_PI/2 * rotation, 0, 1, 0);
}
return attributes;
}

2）写完后一运行你会发现，第一个 Cell 和最后一个 Cell 总是不在屏幕的中间。这时，为了更美观，我们可以重写 prepareLayout: ，在这里设置一个 sectionInset

- (void)prepareLayout{

[super prepareLayout];

// 设置内边距,使第一个item居中

CGFloat inset = (self.collectionView.frame.size.width - self.itemSize.width) * 0.5 ;

self.sectionInset = UIEdgeInsetsMake(0, inset, 0, inset);
}

3）写到这里你会发现，当你滑动视图的时候，Cell 不一定有一个在中间。这时候，我们就可以重写最后一个方法了——targetContentOffsetForProposedContentOffset:withScrollingVelocity:

最终停止原理

- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity{

CGRect rect;

rect.origin.x =  proposedContentOffset.x;

rect.size = self.collectionView.bounds.size;

NSArray *attributes = [super layoutAttributesForElementsInRect:rect];

// 得到离 rect 中心点最近的值

CGFloat min = MAXFLOAT;

for (UICollectionViewLayoutAttributes *attribute in attributes) {

self.aCenter =  attribute.center.x;

min = MIN(fabs(min), fabs(self.aCenter - self.cCenter)) == fabs(min) ? min : self.aCenter - self.cCenter;

}

// 调节移动停止后的 Offset

proposedContentOffset.x = proposedContentOffset.x + min;

return proposedContentOffset;

}

UICollectionView 动画 WQFlowLayout