自定義UICollectionViewFlowLayout

很多時候系統的東西是遠遠滿足不了我們項目的需求的，今天要給大家分享的是項目中經常遇到的有關于自定義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;
}
結語： 開始養成好習慣，不間斷更新文章，為自己，加油！！！
有什么問題或者建議或者更好的思路，歡迎留言探討，謝謝！！！
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容