自定义flowLayout

• 首先要做的就是重写UICollectionviewFlowLayout这个类, 自定义一个布局.
  1.创建一个UICollectionviewFlowLayout的类
  在这个类当中写几条属性.

@interface WFCollectionViewLayout : UICollectionViewLayout

/** 指定有多少列. */
@property (nonatomic, assign) NSInteger columnCounts;

/** 设置距离屏幕四周的边界. */
@property (nonatomic, assign) UIEdgeInsets edgeInsets;

/** 列间距. */
@property (nonatomic, assign) NSInteger columnSpace;

/** 行间距. */
@property (nonatomic, assign) NSInteger rowSpace;

@property (nonatomic, assign)id<WFCollectionLayoutDelegate>delegate;
@end

2.为这个类新建一个协议方法

@class WFCollectionViewLayout;
@protocol WFCollectionLayoutDelegate <NSObject>

- (CGFloat)layout:(WFCollectionViewLayout *)layout
heightFroItenAtIndexPath:(NSIndexPath *)indexPath
            Width:(CGFloat)widthh;

@end

这个协议方法在创建uicollectionview的界面中实现, 因为在抓取的数据中通常都会有图片的宽度和高度属性. 当我们在collectionView的界面中获取到数据的时候,可以通过这两个属性将每layout的高度返回到自定义的UICOllectionviewFlowLayout类中.通过返回的高度来判断layout的高度.

3.可以在.m文件中再写连个属性

@property (nonatomic, retain) NSMutableDictionary *columnDic; /** 用来存储每一列的Y值. */

@property (nonatomic, retain) NSMutableArray *attributesArray; /** 用来存储layout的属性的数组. */

4.重写自定义方法

- (instancetype)init {
    self = [super init];
    if (self) {
        self.columnDic = [NSMutableDictionary dictionary];
        self.attributesArray = [NSMutableArray array];

    }
    return self;
}

在初始化方法中初始化数组.

5.重写prepareLayout方法, 当collectionView布局layout的时候会调用到这个方法.

- (void)prepareLayout {
    [super prepareLayout];
    
    
    /** 清空属性数组. */
    
    if (self.attributesArray != nil) {
        [self.attributesArray removeAllObjects];
    }

     /** 根据列数进行遍历, 给骑士的每列都加上边界的距离. */

    /** 数据列数进行遍历. */
    for (NSInteger i = 0; i < self.columnCounts; i++) {
        NSString *key = [NSString stringWithFormat:@"%ld", i];
        self.columnDic[key] = @(self.edgeInsets.top);
    }
    
    /** 遍历每个item. */
    NSInteger count = [self.collectionView numberOfItemsInSection:0];
    for (int i = 0; i < count; i++) {
        [self setItemFrame:i];
    }
}

当我们要对瀑布流添加下拉,上拉刷新的时候一定要将存储布局属性的数组进行清空.否则程序会crash.

- (void)setItemFrame:(NSInteger)index {
    __block NSString *minColumn = @"0";
    
    
    [self.columnDic enumerateKeysAndObjectsUsingBlock:^(id  _Nonnull key, id  _Nonnull obj, BOOL * _Nonnull stop) {
        if ([obj floatValue] < [self.columnDic[minColumn] floatValue]) {
            minColumn = key;
        }
        
    }];
    
    
    CGFloat width = ((WIDTH - self.edgeInsets.left - self.edgeInsets.right - (self.columnCounts - 1) * self.columnSpace)) / self.columnCounts;
    
    /** x坐标 = 左间距 + (列间距 + 宽) * 列的下标. */
    /** 列的小标对应的是最短下标. */
    CGFloat x = _edgeInsets.left + (width + _columnSpace) * [minColumn floatValue];
    
    /** 创建一个indexPath. */
    NSIndexPath *indexPath = [NSIndexPath indexPathForRow:index inSection:0];
    
    
    /** 高. */
    CGFloat height = [self.delegate layout:self heightFroItenAtIndexPath:indexPath Width:width];
    
    
    /** 先找到当前最短一列的Y值. */
    CGFloat minY = [self.columnDic[minColumn] floatValue];
    
    /** 为最短的一列更新Y周的高度 = minY + 高 + 行间距 */
    self.columnDic[minColumn] = @(minY + height + self.rowSpace);
    
    
    
    /** 这个类用来设置 item 的 frame , bounds 等属性的. */
    UICollectionViewLayoutAttributes *layoutAttributed = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
    layoutAttributed.frame = CGRectMake(x, minY, width, height);
    [self.attributesArray addObject:layoutAttributed];
    
    
    
}

6.第四个方法: 把所有的样式返回, 告诉系统如何布局item

- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {
    return self.attributesArray;
}

7.设置滚动范围

- (CGSize)collectionViewContentSize {
    /** 滚动范围最长作为依据. */
    __block NSString *maxY = @"0";
    [self.columnDic enumerateKeysAndObjectsUsingBlock:^(id  _Nonnull key, id  _Nonnull obj, BOOL * _Nonnull stop) {
        
        if ([obj floatValue] > [self.columnDic[maxY] floatValue]) {
            maxY = key;
        }
    }];

    
    CGFloat h = [self.columnDic[maxY] floatValue] + self.edgeInsets.bottom;
    return CGSizeMake(0, h);
}

在viewController里调用

#pragma mark - 创建瀑布流
                                                                        - (void)createCollectionView {
    WFCollectionViewLayout *layout = [[WFCollectionViewLayout alloc] init];
    layout.columnCounts = 2;
    layout.columnSpace = 20;
    layout.rowSpace = 15;
    layout.edgeInsets = UIEdgeInsetsMake(10, 10, 10, 10);
    layout.delegate = self;
    
    _picCollectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 20, SCREEN_WIDTH, SCREEN_HEIGHT - 68-44) collectionViewLayout:layout];
    [self.view addSubview:_picCollectionView];
    [_picCollectionView release];
    _picCollectionView.delegate = self;
    _picCollectionView.dataSource = self;
    
    [_picCollectionView registerClass:[WFPIcsCell class] forCellWithReuseIdentifier:@"picsCell"];
    

协议方法

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return self.picArray.count;// 装数据的数组
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    WFPIcsCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"picsCell" forIndexPath:indexPath];
    
    WFPhotosModel *photoModel = self.picArray[indexPath.row];
    cell.photoModel = photoModel;
    return cell;
}
- (CGFloat)layout:(WFCollectionViewLayout *)layout heightFroItenAtIndexPath:(NSIndexPath *)indexPath Width:(CGFloat)widthh {
    WFPhotosModel *model = self.picArray[indexPath.row];
    
    CGFloat height = widthh * model.height / model.width;
    return height;
}