ios讓你簡單實現瀑布流

以下是方法實現的代碼

#import <UIKit/UIKit.h>

@interface XMFWaterFall : UICollectionViewLayout

//  一行的列數
@property (nonatomic, assign) NSUInteger colCount;

//  collection內邊距
@property (nonatomic, assign) UIEdgeInsets edgeInsets;

//  cell的間距
@property (nonatomic, assign) CGFloat space;

//  item寬
@property (nonatomic, assign) CGFloat itemWidth;

//  高度
@property (nonatomic, copy) CGFloat (^heightAction) (NSIndexPath *indexPath);

@end

#import "XMFWaterFall.h"

@interface XMFWaterFall ()

@property (nonatomic, strong) NSMutableArray<UICollectionViewLayoutAttributes *> *attributes;

@end

@implementation XMFWaterFall

//  第一步
- (void)prepareLayout {
    [super prepareLayout];
    
    NSUInteger totalCellNum = [self.collectionView numberOfItemsInSection:0];
    
    _attributes = [NSMutableArray<UICollectionViewLayoutAttributes *> arrayWithCapacity: totalCellNum];
    NSIndexPath *indexPath;
    for (int i = 0; i < totalCellNum; i++) {
        indexPath = [NSIndexPath indexPathForItem:i inSection:0];
        [_attributes addObject: [self layoutAttributesForItemAtIndexPath:indexPath]];
    }

}

//  第二步
- (CGSize)collectionViewContentSize {
    CGFloat totalCellWidth = _edgeInsets.left + _edgeInsets.right + (_colCount - 1) * _space +_colCount * _itemWidth;
    return CGSizeMake(totalCellWidth, [self getMaxY] + _edgeInsets.bottom);
}

//  第三步
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {
    
    UICollectionViewLayoutAttributes *attributes    =   [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
    NSUInteger currentColum                         =   indexPath.row % _colCount;
    CGFloat cellX                                   =   _edgeInsets.left + currentColum * (_itemWidth + _space); //  cell的x
    //  cell的y
    CGFloat cellY;
    if (indexPath.row + 1 > _colCount) {
        cellY = CGRectGetMaxY(_attributes[indexPath.row - _colCount].frame) + _space;
    }
    else
        cellY = _edgeInsets.top;
    
    //  cell的高
    CGFloat cellH = 0.0;
    if (_heightAction) {
        cellH = _heightAction(indexPath);
    }
    
    attributes.frame = CGRectMake(cellX, cellY, _itemWidth, cellH);
    
    return attributes;
}

//  第三步
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {    
    return _attributes;
}

/**
 *  獲得最大y值
 */
- (CGFloat)getMaxY {
    NSUInteger totalCellNum = [self.collectionView numberOfItemsInSection:0];
    NSInteger lastLenght    = totalCellNum % _colCount;
    if (lastLenght == 0) lastLenght = _colCount;
    __block CGFloat tempY = 0.0;
    NSIndexSet *indexSet  = [NSIndexSet indexSetWithIndexesInRange: NSMakeRange(_attributes.count - lastLenght, lastLenght)];
    [_attributes enumerateObjectsAtIndexes:indexSet options:NSEnumerationConcurrent usingBlock:^(UICollectionViewLayoutAttributes * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
        tempY     = MAX(tempY, CGRectGetMaxY(obj.frame));
    }];
    
    return tempY;
}

@end

這是一種簡單實現瀑布流的方法,註釋不多,如有不懂可以在QQ羣 389400205上問我

以下是我的github可以在此下載代碼點擊打開鏈接

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章