iOS CollectionView FlowLayout与风火

UICollectionView自定义布局实现风火轮(Ray wenderlich上的教程

具体过程请看 Ray Wenderlich上的教程，网上也能找到其他开发者翻译。这里只记录几个我觉得比较重要的

对于自定义布局，最主要的有三个函数：

自定义布局关键过程.png

- (void)prepareLayout

用于排列cell前，计算各个cell位置信息，避免将cell加到 collectionview 上时临时计算：

• 在collectionview第一次展现内容时调用
• 布局更新时，调用此函数来准备好下一次的布局

- (CGSize)collectionViewContentSize

collectionView可滑动的区间

- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect

返回一个可视rect范围内被显示cell的UICollectionViewLayoutAttributes

UICollectionViewLayoutAttributes类管理了布局相关的属性，如cell的frame、transform、bounds、zIndex、center等。它们的定义与用法与UIView中各自属性一致。

环形布局

环形布局最重要的一点就是，让所有cell围绕一个点转起来。

关于view的旋转，可以设定transform，让view旋转一定的角度。但是这样，所有的view都是绕其center旋转，不能达到我们的效果。

我们也可以设定anchorPoint，因为所有关于view的几何运算都与其有关。关于anchorPoint，看这篇文章

关于anchorPoint DEMO

anchorPoint Demo.png

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var anchorPointView: UIView!
    var viewArray : [UIView] = []
    var isMoved = true
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        let tapGesture = UITapGestureRecognizer(target: self, action: "tap")
        self.view.addGestureRecognizer(tapGesture)
    }
    
    override func viewDidAppear(animated: Bool) {
        super.viewDidAppear(animated)
        for i in (1...5) {
            let eView = UIView(frame: self.anchorPointView.frame)
            eView.backgroundColor = UIColor.blueColor()
            viewArray.append(eView)
            self.view.addSubview(eView)
        }
 
    }
    
    func tap() {
            //修改anchorPoint
            self.anchorPointView.layer.anchorPoint = CGPointMake(0.5, 0.5 + 3.0)
            //旋转
            anchorPointView.transform = CGAffineTransformMakeRotation(CGFloat(M_PI / 10) * 0)
            //修正view的位置
            //因为修改了anchorPoint，而position不变，从而导致view上移300个点(anchorPointView 宽高都为100)
            //300根据 (高100)*(anchorPoint在y上增加值3)
            var center = self.anchorPointView.center
            center.y += 300
            self.anchorPointView.center = center
            var i = 1.0
            for view in viewArray {
                view.layer.anchorPoint = CGPointMake(0.5, 0.5 + 3.0)
                view.transform = CGAffineTransformMakeRotation(CGFloat(M_PI / 10 * i))
                i += 1.0 * 1
                var center = view.center
                center.y += 300
                view.center = center
            }
            
    }
}

自定义UICollectionViewLayoutAttributes

根据上面环形布局，想要让cell环形排列，必须知道cell的anchorPoint与 旋转角度angle。

旋转角度angle对应 UICollectionViewLayoutAttributes 的 transform，而anchorPoint作为一个CALayer的属性，在UICollectionViewLayoutAttributes没有对应的属性，但这里需要让cell知道自己的anchorPoint，才能让其正确旋转。这里就需要自定义UICollectionViewLayoutAttributes。

使用自定义子类，与使用UICollectionViewLayoutAttributes相比，你需要增加一些代码。

1. 在自定义布局的相关实现中：

• (Class)layoutAttributesClass {
  //返回自定义UICollectionViewLayoutAttributes子类
  return [CircularCollectionViewLayoutAttributes class];
  }

这样每当需要生成一个新的LayoutAttributes object时就会调用此函数

2.  在需要显示的 UICollectionViewCell的实现中

• (void)applyLayoutAttributes:(UICollectionViewLayoutAttributes *)layoutAttributes {

  [super applyLayoutAttributes:layoutAttributes];
  if ([layoutAttributes isKindOfClass:[CircularCollectionViewLayoutAttributes class]]) {
  CircularCollectionViewLayoutAttributes *attributes = (CircularCollectionViewLayoutAttributes *)layoutAttributes;

  CGPoint centerPoint = self.center;
  
  self.layer.anchorPoint = attributes.anchorPoint;
  
  centerPoint.y += self.selected? (attributes.anchorPoint.y - 0.5) * CGRectGetHeight(self.bounds) - 50: (attributes.anchorPoint.y - 0.5) * CGRectGetHeight(self.bounds);
  self.center = centerPoint;
  

  }
  }

这样新增加的UICollectionViewLayoutAttributes属性，才有机会作用在cell上

###布局核心过程代码

• (void)prepareLayout {

  [super prepareLayout];

  CGFloat centerX = self.collectionView.contentOffset.x + CGRectGetWidth(self.collectionView.bounds) / 2.0;
  CGFloat anchorPointY = ((_itemSize.height / 2) + _radius ) / _itemSize.height;

  int startIndex = 0;
  int endIndex = (int)[self itemCount] - 1;
  // CGFloat theta = atan2(CGRectGetWidth(self.collectionView.bounds) / 2.0,
  // _radius + (_itemSize.height / 2.0) - CGRectGetHeight(self.collectionView.bounds) / 2.0);
  // if ([self angle] < -theta) {
  //
  // startIndex = (int)(floor( (-[self angle] - theta) / [self anglePerItem]));
  //
  // }
  //
  // endIndex = MIN(endIndex, (int)ceil((-[self angle] + theta) / [self anglePerItem]) );
  //
  // if (endIndex < startIndex) {
  //
  // startIndex = 0;
  // endIndex = 0;
  //
  // }

  for (int i = startIndex; i <= endIndex; i++) {

    CircularCollectionViewLayoutAttributes *attribute = [CircularCollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:[NSIndexPath indexPathForItem:i inSection:0]];
    attribute.size = _itemSize;
    attribute.center = CGPointMake(centerX, CGRectGetMidY(self.collectionView.bounds));
    attribute.anchorPoint = CGPointMake(0.5, anchorPointY);
    attribute.angle = [self angle] + [self anglePerItem]*i;
    [_layoutAttributes addObject:attribute];
  

  }

}

• (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {
  //返回prepareLayout计算好的布局
  return _layoutAttributes;

}

• (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {

//
return _layoutAttributes[indexPath.row];

}

• (CGSize)collectionViewContentSize {

  return CGSizeMake([self.collectionView numberOfItemsInSection:0] * _itemSize.width, CGRectGetHeight(self.collectionView.bounds));
  }

• (Class)layoutAttributesClass {

  return [CircularCollectionViewLayoutAttributes class];
  }

• (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds {
  //每次滑动，都触发新的布局
  return true;
  }