iOS - 关于瀑布流3.0的实现

只是说明实现瀑布流的方法， 以及自定义layout布局，其他多余事情本文不提。

先看项目框架：

1.ZJJCustomModel 类的内容

#import <Foundation/Foundation.h>



@interface ZJJCustomModel : NSObject

+ (NSArray *)customGetTheImagesArray;

@end

 

#import "ZJJCustomModel.h"



@implementation ZJJCustomModel

+ (NSArray *)customGetTheImagesArray {

    

//    0-30.jpg

    

    NSMutableArray *arr = [NSMutableArrayarrayWithCapacity:0];

    

    for (NSInteger i =0; i<31; i++) {

        

        NSString *name = [NSStringstringWithFormat:@"%ld.jpg",i];

        

        [arr addObject:name];

        

    }

    

    return arr;

    

}

@end

 

2.自定义cell（ZJJCustomCollectionCell）类

#import <UIKit/UIKit.h>



@interface ZJJCustomCollectionCell : UICollectionViewCell



- (id)initWithFrame:(CGRect)frame;



// 自定义 cell 的 label 和 image

@property (nonatomic,strong) UILabel *label;

@property (nonatomic,strong) UIImageView *imageView;



// 图片名字和文本名字

@property (nonatomic,copy)    NSString *imageName;

@property (nonatomic,copy)    NSString *labelName;



@end

 

#import "ZJJCustomCollectionCell.h"



@implementation ZJJCustomCollectionCell



- (id)initWithFrame:(CGRect)frame {

    

    self = [super initWithFrame:frame];

    

    if (self) {

        

        self.backgroundColor = [UIColor colorWithRed:arc4random()%256/255.0 green:arc4random()%256/255.0 blue:arc4random()%256/255.0 alpha:1];

        

        self.imageView = [[UIImageView alloc] init];

        self.label = [[UILabel alloc] init];

        

        [self addSubview:self.imageView];

        [self addSubview:self.label];

    }

    return self;

}



- (void)setImageName:(NSString *)imageName {

    self.imageView.frame = CGRectMake(0, 0, self.frame.size.width, self.frame.size.height);

    self.imageView.contentMode = UIViewContentModeScaleAspectFit;

    self.imageView.image = [UIImage imageNamed:imageName];

}



- (void)setLabelName:(NSString *)labelName {

    self.label.frame = CGRectMake(0, self.frame.size.height-30, self.frame.size.width, 30);

    self.label.backgroundColor = [UIColor greenColor];

    self.label.textColor = [UIColor redColor];

    self.label.text = labelName;

    self.label.textAlignment = NSTextAlignmentCenter;

}





@end

 

3.ViewController 类

// 重用cell标识符

#define   REUSE_CELL   @"cell"



#import "ViewController.h"

#import "ZJJCustomLayout.h"

#import "ZJJCustomModel.h"

#import "ZJJCustomCollectionCell.h"



@interface ViewController ()<UICollectionViewDataSource,UICollectionViewDelegateFlowLayout> {

    UICollectionView *_collect;

    NSArray *_dataArray;  // 数据源

}



@end



@implementation ViewController



- (void)viewDidLoad {

    [super viewDidLoad];

    // Do any additional setup after loading the view, typically from a nib.

    

    self.view.backgroundColor = [UIColor whiteColor];

    

    [self arrayInfo];

    

}

#pragma mark - 基础配置

- (void)creatView {

    

    ZJJCustomLayout *layout = [[ZJJCustomLayout alloc] init];

    layout.itemCount = _dataArray.count;

    layout.scrollDirection = UICollectionViewScrollDirectionVertical;

    

    _collect = [[UICollectionView alloc] initWithFrame:self.view.frame collectionViewLayout:layout];

    _collect.backgroundColor = [UIColor whiteColor];

    _collect.delegate = self;

    _collect.dataSource = self;

    [_collect registerClass:[ZJJCustomCollectionCell class] forCellWithReuseIdentifier:REUSE_CELL];

    [self.view addSubview:_collect];

    

}

#pragma mark - 获取数据，填充数据源

- (void)arrayInfo {

    

    _dataArray = [ZJJCustomModel customGetTheImagesArray];

    

    [self creatView];



}

