[个人博客搬运]定制UICollectionViewLayout实现集合视图

最新的需求中，需要实现一个展示宝贝上新的视图，展现方式是点击一个UITableView的cell，在cell拉出一个空白的“抽屉”视图，“抽屉”中横向展示可滚动的多个宝贝的图文视图，于是很自然地想到用UICollectionView来实现。后来这个需求被砍掉了（orz），不过UICollectionView是一个很有意思很灵活的视图，类似Android的GridView，但是比之功能更强大，它可以具体到每一个item的定制，完全取决于UICollectionViewLayout的实现。

answer huang的译文中这样说明UICollectionView：

UITableView和UICollectionView都是由data-source和delegate驱动的。他们为其显示的子视图集扮演为愚蠢的容器(dumb containers)，对他们真实的内容（contents）毫不知情。

UICollectionView进一步抽象了。它将其子视图的位置，大小和外观的控制权委托给一个单独的布局对象。通过提供一个自定义布局对象，你几乎可以实现任何你能想象到的布局。布局继承自UICollectionViewLayout这个抽象基类。iOS6中以UICollectionViewFlowLayout类的形式提出了一个具体的布局实现。

关于UICollectionView，其他的同事已经介绍过啦，可以看这里

我们写一个简单的小demo，效果类似这样



这是最简单的流水布局：UICollectionViewFlowLayout。类如其义，它提供一个流水布局，item（类似UITableView中的cell）会排列在上一个item的右边，如果屏幕空间不够，它会自动排到下一行，和水流一样。

代码如下：

- (UICollectionView *)collectionView
{
if (!_collectionView) {
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
self.currentLayout = layout;
_collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 150, [UIScreen mainScreen].bounds.size.width, 240) collectionViewLayout:layout];
_collectionView.delegate = self;
_collectionView.dataSource = self;
[_collectionView registerClass:[ZQCollectionViewCell class] forCellWithReuseIdentifier:@"cell"];
}

return _collectionView;
}

我们现在想实现一个这样的效果：

当左右拖动item的时候，靠近屏幕中心item放大，远离中心的item缩小
左右滑动的时候，停止下来的item的中心永远和屏幕中心对齐

效果如图：



首先，我们需要自定义UICollectionViewLayout。由于需求效果仍然保持流水特性，我们选择继承UICollectionViewFlowLayout。需要重写的方法如下：

- (void)prepareLayout：该方法是每次布局时一些准备工作，可以在这里做一些初始化的操作，记得调用super实现！

- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds：当布局的边界发送改变的时候，会询问该方法是否重新布局

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect：返回可见的rect中所有的Elements的布局属性（UICollectionViewLayoutAttributes）。在UICollectionViewLayoutAttributes可设置item的size、center、transform等等属性，来精确定制item的位置和形变.UICollectionViewFlowLayout对该方法有一个默认实现，可使item流水式排列。而UICollectionViewLayout则完全是空实现，需要我们自己计算

- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity：当item被滑动自行停止时，我们可以根据这个方法设定item停在我们期望的地方

代码如下：

- (void)prepareLayout
{
[super prepareLayout];
// 每个item的size
self.itemSize = CGSizeMake(ITEM_SIZE, ITEM_SIZE);
// 最小间距
self.minimumLineSpacing = 50;
// 横向滚动
self.scrollDirection = UICollectionViewScrollDirectionHorizontal;
// 内间距
self.sectionInset = UIEdgeInsetsMake(90, (self.collectionView.bounds.size.width - ITEM_SIZE) * 0.5, 40, 150);
}

- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
return YES;
}

- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity
{
// 当前屏幕的rect
CGRect visiableRect = {proposedContentOffset, self.collectionView.bounds.size};
CGFloat currentCenterX = proposedContentOffset.x + self.collectionView.bounds.size.width * 0.5;
// 调用super实现可以获取到当前rect中所有item的布局属性
NSArray *attributesArray = [super layoutAttributesForElementsInRect:visiableRect];
CGFloat adjustDistance = MAXFLOAT;
// 计算距离中心点最近的item,来算偏移量
for (UICollectionViewLayoutAttributes *attributes in attributesArray) {
if (CGRectIntersectsRect(attributes.frame, visiableRect)) {// 在屏幕内
CGFloat x = attributes.center.x;
if (ABS(x - currentCenterX) < ABS(adjustDistance)) {
adjustDistance = x - currentCenterX;
}
}
}

return CGPointMake(proposedContentOffset.x + adjustDistance, proposedContentOffset.y);
}

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
CGRect visiableRect = {self.collectionView.contentOffset, self.collectionView.bounds.size};
CGFloat currentCenterX = self.collectionView.contentOffset.x + self.collectionView.bounds.size.width * 0.5;
NSArray *attributesArray = [super layoutAttributesForElementsInRect:visiableRect];
for (UICollectionViewLayoutAttributes *attributes in attributesArray) {
if (CGRectIntersectsRect(attributes.frame, visiableRect)) {// 在屏幕内
CGFloat itemCenterX = attributes.center.x;
// 设定一个放大的系数，公式大家可以自己来定，效果接近就可以
CGFloat scale = 1 + SCALE_FACTOR * (1 - (ABS(itemCenterX - currentCenterX) / SCALE_BIG_DISTANCE));
attributes.transform3D = CATransform3DMakeScale(scale, scale, 1.0);
}
}
return attributesArray;
}

