collectionView布局原理及瀑布流布局方式

　　一直以來都想研究瀑布流的具體實現方法(起因是因為一則男女程序員應聘的笑話，做程序的朋友應該都知道)。最近學習到了瀑布流的實現方法，瀑布流的實現方式有多種，這里應用collectionView來重寫其UICollectionViewLayout進行布局是最為簡單方便的。但再用其布局之前必須了解其布局原理。為方便大家學習理解此處補上demo地址https://github.com/PurpleSweetPotatoes/CollcetionViewLayout_demo

　　在這里筆者挑出其中較為重要的幾個方法來進行講解。

1.- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds 當collectionView視圖位置有新改變(發生移動)時調用，其若返回YES則重新布局

2.- (void)prepareLayout 准備好布局時調用。此時collectionView所有屬性都已確定。讀者在這里可以將collectionView當做畫布，有了畫布后，我們便可以在其上面畫出每個item

3.- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect 返回collectionView視圖中所有視圖的屬性(UICollectionViewLayoutAttributes)數組

4.- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath 返回indexPath對應item的屬性

5.- (CGSize)collectionViewContentSize 設置collectionView的可顯示范圍

這些方法中最重要的便是3，4方法，在3方法中返回所有視圖屬性數組，並根據這些屬性進行布局，而4方法則返回每個item的屬性，我們則在這里設置每個item的屬性(主要是frame)，就可以讓collectionView按照我們的意願進行布局了!(在這里我們不需要用到1方法，若item屬性根據滑動改變，此時就需要隨時進行布局改變)

　　瀑布流的實現示意圖如下

由圖示意可看出除開最開始3個item，后面的item都是存放3列中的最短列上面，因此我們只需要計算出每個item的frame，並擺放的話那我們的瀑布流自然就成功了。

.h文件中

 

typedef CGFloat(^HeightBlock)(NSIndexPath *indexPath , CGFloat width);
@interface BQWaterLayout : UICollectionViewLayout
/** 列數 */
@property (nonatomic, assign) NSInteger lineNumber;
/** 行間距 */
@property (nonatomic, assign) CGFloat rowSpacing;
/** 列間距 */
@property (nonatomic, assign) CGFloat lineSpacing;
/** 內邊距 */
@property (nonatomic, assign) UIEdgeInsets sectionInset;
/**
 *  計算各個item高度方法 必須實現
 *
 *  @param block 設計計算item高度的block
 */
- (void)computeIndexCellHeightWithWidthBlock:(CGFloat(^)(NSIndexPath *indexPath , CGFloat width))block;
@end

 

為了方便修改瀑布流的布局我們需要設置排列布局的各個接口，因為瀑布流中只能通過列數計算出item的寬，因此需要使用computeIndexCellHeightWithWidthBlock來計算出每個item的高度(利用寬高比)!

.m文件中 

　　代碼中注釋已經寫的很明白了，無需多做解釋，此處寫法只能實現item的布局，不能添加headview或footview!

 

 

@interface BQWaterLayout()
/** 存放每列高度字典*/
@property (nonatomic, strong) NSMutableDictionary *dicOfheight;
/** 存放所有item的attrubutes屬性*/
@property (nonatomic, strong) NSMutableArray *array;
/** 計算每個item高度的block，必須實現*/
@property (nonatomic, copy) HeightBlock block;
@end

@implementation BQWaterLayout
- (instancetype)init
{
    self = [super init];
    if (self) {
        //對默認屬性進行設置
        /** 
         默認行數 3行
         默認行間距 10.0f
         默認列間距 10.0f
         默認內邊距 top:10 left:10 bottom:10 right:10
         */
        self.lineNumber = 3;
        self.rowSpacing = 10.0f;
        self.lineSpacing = 10.0f;
        self.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);
        _dicOfheight = [NSMutableDictionary dictionary];
        _array = [NSMutableArray array];
    }
    return self;
}

/**
 *  准備好布局時調用
 */
