iOS 瀑布流佈局 —— HERO博客

通過自定義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 ViewController

static 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博客