[个人博客搬运]定制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

这是最简单的流水布局：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的中心永远和屏幕中心对齐

效果如图：
linear

首先，我们需要自定义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删除的事件
circel

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

• (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;

}

效果如图：
honeycomb