iOS專案開發實戰——使用UICollectionView實現瀑布流

     瀑布流是目前比較流行的一種圖片顯示方式。很多的電商網站都已這樣的方式來呈現商品。現在我們來簡單實現一下，本案例使用OC實現。

（1）在Images.xcassets中拖入若干張圖片。

（2）在ViewController.h中實現如下：

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController<UICollectionViewDelegateFlowLayout,UICollectionViewDataSource>
@property (nonatomic, strong) UICollectionView *collectionView;

@end

（3）在ViewController.m中實現如下：

#import "ViewController.h"
#import "WaterFallCollectionViewCell.h"
#import "WaterFallFlowLayout.h"
CGFloat const kImgCount = 17;
static NSString *identifier = @"collectionView";
@interface ViewController ()
@property (nonatomic, strong) NSArray  *imgArr;

@end

@implementation ViewController
//懶載入
- (NSArray *)imgArr{
    if (!_imgArr) {
        NSMutableArray *muArr = [NSMutableArray array];
        for (int i = 1; i < kImgCount; i++) {
            UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"huoying%d",i]];
            [muArr addObject:image];
        }
        _imgArr = muArr;
    }
    return _imgArr;
}
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    WaterFallFlowLayout *flowLayout = [[WaterFallFlowLayout alloc] init];
    self.collectionView = [[UICollectionView alloc] initWithFrame:[UIScreen mainScreen].bounds collectionViewLayout:flowLayout];
    self.collectionView.backgroundColor = [UIColor yellowColor];
    self.collectionView.delegate = self;
    self.collectionView.dataSource = self;
    //註冊單元格
    [self.collectionView registerClass:[WaterFallCollectionViewCell class] forCellWithReuseIdentifier:identifier];
    [self.view addSubview:self.collectionView];
}
#pragma mark - UICollectionView dataSource
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return self.imgArr.count;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    WaterFallCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];
    if (!cell) {
        cell = [[WaterFallCollectionViewCell alloc] init];
    }
    cell.image = self.imgArr[indexPath.item];
    return cell;
}
- (float)imgHeight:(float)height width:(float)width{
    /*
        高度/寬度 = 壓縮後高度/壓縮後寬度（100）
     */
    float newHeight = height / width * 100;
    return newHeight;
}
#pragma mark - UICollectionView delegate flowLayout
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
    UIImage *image = self.imgArr[indexPath.item];
    float height = [self imgHeight:image.size.height width:image.size.width];
    return CGSizeMake(100, height);
    
}
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
    UIEdgeInsets edgeInsets = {5,5,5,5};
    return edgeInsets;
}
- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

（4）在WaterFallFlowLayout.h中實現如下：

#import <UIKit/UIKit.h>

@interface WaterFallFlowLayout : UICollectionViewFlowLayout

@property (nonatomic, assign) id<UICollectionViewDelegateFlowLayout> delegate;
@property (nonatomic, assign) NSInteger cellCount;//cell的個數
@property (nonatomic, strong) NSMutableArray *colArr;//存放列的高度
@property (nonatomic, strong) NSMutableDictionary *attributeDict;//存放cell的位置資訊


@end

（5）在WaterFallFlowLayout.m中實現如下：

