平時(shí)我們經(jīng)常看見的相冊(cè)，卡片式的堆疊效果刊头，瀑布流胶果，單元格移動(dòng)等，這些都需要用到自定義布局，當(dāng)然他們是可以滑動(dòng)的。首先我們想到的是
UIScrollView那內(nèi)容如果特別多的話就會(huì)影響到性能問題，如果自己寫循環(huán)利用的話就會(huì)特別麻煩悼凑，所以們就會(huì)用到UICollectionView，系統(tǒng)自帶的只有流布局璧瞬，如果想要特別好看的效果户辫，我們就必須使用自定義布局。
我們先來看下效果：
線性布局
要寫線性布局嗤锉，我們需要先分析下思路渔欢，水平滾動(dòng)我們可以使用 self.scrollDirection = UICollectionViewScrollDirectionHorizontal;
然后我們?cè)趺醋宑ell的大小隨著滑動(dòng)變化呢？
核心就是用cell的中心點(diǎn)減去collectionView最中心點(diǎn)瘟忱，然后再根據(jù)間距的多少來縮放cell
自定義布局需要繼承自 UICollectionViewFlowLayout ,然后我們需要實(shí)現(xiàn)四個(gè)方法
- 用來做布局的初始化操作
- (void)prepareLayout
- 返回的數(shù)組里面存放著rect范圍內(nèi)所有元素的布局屬性
- 這個(gè)方法的返回值決定了rect范圍內(nèi)所有元素的排布（frame）
- 一個(gè)cell對(duì)應(yīng)一個(gè)UICollectionViewLayoutAttributes對(duì)象
-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
- 這個(gè)方法的返回值奥额，就決定了collectionView停止?jié)L動(dòng)時(shí)的偏移量
-(CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity
- 當(dāng)collectionView的顯示范圍發(fā)生改變的時(shí)候，是否需要重新刷新布局
- 一旦重新刷新布局访诱，就會(huì)重新調(diào)用 layoutAttributesForElementsInRect:方法
-(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
- (void)prepareLayout
{
[super prepareLayout];
// 水平滾動(dòng)
self.scrollDirection = UICollectionViewScrollDirectionHorizontal;
// 設(shè)置內(nèi)邊距
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中心點(diǎn)的值
CGFloat centerX = self.collectionView.frame.size.width / 2 + self.collectionView.contentOffset.x;
//一個(gè)個(gè)取出來進(jìn)行更改
for (UICollectionViewLayoutAttributes *atts in attsArray) {
// cell的中心點(diǎn)x 和 collectionView最中心點(diǎn)的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 {
// 計(jì)算出最終顯示的矩形框
CGRect rect;
rect.origin.y = 0;
rect.origin.x = proposedContentOffset.x;//最終要停下來的X
rect.size = self.collectionView.frame.size;
//獲得計(jì)算好的屬性
NSArray *attsArray = [super layoutAttributesForElementsInRect:rect];
//計(jì)算collection中心點(diǎn)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 的中心就是圓心九榔，然后每一個(gè)cell的中心跟圓心的距離就是半徑，根據(jù)一共有多少cell 算出每一個(gè)cell間的角度，根據(jù)角度我們就可以算出cell的centerX 跟 centerY哲泊，有了cell的中點(diǎn)就可以確定位置了
-(void)prepareLayout {
[super prepareLayout];
[self.attrsArray removeAllObjects];
//因?yàn)槭且淮涡跃惋@示在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);
//如果還剩下一個(gè)cell
if (count == 1) {
attrs.center = CGPointMake(circleX, circleY);
attrs.size = CGSizeMake(150, 150);
}else {
CGFloat angle = (2 * M_PI / count) * indexPath.item;//每一個(gè)cell的角度
CGFloat centerX = circleX + radius * sin(angle);
CGFloat centerY = circleY + radius * cos(angle);
attrs.center = CGPointMake(centerX, centerY);
}
return attrs;
}
