所有布局效果均寫在一個自定義繼承自UICollectionViewLayout的布局對象中睹簇。
布局代碼寫在-(NSArray*)layoutAttributesForElementsInRect:(CGRect)rect{}中
第一種：笛卡爾曲線（心型線）布局，笛卡爾曲線的周期為2*M_PI,所以能夠顯示的單元格的數(shù)量和大小有限,核心代碼
-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect{
//取出單元格數(shù)量凡壤，這個數(shù)量是在collectionView的datasource方法中自己定義
NSInteger count = [self.collectionView numberOfItemsInSection:0];
//用以保存布局屬性的可變數(shù)組
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;
//笛卡爾曲線參數(shù)方程,其中2這個常量是作者隨意定的蛋辈，改變可以使曲線發(fā)散或者聚集
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
讀者可根據(jù)實際需求改變各個參數(shù)
第二種曲線:阿基米德曲線（螺型線）：由于阿基米德是發(fā)散型曲線宗收，所以阿基米德曲線可以顯示的單元格數(shù)量和位置不受周期的影響朋凉，核心代碼：
-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect{
//取出單元格數(shù)量萧芙，這個數(shù)量是在collectionView的datasource方法中自己定義
NSInteger count = [self.collectionView numberOfItemsInSection:0];
//用以保存布局屬性的可變數(shù)組
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++) {
//半徑隨著角度變大而變大并淋，給用戶可以展現(xiàn)出一種3D效果
CGFloat radius = 10*(1 + endAngle);
//阿基米德曲線的參數(shù)方程
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開發(fā)中的優(yōu)勢會更佳明顯