- (void)prepareLayout{
    [super prepareLayout];
    NSInteger count = [self.collectionView numberOfItemsInSection:0];
    //初始化好每列的高度
    for (NSInteger i = 0; i < self.lineNumber ; i++) {
        [_dicOfheight setObject:@(self.sectionInset.top) forKey:[NSString stringWithFormat:@"%ld",i]];
    }
    //得到每個item的屬性值進行存儲
    for (NSInteger i = 0 ; i < count; i ++) {
        NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
        [_array addObject:[self layoutAttributesForItemAtIndexPath:indexPath]];
    }
}
/**
 *  設置可滾動區域范圍
 */
- (CGSize)collectionViewContentSize{
    NSLog(@"collectionViewContentSize");
    __block NSString *maxHeightline = @"0";
    [_dicOfheight enumerateKeysAndObjectsUsingBlock:^(NSString *key, NSNumber *obj, BOOL *stop) {
        if ([_dicOfheight[maxHeightline] floatValue] < [obj floatValue] ) {
            maxHeightline = key;
        }
    }];
    return CGSizeMake(self.collectionView.bounds.size.width, [_dicOfheight[maxHeightline] floatValue] + self.sectionInset.bottom);
}
/**
 *  計算indexPath下item的屬性的方法
 *
 *  @return item的屬性
 */
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath{
    //通過indexPath創建一個item屬性attr
    UICollectionViewLayoutAttributes *attr = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
    //計算item寬
    CGFloat itemW = (self.collectionView.bounds.size.width - (self.sectionInset.left + self.sectionInset.right) - (self.lineNumber - 1) * self.lineSpacing) / self.lineNumber;
    CGFloat itemH;
    //計算item高
    if (self.block != nil) {
        itemH = self.block(indexPath, itemW);
    }else{
        NSAssert(itemH != 0,@"Please implement computeIndexCellHeightWithWidthBlock Method");
    }
    //計算item的frame
    CGRect frame;
    frame.size = CGSizeMake(itemW, itemH);
    //循環遍歷找出高度最短行
    __block NSString *lineMinHeight = @"0";
    [_dicOfheight enumerateKeysAndObjectsUsingBlock:^(NSString *key, NSNumber *obj, BOOL *stop) {
        if ([_dicOfheight[lineMinHeight] floatValue] > [obj floatValue]) {
            lineMinHeight = key;
        }
    }];
    int line = [lineMinHeight intValue];
    //找出最短行后，計算item位置
    frame.origin = CGPointMake(self.sectionInset.left + line * (itemW + self.lineSpacing), [_dicOfheight[lineMinHeight] floatValue]);
    _dicOfheight[lineMinHeight] = @(frame.size.height + self.rowSpacing + [_dicOfheight[lineMinHeight] floatValue]);
    attr.frame = frame;
    
    return attr;
}
/**
 *  返回視圖框內item的屬性，可以直接返回所有item屬性
 */
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect{
    return _array;
}
/**
 *  設置計算高度block方法
 *
 *  @param block 計算item高度的block
 */
- (void)computeIndexCellHeightWithWidthBlock:(CGFloat (^)(NSIndexPath *, CGFloat))block{
    if (self.block != block) {
        self.block = block;
    }
}
@end

 

至此一個簡單的collectionViewLayout瀑布流布局便設置完成，只需要在自己代碼中使用此布局便可以得到一個瀑布流了!

　　下圖是筆者的效果圖:

　　         

　　　　　　2列效果　　　　　　　　　　　　　　3列效果

　　后記:

　　筆者本來開始還擔心如果item過多，那么設置的屬性就會過多，比如數組內存放一千或一萬個item的屬性，后來經過筆者測試后發現，系統應該每次都是事先計算好了所有item的屬性(通過tableView計算每行高度的代理方法來思考)，因此直接初始化好所有item的屬性做法應該不會有太大弊端！如果筆者所做有什么錯誤或不妥之處望指出!謝謝！