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;
}
