很多时候系统的东西是远远满足不了我们项目的需求的，今天要给大家分享的是项目中经常遇到的有关于自定义UICollectionViewFlowLayout问题，例如瀑布流，流水布局等等系统控件所不能实现的效果。
一、效果图
1、流水布局
2、瀑布流
二、实现思路
1、流水布局
A、确定cell不在首尾时保持cell居中: 通过获取cell中心距离屏幕中心 （collectionView.contentOffset.x + 屏幕宽度*0.5）最小的距离，然后去改变对应cell的proposedContentOffset，使其在没有滚动超过一定距离（上述cell中心与屏幕中心的距离）时让对应cell的proposedContentOffset始终保持在屏幕中间。
B、通过layoutAttributesForElementsInRect：去设置每个cell在滚动过程中的布局
注：当你是继承UICollectionViewFlowLayout实现自定义时想要时刻刷新布局，还需要实现shouldInvalidateLayoutForBoundsChange：方法并返回YES，当你继承UICollectionViewLayout则不需要。
2、瀑布流
A、使用columnHeights数组（有多少列就有多少个元素）记录cell每次更新布局后对应列的高度
B、通过比较columnHeights数组中记录的高度来获取高度最小的那一列，然后计算cell的x值来确定cell的布局
C、实现collectionViewContentSize并返回columnHeights数组中记录的最大值（此处不实现则不能滚动）
三、下面上代码（只讲实现思路，不讲封装故.h文件无提供任何属性及接口，此处忽略）
1、Horizontal3DLayout.m（流水布局）
// 初始化
- (void)prepareLayout
{
[super prepareLayout];
self.itemSize = CGSizeMake(260, 165);
self.scrollDirection = UICollectionViewScrollDirectionHorizontal;
self.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);
self.minimumLineSpacing = -10;
}
// 重写此方法重新定位最后滚动的位置
- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity
{
// 计算出最终显示的矩形框
CGRect rect;
rect.origin.y = 0;
rect.origin.x = proposedContentOffset.x;
rect.size = self.collectionView.frame.size;
// 获得super已经计算好的布局属性
NSArray *array = [super layoutAttributesForElementsInRect:rect];
// 计算collectionView最中心点的x值
CGFloat centerX = proposedContentOffset.x + self.collectionView.frame.size.width * 0.5;
// 存放最小的间距值
CGFloat minDelta = MAXFLOAT;
for (UICollectionViewLayoutAttributes *attrs in array) {
if (ABS(minDelta) > ABS(attrs.center.x - centerX)) {
minDelta = attrs.center.x - centerX;
}
}
// 修改原有的偏移量
proposedContentOffset.x += minDelta;
return proposedContentOffset;
}
// 返回所有布局
-(NSArray*)layoutAttributesForElementsInRect:(CGRect)rect
{
NSArray* attributes = [super layoutAttributesForElementsInRect:rect];
CGFloat collectionViewCenterX = self.collectionView.bounds.size.width*0.5;
CGFloat scaleDistance = collectionViewCenterX - 20;
for (UICollectionViewLayoutAttributes *attrs in attributes) {
// 当前cell中心相对屏幕左边的距离
CGFloat leftDistance = attrs.center.x - self.collectionView.contentOffset.x;
// cell中心与屏幕中心的距离
CGFloat middleDistance = 0;
if (leftDistance - collectionViewCenterX == 0) {
middleDistance = 0;
}else if (ABS(leftDistance - collectionViewCenterX) < collectionViewCenterX) {
if (leftDistance < collectionViewCenterX) {
// 左边
middleDistance = collectionViewCenterX - leftDistance;
}else if (leftDistance > collectionViewCenterX){
// 右边
middleDistance = leftDistance - collectionViewCenterX;
}
if (middleDistance > scaleDistance) {
// 超出屏幕
middleDistance = scaleDistance;
}
}else if (ABS(leftDistance - collectionViewCenterX) > collectionViewCenterX) {
// 超出屏幕
middleDistance = scaleDistance;
}
CGFloat scale = 0;
if (middleDistance == 0) {
scale = 1.0;
}else{
scale = 0.8 + ((1- middleDistance/scaleDistance) * 0.2);
}
attrs.transform = CGAffineTransformMakeScale(scale, scale);
}
return attributes;
}
// 继承UICollectionViewFlowLayout 需要布局时刻变动需必须实现这个方法，UICollectionViewLayout则不需要
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
return YES;
}
2、WaterFallsFlowLayout.m（瀑布流）
#import "WaterFallsFlowLayout.h"
// 默认列数
static const NSInteger WaterFallsColumnCount = 3;
// 默认列间距
static const NSInteger WaterFallsColumnMargin = 10;
// 默认行间距
static const NSInteger WaterFallsRowMargin = 10;
// more四周间距
static const UIEdgeInsets WaterFallsEdgeInsets = {10,10,10,10};
@interface WaterFallsFlowLayout ()
@property (nonatomic, strong) NSMutableArray *allAttributes;
@property (nonatomic, strong) NSMutableArray *columnHeights;
@end
// 初始化
- (void)prepareLayout
{
[super prepareLayout];
// 清除高度
[self.columnHeights removeAllObjects];
for (int i = 0; i < WaterFallsColumnCount; i++) {
[self.columnHeights addObject:@(WaterFallsEdgeInsets.top)];
}
// 清除布局
[self.allAttributes removeAllObjects];
NSInteger count = [self.collectionView numberOfItemsInSection:0];
for (int i = 0; i < count; i++) {
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
UICollectionViewLayoutAttributes *attributes = [self layoutAttributesForItemAtIndexPath:indexPath];
[self.allAttributes addObject:attributes];
}
}
// 返回所有布局
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
{
return self.allAttributes;
}
// 每个cell对应的布局
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewLayoutAttributes *layoutAttributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
CGFloat collectionViewWidth = self.collectionView.bounds.size.width;
CGFloat width = (collectionViewWidth - WaterFallsColumnMargin*(WaterFallsColumnCount-1) - WaterFallsEdgeInsets.left - WaterFallsEdgeInsets.right) / WaterFallsColumnCount;
// 随机高度，实际请根据项目自行处理
CGFloat height = 40 + arc4random() % (120 - 40 + 1);
CGFloat x = 0;
CGFloat y = 0;
// 设高度最短的一列为第一列
CGFloat minHeight = [self.columnHeights[0] doubleValue];
// 最矮的一列
NSInteger minHeightColumnIndex = 0;
for (int i = 0; i < self.columnHeights.count; i++) {
CGFloat height = [self.columnHeights[i] floatValue];
if (height < minHeight) {
minHeight = height;
minHeightColumnIndex = i;
}
}
x = WaterFallsEdgeInsets.left + (WaterFallsColumnMargin + width) * minHeightColumnIndex;
y = minHeight ;
if (y != WaterFallsEdgeInsets.top) {
y += WaterFallsRowMargin;
}
layoutAttributes.frame = CGRectMake(x, y, width, height);
// 更新高度最小列的高度
self.columnHeights[minHeightColumnIndex] = @(CGRectGetMaxY(layoutAttributes.frame));
return layoutAttributes;
}
// 需实现此防范并返回内容高度collectionView才能滚动
- (CGSize)collectionViewContentSize
{
CGFloat maxColumnHeight = [self.columnHeights[0] doubleValue];
for (NSInteger i = 1; i < WaterFallsColumnCount; i++) {
// 取得第i列的高度
CGFloat columnHeight = [self.columnHeights[i] doubleValue];
if (maxColumnHeight < columnHeight) {
maxColumnHeight = columnHeight;
}
}
return CGSizeMake(0, maxColumnHeight + WaterFallsEdgeInsets.bottom);
}
// Get/Set
- (NSMutableArray *)allAttributes
{
if (!_allAttributes) {
_allAttributes = [NSMutableArray array];
}
return _allAttributes;
}
- (NSMutableArray *)columnHeights
{
if (!_columnHeights) {
_columnHeights = [NSMutableArray array];
}
return _columnHeights;
}
