CollectionView自定义布局
2016-03-13 本文已影响903人
Aeron_Xie
平时我们经常看见的相册，卡片式的堆叠效果，瀑布流，单元格移动等，这些都需要用到自定义布局，当然他们是可以滑动的。首先我们想到的是
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;
}