#pragma mark - collectionView 代理方法

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {

    return _dataArray.count;

}



- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {

    

    ZJJCustomCollectionCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:REUSE_CELL forIndexPath:indexPath];

    

    cell.imageName = _dataArray[indexPath.row];

    cell.labelName = [NSString stringWithFormat:@"总价:%ld元",indexPath.row+1];

    

    return cell;

}



- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {

    return 1;

}

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {

    

    NSLog(@"点击了第%ld个item",indexPath.row);

    

    

}

- (void)didReceiveMemoryWarning {

    [super didReceiveMemoryWarning];

    // Dispose of any resources that can be recreated.

}





@end

 

4.ZJJCustomLayout 类

 

#import <UIKit/UIKit.h>



@interface ZJJCustomLayout : UICollectionViewFlowLayout



@property (nonatomic, assign)   NSInteger itemCount; //元素个数



@end

 

#define   SCREEN_W    [UIScreen mainScreen].bounds.size.width

#define   SCREEN_H    [UIScreen mainScreen].bounds.size.height



#import "ZJJCustomLayout.h"



@interface ZJJCustomLayout () {

    

    float _itemW;   // 元素宽度

    

    float _itemH;    // 元素高度

    

    float _heightArray[3];  // 记录每列高度的数组,这里的瀑布流规定有三列

    

    NSMutableArray *_attributesMArray;   // 装有item属性的数组

}



@end





@implementation ZJJCustomLayout





- (void)prepareLayout {

    

    [super prepareLayout];

    

    // 这里假设有三列，给每列赋初始值(状态栏高度)

    _heightArray[0] = 20.0f;

    _heightArray[1] = 20.0f;

    _heightArray[2] = 20.0f;



    _attributesMArray = [NSMutableArray array];

    [_attributesMArray removeAllObjects];

    

    // 内外间隔是 10 ，可以设置每个元素的固定宽度

    _itemW = (SCREEN_W-10*(1+3))/3;

    

    for (NSInteger i = 0; i<_itemCount; i++) {

        // 随机给高度

        _itemH = arc4random()%50 + _itemW + 30;

        

        // 每个元素的横纵坐标

        float itemX = 0.0f;

        float itemY = 0.0f;

        

        /**

         记录 当前元素应该放在哪一列

         columnRecord = 0  ，  1  ，  2   

         分别表示应该放在 第  1  ，   2   ，3  列

        */

        int columnRecord = 0;



        if (i == 0) {

            columnRecord = 0;

        }else if (i == 1) {

            columnRecord = 1;

        }else if (i == 2) {

            columnRecord = 2;

        }else {

            // 找到最矮的

            if (_heightArray[0] > _heightArray[1]) {

                

                if (_heightArray[1] > _heightArray[2]) {

                    columnRecord = 2;

                }else {

                    columnRecord = 1;

                }

            }else {

                if (_heightArray[0] > _heightArray[2]) {

                    columnRecord = 2;

                }else {

                    columnRecord = 0;

                }

            }



        }

        

        if (columnRecord == 0) {

            itemX = 10;

            itemY = _heightArray[0];



            // 上下间隔 5 ，不要那么紧凑 

            _heightArray[0] += _itemH + 5;

        }else if (columnRecord == 1) {

            itemX = 10 + _itemW+10;

            itemY = _heightArray[1];



            _heightArray[1] += _itemH + 5;

        }else {

            itemX = (10+_itemW)*2+10;

            itemY = _heightArray[2];



            _heightArray[2] += _itemH + 5;

        }

        

        NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];

        

         UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];

        

        attributes.frame = CGRectMake(itemX, itemY, _itemW, _itemH);

        

        [_attributesMArray addObject:attributes];

        

    }

    

}





- (nullable NSArray<__kindof UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {

    

    return _attributesMArray;

    

}



- (CGSize)collectionViewContentSize {

    

    float totalHeight = 0.0f;

    

    if (_heightArray[0] > _heightArray[1]) {

        

        totalHeight = MAX(_heightArray[0], _heightArray[2]);

        

    }else {

        

        totalHeight = MAX(_heightArray[1], _heightArray[2]);

        

    }

    

    return CGSizeMake(SCREEN_W, totalHeight);

    

}



@end

 

到此，就实现waterfall了，效果如下