CollectionView-简单的布局:圆形布局

1.对于圆形布局的设置:

Snip20150904_1.png

1.1 不同于流水布局,因为流水布局的界面 只有水平方向上的布置以及竖直方向上的布置两种.
1.2 新的布局 为圆形布局,是所有的图片围成一圈的排列.所以新的布局不能继续继承于流水布局,而属于自己去安排布局,继承于他的基类 UICollectionViewLayout.

2.和水平缩放布局很像,对于布局元素 应该在- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect此方法中安排显示的布局集合.
3.重写- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds使布局因素能够实时更新

Snip20150904_2.png

代码如下:

// 确保能实时更新布局
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
    return YES;
}
// 进行圆形布局,设置其每个元素的相关因素(主要是它的 frame,中心点)
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
// 创建可变数组,用于储存所有的布局因素
    NSMutableArray *layoutAtts = [NSMutableArray array];   
// 取出对应布局中的 collectionView 的元素的数目(为的就是给一个个cell 独立设置其的布局)
    NSInteger count =  [self.collectionView numberOfItemsInSection:0];
// 设置每个 cell 的高度和宽度
    CGFloat WH = 50;
// 取出圆形视图的中心点 (也就是 collectionView 的中心点)    
CGFloat centerX = self.collectionView.frame.size.width * 0.5;
    CGFloat centerY = self.collectionView.frame.size.height * 0.5; 
// 设置 圆形布局半径   
    CGFloat randius = centerY- 30;   
// 获得每个 cell 之间的间距 (所有 cell 平分了整个圆) 
    CGFloat angelMargin = M_PI * 2 / count;   
// 遍历进行设置布局  
  for (int i = 0; i < count ; i ++) {       
        NSIndexPath *indexPath = [NSIndexPath indexPathForRow:i inSection:0];
// 创建对应索引的布局
        UICollectionViewLayoutAttributes *layoutAtt = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
// 根据三角函数设置布局的中心点
        CGFloat a = sin(i * angelMargin) * randius;
        CGFloat b = cos(i * angelMargin) * randius;
        layoutAtt.center = CGPointMake(centerX + a, b+ centerY);
        layoutAtt.size = CGSizeMake(WH, WH);   
        [layoutAtts addObject:layoutAtt];
    }
    return layoutAtts;
}