所有布局效果均写在一个自定义继承自UICollectionViewLayout的布局对象中。
布局代码写在-(NSArray*)layoutAttributesForElementsInRect:(CGRect)rect{}中
第一种：笛卡尔曲线（心型线）布局，笛卡尔曲线的周期为2*M_PI,所以能够显示的单元格的数量和大小有限,核心代码
-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect{
//取出单元格数量，这个数量是在collectionView的datasource方法中自己定义
NSInteger count = [self.collectionView numberOfItemsInSection:0];
//用以保存布局属性的可变数组
NSMutableArray *ArrayM = [NSMutableArray array];
//每个单元格的角度偏移量
CGFloat angle = 2 * M_PI / count;
//每个单元格大小
CGFloat itemWH = 10;
//布局结束一个单元格之后的角度
CGFloat endAngle = 0;
//定义
CGPoint center = CGPointMake(self.collectionView.frame.size.width/2,
self.collectionView.frame.size.height/2);
//笛卡尔曲线
for (int i = 0; i<count; i++) {
//半径
CGFloat radius = 50;
//笛卡尔曲线参数方程,其中2这个常量是作者随意定的，改变可以使曲线发散或者聚集
CGFloat itemX = center.x-radius*(2*sin(endAngle)-sin(2*endAngle));
CGFloat itemY = center.y-radius*(2*cos(endAngle)-cos(2*endAngle));
NSIndexPath *indexPath = [NSIndexPath indexPathForRow:i inSection:0];
UICollectionViewLayoutAttributes *attribute = [UICollectionViewLayoutAttributes
layoutAttributesForCellWithIndexPath:indexPath];
attribute.bounds = CGRectMake(0, 0, itemWH, itemWH);
attribute.center = CGPointMake(itemX, itemY);
[ArrayM addObject:attribute];
endAngle += angle;
}
return ArrayM;
}
运行效果：
Snip20161223_2.png
读者可根据实际需求改变各个参数
第二种曲线:阿基米德曲线（螺型线）：由于阿基米德是发散型曲线，所以阿基米德曲线可以显示的单元格数量和位置不受周期的影响，核心代码：
-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect{
//取出单元格数量，这个数量是在collectionView的datasource方法中自己定义
NSInteger count = [self.collectionView numberOfItemsInSection:0];
//用以保存布局属性的可变数组
NSMutableArray *ArrayM = [NSMutableArray array];
//布局结束一个单元格之后的角度
CGFloat endAngle = 0;
CGFloat Aangle = 6 * M_PI /count;
CGFloat AitemWH = 10;
//定义
CGPoint center = CGPointMake(self.collectionView.frame.size.width/2, self.collectionView.frame.size.height/2);
// 阿基米德曲线
for (int i = 0; i < count; i++) {
//半径随着角度变大而变大，给用户可以展现出一种3D效果
CGFloat radius = 10*(1 + endAngle);
//阿基米德曲线的参数方程
CGFloat itemX =center.x - radius*cos(endAngle);
CGFloat itemY =center.y - radius*sin(endAngle);
NSIndexPath *indexPath = [NSIndexPath indexPathForRow:i inSection:0];
UICollectionViewLayoutAttributes *attribute = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
attribute.bounds = CGRectMake(0, 0, AitemWH, AitemWH);
attribute.center = CGPointMake(itemX, itemY);
[ArrayM addObject:attribute];
endAngle += Aangle;
AitemWH += 0.5;
}
return ArrayM;
}
展示效果
Snip20161223_3.png
阿基米德曲线布局在ipad开发中的优势会更佳明显
