通過自定義UICollectionViewLayout實現瀑布流布局。

首先看一下效果圖：

下面貼上代碼：

ViewController：

#import <UIKit/UIKit.h>@interface ViewController : UIViewController@end/*** ---------------分割線--------------- ***/#import "ViewController.h"#import "HWWaterFallLayout.h"@interface ViewController ()<UICollectionViewDataSource>@PRoperty (nonatomic, strong) UICollectionView *collectionView;@property (nonatomic, strong) NSArray *array;@end@implementation ViewControllerstatic NSString *const reuseIdentifier = @"waterfall";- (void)viewDidLoad {    [super viewDidLoad];        //獲取數據    [self getInfo];}- (void)getInfo{    self.array = @[@"1.jpg", @"2.jpg", @"3.jpg", @"4.jpg", @"5.jpg", @"6.jpg", @"7.jpg", @"1.jpg", @"2.jpg", @"3.jpg", @"4.jpg", @"5.jpg", @"6.jpg", @"7.jpg", @"1.jpg", @"2.jpg", @"3.jpg", @"4.jpg", @"5.jpg", @"6.jpg", @"7.jpg", @"1.jpg", @"2.jpg", @"3.jpg", @"4.jpg", @"5.jpg", @"6.jpg", @"7.jpg"];        //創建控件    [self creatControl];}- (void)creatControl{    //創建瀑布流布局    HWWaterFallLayout *waterfall = [HWWaterFallLayout waterFallLayoutWithColumnCount:3];    waterfall.rowSpacing = 10;    waterfall.columnSpacing = 10;    waterfall.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);    [waterfall setItemHeightBlock:^CGFloat(CGFloat itemWidth, NSIndexPath *indexPath) {        //根據圖片的原始尺寸，及顯示寬度，等比例縮放來計算顯示高度        UIImage *image = [UIImage imageNamed:_array[indexPath.item]];        return image.size.height / image.size.width * itemWidth;    }];    //創建collectionView    _collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:waterfall];    _collectionView.backgroundColor = [UIColor whiteColor];     _collectionView.dataSource = self;    [self.view addSubview: _collectionView];    //注冊標識    [ _collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:reuseIdentifier];}#pragma mark - UICollectionViewDataSource- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{    return _array.count;}- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:reuseIdentifier forIndexPath:indexPath];        cell.backgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:_array[indexPath.item]]];        return cell;}@end
HWWaterFallLayout：
#import <UIKit/UIKit.h>@interface HWWaterFallLayout : UICollectionViewLayout@property (nonatomic, assign) NSInteger columnCount;@property (nonatomic, assign) NSInteger columnSpacing;@property (nonatomic, assign) NSInteger rowSpacing;@property (nonatomic, assign) UIEdgeInsets sectionInset;@property (nonatomic, copy) CGFloat(^itemHeightBlock)(CGFloat itemHeight, NSIndexPath *indexPath);+ (instancetype)waterFallLayoutWithColumnCount:(NSInteger)columnCount;@end/*** ---------------分割線--------------- ***/#import "HWWaterFallLayout.h"@interface HWWaterFallLayout ()@property (nonatomic, strong) NSMutableDictionary *maxYDic;@property (nonatomic, strong) NSMutableArray *attributesArray;@end@implementation HWWaterFallLayout//懶加載- (NSMutableDictionary *)maxYDic{    if (!_maxYDic) {        _maxYDic = [NSMutableDictionary dictionary];    }        return _maxYDic;}- (NSMutableArray *)attributesArray{    if (!_attributesArray) {        _attributesArray = [NSMutableArray array];    }        return _attributesArray;}//初始化類方法+ (instancetype)waterFallLayoutWithColumnCount:(NSInteger)columnCount{    return [[self alloc] initWithColumnCount:columnCount];}//私有init方法- (instancetype)initWithColumnCount:(NSInteger)columnCount{    if (self = [super init]) {        self.columnCount = columnCount;    }    return self;}- (void)prepareLayout{    [super prepareLayout];        //初始化字典，有幾列就有幾個鍵值對，key為列，value為列的最大y值，初始值為上內邊距    for (int i = 0; i < self.columnCount; i++) {        self.maxYDic[@(i)] = @(self.sectionInset.top);    }        //清空attributes數組    [self.attributesArray removeAllObjects];        //根據collectionView獲取總共有多少個item    NSInteger itemCount = [self.collectionView numberOfItemsInSection:0];        //為每一個item創建一個attributes并存入數組    for (int i = 0; i < itemCount; i++) {        UICollectionViewLayoutAttributes *attributes = [self layoutAttributesForItemAtIndexPath:[NSIndexPath indexPathForItem:i inSection:0]];        [self.attributesArray addObject:attributes];    }}//計算collectionView的contentSize- (CGSize)collectionViewContentSize{    __block NSNumber *maxIndex = @0;    //遍歷字典，找出最長的那一列    [self.maxYDic enumerateKeysAndObjectsUsingBlock:^(NSNumber *key, NSNumber *obj, BOOL *stop) {        if ([self.maxYDic[maxIndex] floatValue] < obj.floatValue) {            maxIndex = key;        }    }];        //collectionView的contentSize.height就等于最長列的最大y值+下內邊距    return CGSizeMake(0, [self.maxYDic[maxIndex] floatValue] + self.sectionInset.bottom);}- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath{    //根據indexPath獲取item的attributes    UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];        //獲取collectionView的寬度    CGFloat collectionViewWidth = self.collectionView.frame.size.width;        //item的寬度 = (collectionView的寬度 - 內邊距與列間距) / 列數    CGFloat itemWidth = (collectionViewWidth - self.sectionInset.left - self.sectionInset.right - (self.columnCount - 1) * self.columnSpacing) / self.columnCount;        CGFloat itemHeight = 0;    //獲取item的高度，由外界計算得到    if (self.itemHeightBlock) itemHeight = self.itemHeightBlock(itemWidth, indexPath);    //找出最短的那一列    __block NSNumber *minIndex = @0;    [self.maxYDic enumerateKeysAndObjectsUsingBlock:^(NSNumber *key, NSNumber *obj, BOOL *stop) {        if ([self.maxYDic[minIndex] floatValue] > obj.floatValue) {            minIndex = key;        }    }];        //根據最短列的列數計算item的x值    CGFloat itemX = self.sectionInset.left + (self.columnSpacing + itemWidth) * minIndex.integerValue;        //item的y值 = 最短列的最大y值 + 行間距    CGFloat itemY = [self.maxYDic[minIndex] floatValue] + self.rowSpacing;        //設置attributes的frame    attributes.frame = CGRectMake(itemX, itemY, itemWidth, itemHeight);        //更新字典中的最大y值    self.maxYDic[minIndex] = @(CGRectGetMaxY(attributes.frame));        return attributes;}//一個cell對應一個UICollectionViewLayoutAttributes對象- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect{    return self.attributesArray;}@end
猜你喜歡：iOS UICollectionView實用練習 —— HERO博客
                       iOS UICollectionView簡介 —— HERO博客