#import "WaterFallFlowLayout.h"
CGFloat const colCount = 3;
@implementation WaterFallFlowLayout
//準備佈局：得到cell的總個數，為每個cell確定自己的位置
- (void)prepareLayout{
    [super prepareLayout];
    _colArr = [NSMutableArray array];
    _attributeDict = [NSMutableDictionary dictionary];
    self.delegate = (id<UICollectionViewDelegateFlowLayout>)self.collectionView.delegate;
   //獲取cell的總個數
    _cellCount = [self.collectionView numberOfItemsInSection:0];
    if (_cellCount == 0) {
        return;
    }
    float top = 0;
    for (int i = 0; i < colCount; i++) {
        [_colArr addObject:[NSNumber numberWithFloat:top]];
    }
    //迴圈呼叫layoutForItemAtIndexPath方法，為每個cell佈局，將indexPath傳入，作為佈局字典的key
    //layoutAttributesForItemAtIndexPath方法的實現，這裡用到了一個佈局字典，其實就是將每個cell的位置資訊與indexPath相對應，將它們放到字典中，方便後面檢視的檢索
    for (int i = 0; i < _cellCount; i++) {
        [self layoutItemAtIndexPath:[NSIndexPath indexPathForItem:i inSection:0]];
    }
    
}
//此方法會多次呼叫，為每個cell佈局
- (void)layoutItemAtIndexPath:(NSIndexPath *)indexPath{
    //通過協議得到cell的間隙
    UIEdgeInsets edgeInsets = [self.delegate collectionView:self.collectionView layout:self insetForSectionAtIndex:indexPath.row];
    CGSize itemSize = [self.delegate collectionView:self.collectionView layout:self sizeForItemAtIndexPath:indexPath];
    float col = 0;
    float shortHeight = [[_colArr objectAtIndex:col] floatValue];
    //找出高度最小的列，將cell加到最小列中
    for (int i = 0; i < _colArr.count; i++) {
        float height = [[_colArr objectAtIndex:i] floatValue];
        if (height < shortHeight) {
            shortHeight = height;
            col = i;
        }
    }
    float top = [[_colArr objectAtIndex:col] floatValue];
    //確定cell的frame
    CGRect frame = CGRectMake(edgeInsets.left + col * (edgeInsets.left + itemSize.width), top + edgeInsets.top, itemSize.width, itemSize.height);
    //更新列高
    [_colArr replaceObjectAtIndex:col withObject:[NSNumber numberWithFloat:top + edgeInsets.top + itemSize.height]];
    //每個cell的frame對應一個indexPath，放入字典中
    [_attributeDict setObject:indexPath forKey:NSStringFromCGRect(frame)];
}
//為每個cell佈局完畢後，需要實現這個方法， 傳入frame，返回的時cell的資訊
//傳入當前可見cell的rect，檢視滑動時呼叫
- (NSArray *)indexPathsOfItem:(CGRect)rect{
    //遍歷佈局字典通過CGRectIntersectsRect方法確定每個cell的rect與傳入的rect是否有交集，如果結果為true，則此cell應該顯示，將佈局字典中對應的indexPath加入陣列
    NSMutableArray *array = [NSMutableArray array];
    for (NSString *rectStr in _attributeDict) {
        CGRect cellRect = CGRectFromString(rectStr);
        if (CGRectIntersectsRect(cellRect, rect)) {
            NSIndexPath *indexPath = _attributeDict[rectStr];
            [array addObject:indexPath];
        }
    }
    return array;
}
//返回cell的佈局資訊，如果忽略傳入的rect一次性將所有的cell佈局資訊返回，圖片過多時效能會很差
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect{
    NSMutableArray *muArr = [NSMutableArray array];
    //indexPathsOfItem方法，根據傳入的frame值計算當前應該顯示的cell
    NSArray *indexPaths = [self indexPathsOfItem:rect];
    for (NSIndexPath *indexPath in indexPaths) {
        UICollectionViewLayoutAttributes *attribute = [self layoutAttributesForItemAtIndexPath:indexPath];
        [muArr addObject:attribute];
    }
    return muArr;
}
//最後還要實現這個方法，返回collectionView內容的大小
//只需要遍歷前面建立的存放列高的陣列得到列最高的一個作為高度返回就可以了
- (CGSize)collectionViewContentSize{
    CGSize size = self.collectionView.frame.size;
    float maxHeight = [[_colArr objectAtIndex:0] floatValue];
    //查詢最高的列的高度
    for (int i = 0; i < _colArr.count; i++) {
        float colHeight = [[_colArr objectAtIndex:i] floatValue];
        if (colHeight > maxHeight) {
            maxHeight = colHeight;
        }
    }
    size.height = maxHeight;
    return size;
}
@end

（6）在WaterFallCollectionViewCell.h中實現如下：

#import <UIKit/UIKit.h>

@interface WaterFallCollectionViewCell : UICollectionViewCell

@property (nonatomic, strong) UIImage *image;

@end

（7）在WaterFallCollectionViewCell.m中實現如下：

#import "WaterFallCollectionViewCell.h"

@implementation WaterFallCollectionViewCell
- (void)setImage:(UIImage *)image{
    if (_image != image) {
        _image = image;
    }
    [self setNeedsDisplay];
}
- (void)drawRect:(CGRect)rect{
    float newHeight = _image.size.height / _image.size.width * 100;
    [_image drawInRect:CGRectMake(0, 0, 100, newHeight)];
}
@end

（8）執行程式，效果如下：

.

github主頁：https://github.com/chenyufeng1991  。歡迎大家訪問！