以上是继承UICollectionViewFlowLayout的布局，如果我们想做一次更深层次的定制，我们可以直接继承UICollectionViewLayout来完全自定义布局，要重写的方法和UICollectionViewFlowLayout类似，只是我们需要自己来实现这些方法：

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect：需要自己新建UICollectionViewLayoutAttributes，也可以通过下面的方法2完成

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath：该方法确定当前indexPath下的item的布局属性

代码如下：

- (void)prepareLayout
{
[super prepareLayout];
}

- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
return YES;
}

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
NSInteger count = [self.collectionView numberOfItemsInSection:0];
NSMutableArray *attributesArray = [NSMutableArray array];
for (NSInteger i = 0; i < count; ++i) {
UICollectionViewLayoutAttributes *attributes = [self layoutAttributesForItemAtIndexPath:[NSIndexPath indexPathForItem:i inSection:0]];
[attributesArray addObject:attributes];
}
return attributesArray;
}

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
NSInteger count = [self.collectionView numberOfItemsInSection:0];
CGPoint currentCenter = CGPointMake(self.collectionView.contentOffset.x + self.collectionView.bounds.size.width * 0.5, self.collectionView.bounds.size.height * 0.5);
UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
attributes.size = CGSizeMake(ITEM_SIZE, ITEM_SIZE);

CGFloat angelDelta = M_PI * 2 / count;
CGFloat angel = M_PI_2 - angelDelta * indexPath.row;
attributes.center = CGPointMake(currentCenter.x + CIRCLE_RADIUS * cosf(angel), currentCenter.y + CIRCLE_RADIUS * sinf(angel));
return attributes;

}

以上可实现一个环形（circle）布局, demo中还添加了点击item就把该item删除的事件



还可以做一个类似蜂巢的布局：

- (CGSize)collectionViewContentSize
{
NSInteger count = [self.collectionView numberOfItemsInSection:0];
return CGSizeMake(0, (count / COL)* count);
}

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

UICollectionView *collection = self.collectionView;

float x = (SIZE + self.margin) * (indexPath.item % COL + 1) * 0.75 + 40;
float y = (SIZE + self.margin) * (indexPath.item / COL + 0.5) * cos(M_PI * 30.0f / 180.0f) + 20;
if (indexPath.item % 2 == 1) {
y += (SIZE + self.margin) * 0.5 * cosf(M_PI * 30.0f / 180.0f);
}

attributes.center = CGPointMake(x + collection.contentOffset.x, y + collection.contentOffset.y);
attributes.size = CGSizeMake(SIZE, SIZE * cos(M_PI * 30.0f / 180.0f));

return attributes;
}

-(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
NSArray *arr = [super layoutAttributesForElementsInRect:rect];
if ([arr count] > 0) {
return arr;
}
NSMutableArray *attributes = [NSMutableArray array];
for (NSInteger i = 0 ; i < [self.collectionView numberOfItemsInSection:0 ]; i++) {
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
[attributes addObject:[self layoutAttributesForItemAtIndexPath:indexPath]];
}
return attributes;
}

其中cell的样式：

- (instancetype)initWithFrame:(CGRect)frame

{

if (self = [super initWithFrame:frame]) {

self.backgroundColor = ZQRandomColor;

CGFloat longSide = SIZE * 0.5 * cosf(M_PI * 30 / 180);

CGFloat shortSide = SIZE * 0.5 * sinf(M_PI * 30 / 180);

UIBezierPath *path = [UIBezierPath bezierPath];

[path moveToPoint:CGPointMake(0, longSide)];

[path addLineToPoint:CGPointMake(shortSide, 0)];

[path addLineToPoint:CGPointMake(shortSide + SIZE * 0.5, 0)];

[path addLineToPoint:CGPointMake(SIZE, longSide)];

[path addLineToPoint:CGPointMake(shortSide + SIZE * 0.5, longSide * 2)];

[path addLineToPoint:CGPointMake(shortSide, longSide * 2)];

[path closePath];

CAShapeLayer *maskLayer = [CAShapeLayer layer];

maskLayer.path = [path CGPath];

self.layer.mask = maskLayer;

}

return self;

}

效果如图：