UICollectionView瀑布流布局---iOS 笔记摘录

UICollectionView瀑布流布局

部分代码如下：

1.布局类

YTMyCollectionViewFL.h

#import <UIKit/UIKit.h>
@protocol YTMyCollectionViewFLDele <NSObject>
-(CGFloat)heightWithindexPath:(NSIndexPath *)indexPath;
@end

@interface YTMyCollectionViewFL : UICollectionViewFlowLayout
@property (nonatomic,weak) id<YTMyCollectionViewFLDele> dele;
@end

YTMyCollectionViewFL.m

#import "YTMyCollectionViewFL.h"
#import "YTMyCollectionViewFL.h"
#import "YTMyCollVFLTool.h"

@interface YTMyCollectionViewFL()


@property (nonatomic,assign) CGFloat columnMargin;      // 行间距
@property (nonatomic,assign) CGFloat rowMargin;         // 列间距
@property (nonatomic,assign) CGFloat columnNum;         // 列数
@property (nonatomic,assign) CGFloat width;
@property (nonatomic,assign) UIEdgeInsets sectionInsets;

@property (nonatomic,strong) NSMutableDictionary *maxYDic;  // 存储每列maxY

@property (nonatomic,strong) NSMutableArray *attributeArr;  // 存储所有att布局属性
@end


@implementation YTMyCollectionViewFL


// collV不用遵循flowlayoutDele，不用实现sizefor／sectionInset
-(instancetype)init{
    
    //
    self=[super init];
    if(self){
    
        YTMyCollVFLTool *tool=[YTMyCollVFLTool sharedTool];
        //
        _columnNum=tool.columnNum;
        _columnMargin=tool.columnMargin;
        _rowMargin=tool.rowMargin;
        _sectionInsets=tool.sectionInsets;
        
    }
    
    return self;
}
// 布局前调用
-(void)prepareLayout{

    [super prepareLayout];
    
    // 初始化maxYDic
    for(int i=0;i<_columnNum;i++){
    
        NSString *column=[NSString stringWithFormat:@"%d",i];
        self.maxYDic[column]=@(_sectionInsets.top);
    }
    
    // 初始化attArr
    [self.attributeArr removeAllObjects];
    NSInteger count=[self.collectionView numberOfItemsInSection:0];
    for(int i=0;i<count;i++){
    
        UICollectionViewLayoutAttributes *att=[self layoutAttributesForItemAtIndexPath:[NSIndexPath indexPathForRow:i inSection:0]];
        [self.attributeArr addObject:att];
    }
}

// 返回 总size
-(CGSize)collectionViewContentSize{

    //
    __block NSString *maxColumn=@"0";
    [_maxYDic enumerateKeysAndObjectsUsingBlock:^(id  _Nonnull key, id  _Nonnull obj, BOOL * _Nonnull stop) {
        if([_maxYDic[maxColumn] floatValue]<[obj floatValue]){
        
            maxColumn=(NSString *)obj;
        }
    }];
    return CGSizeMake(0, [_maxYDic[maxColumn] floatValue]+_sectionInsets.bottom);
}

// 返回 indexPath对应item的布局属性
-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath{

    // 每列宽
    _width=(self.collectionView.frame.size.width-_sectionInsets.left-_sectionInsets.right-_columnMargin*(_columnNum-1))/_columnNum;
    
    // height
    CGFloat height=[self.dele heightWithindexPath:indexPath];
    
    // 获取最短列
    __block NSString *minColumn=@"0";
    [_maxYDic enumerateKeysAndObjectsUsingBlock:^(id  _Nonnull key, id  _Nonnull obj, BOOL * _Nonnull stop) {
        if([obj floatValue]<[_maxYDic[minColumn] floatValue]){
            minColumn=(NSString *)key;
        }
    }];
    // (x,y)
    CGFloat x=_sectionInsets.left+(_columnMargin+_width)*[minColumn floatValue];
    CGFloat y=[_maxYDic[minColumn]floatValue]+_rowMargin;
    // update maxYDic
    _maxYDic[minColumn]=@(y+height);
    
    
    //
    UICollectionViewLayoutAttributes *att=[UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
    att.frame=CGRectMake(x, y, _width, height);
    
    return att;
}

// 返回 rect对应的布局属性
-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect{

    return self.attributeArr;
}


-(NSMutableArray *)attributeArr{

    if(!_attributeArr){
        _attributeArr=[NSMutableArray arrayWithCapacity:10];
    }
    return _attributeArr;
}
-(NSMutableDictionary *)maxYDic{

    if(!_maxYDic){
        _maxYDic=[NSMutableDictionary new];
    }
    return _maxYDic;
}
@end

2.工具类

YTMyCollVFLTool.h

@interface YTMyCollVFLTool : NSObject
@property (nonatomic,assign) CGFloat columnMargin;      // 行间距
@property (nonatomic,assign) CGFloat rowMargin;         // 列间距
@property (nonatomic,assign) CGFloat columnNum;         // 列数
@property (nonatomic,assign) UIEdgeInsets sectionInsets;    //
+(instancetype)sharedTool;
@end

YTMyCollVFLTool.m

#import "YTMyCollVFLTool.h"

@implementation YTMyCollVFLTool


static YTMyCollVFLTool *sharedTool;
+(instancetype)sharedTool{
    
    @synchronized (self) {
        if(!sharedTool){
            sharedTool=[YTMyCollVFLTool new];
        }
    }
    
    return sharedTool;
}


-(instancetype)init{

    self=[super init];
    if(self){
    
        //
        _columnNum=2;
        _columnMargin=10;
        _rowMargin=10;
        _sectionInsets=UIEdgeInsetsMake(10, 15, 10, 15);
        
    }
    
    return self;
}
@end

3.使用

   //
   YTMyCollectionViewFL *fl=[YTMyCollectionViewFL new];
   fl.dele=self;
   fl.scrollDirection=UICollectionViewScrollDirectionVertical;

   //
   UICollectionView *contentCollV=[[UICollectionView alloc]initWithFrame:CGRectZero collectionViewLayout:fl];
   _guideCollV=contentCollV;
   [contentCollV setTag:303];
   [contentCollV setBackgroundColor:[UIColor whiteColor]];
   contentCollV.delegate=self;
   contentCollV.dataSource=self;
   [self addSubview:contentCollV];
   [contentCollV autoPinEdgesToSuperviewEdgesWithInsets:UIEdgeInsetsZero];
   
   [contentCollV registerClass:[YTRecomGuideCollectionViewCell class] forCellWithReuseIdentifier:NSStringFromClass([YTRecomGuideCollectionViewCell class])];


-(CGFloat)heightWithindexPath:(NSIndexPath *)indexPath{
   return [_dele heightWithindexPath:indexPath withCollV:_guideCollV];
}