基于两种著名数学曲线的CollectionView布局

所有布局效果均写在一个自定义继承自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开发中的优势会更佳明显