平時我們經常看見的相冊，卡片式的堆疊效果，瀑布流，單元格移動等，這些都需要用到自定義布局，當然他們是可以滑動的。首先我們想到的是
UIScrollView那內容如果特別多的話就會影響到性能問題，如果自己寫循環利用的話就會特別麻煩，所以們就會用到UICollectionView，系統自帶的只有流布局，如果想要特別好看的效果，我們就必須使用自定義布局。
我們先來看下效果：
線性布局
要寫線性布局，我們需要先分析下思路，水平滾動我們可以使用 self.scrollDirection = UICollectionViewScrollDirectionHorizontal;
然后我們怎么讓cell的大小隨著滑動變化呢？
核心就是用cell的中心點減去collectionView最中心點，然后再根據間距的多少來縮放cell
自定義布局需要繼承自 UICollectionViewFlowLayout ,然后我們需要實現四個方法
- 用來做布局的初始化操作
- (void)prepareLayout
- 返回的數組里面存放著rect范圍內所有元素的布局屬性
- 這個方法的返回值決定了rect范圍內所有元素的排布（frame）
- 一個cell對應一個UICollectionViewLayoutAttributes對象
-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
- 這個方法的返回值，就決定了collectionView停止滾動時的偏移量
-(CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity
- 當collectionView的顯示范圍發生改變的時候，是否需要重新刷新布局
- 一旦重新刷新布局，就會重新調用 layoutAttributesForElementsInRect:方法
-(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
- (void)prepareLayout
{
[super prepareLayout];
// 水平滾動
self.scrollDirection = UICollectionViewScrollDirectionHorizontal;
// 設置內邊距
CGFloat inset = (self.collectionView.frame.size.width - self.itemSize.width) * 0.5;
self.sectionInset = UIEdgeInsetsMake(0, inset, 0, inset);
}
-(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds {
return YES;
}
-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {
//取出父類算出的布局屬性
NSArray *attsArray = [super layoutAttributesForElementsInRect:rect];
//collectionView中心點的值
CGFloat centerX = self.collectionView.frame.size.width / 2 + self.collectionView.contentOffset.x;
//一個個取出來進行更改
for (UICollectionViewLayoutAttributes *atts in attsArray) {
// cell的中心點x 和 collectionView最中心點的x值 的間距
CGFloat space = ABS(atts.center.x - centerX);
CGFloat scale = 1 - space/self.collectionView.frame.size.width;
atts.transform = CGAffineTransformMakeScale(scale, scale);
}
return attsArray;
}
-(CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity {
// 計算出最終顯示的矩形框
CGRect rect;
rect.origin.y = 0;
rect.origin.x = proposedContentOffset.x;//最終要停下來的X
rect.size = self.collectionView.frame.size;
//獲得計算好的屬性
NSArray *attsArray = [super layoutAttributesForElementsInRect:rect];
//計算collection中心點X
CGFloat centerX = proposedContentOffset.x + self.collectionView.frame.size.width / 2;
CGFloat minSpace = MAXFLOAT;
for (UICollectionViewLayoutAttributes *attrs in attsArray) {
if (ABS(minSpace) > ABS(attrs.center.x - centerX)) {
minSpace = attrs.center.x - centerX;
}
}
// 修改原有的偏移量
proposedContentOffset.x += minSpace;
return proposedContentOffset;
}
圓形布局
不是線性，我們就不能繼承 UICollectionViewFlowLayout了，我們需要繼承 UICollectionViewLayout
核心就是用圓，collectionView 的中心就是圓心，然后每一個cell的中心跟圓心的距離就是半徑，根據一共有多少cell 算出每一個cell間的角度，根據角度我們就可以算出cell的centerX 跟 centerY，有了cell的中點就可以確定位置了
-(void)prepareLayout {
[super prepareLayout];
[self.attrsArray removeAllObjects];
//因為是一次性就顯示在view上，所以可以一次性初始化
//collection一共有多少item
NSInteger count = [self.collectionView numberOfItemsInSection:0];
for (NSInteger i=0; i<count; i++) {
//自己寫布局屬性
UICollectionViewLayoutAttributes *attrs = [self layoutAttributesForItemAtIndexPath:[NSIndexPath indexPathForItem:i inSection:0]];
[self.attrsArray addObject:attrs];
}
}
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {
return self.attrsArray;
}
-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {
NSInteger count = [self.collectionView numberOfItemsInSection:0];
CGFloat radius = 120;
//圓心
CGFloat circleX = self.collectionView.frame.size.width / 2;
CGFloat circleY = self.collectionView.frame.size.height / 2;
UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
attrs.size = CGSizeMake(60, 60);
//如果還剩下一個cell
if (count == 1) {
attrs.center = CGPointMake(circleX, circleY);
attrs.size = CGSizeMake(150, 150);
}else {
CGFloat angle = (2 * M_PI / count) * indexPath.item;//每一個cell的角度
CGFloat centerX = circleX + radius * sin(angle);
CGFloat centerY = circleY + radius * cos(angle);
attrs.center = CGPointMake(centerX, centerY);
}
return attrs;
}
