iOS瀑布流初體驗

JatenLv發表於2018-01-09
iOS

  蘋果在TableView之後推出的CollectionView，這兩種自定義檢視滿足了絕大部分專案的需求，在初識iOS的時候，一直在糾結這兩種檢視應該用哪種，隨著程式碼量的提升和對佈局的認識，總結出CollectionView適合需要繁瑣佈局的檢視，TableView比較適合垂直而下，資料來源比較相似的檢視。

  CollectionView強大的自定義佈局則基於UICollectionViewLayout這個類，實現瀑布流的基本步驟應該是：設定好列數和行、列間距 →→ 從資料來源依次取出item填入CollectionView（此時應該通過delegate或block獲取到image的size），記錄其UICollectionViewLayoutAttributes屬性並記錄所在列的最大y值 →→ 返回item的Attributes陣列 →→ 計算CollectionView的ContentSize。

具體程式碼如下：

  新建一個類繼承於UICollectionViewLayout。

#import <UIKit/UIKit.h>

@class JTWaterFallLayout;

@protocol JTWaterFallLayoutDelegate <NSObject>

@required

// 計算item高度的代理方法，將item的高度與indexPath傳遞給外界
- (CGFloat)waterfallLayout:(JTWaterFallLayout *)waterfallLayout itemHeightForWidth:(CGFloat)itemWidth atIndexPath:(NSIndexPath *)indexPath;

@end

@interface JTWaterFallLayout : UICollectionViewLayout

// 總列數，預設2
@property (nonatomic, assign) NSInteger columnCount;

// 列間距，預設0
@property (nonatomic, assign) NSInteger columnSpacing;

// 行間距，預設0
@property (nonatomic, assign) NSInteger rowSpacing;

// section與collectionView的間距，預設（0，0，0，0）
@property (nonatomic, assign) UIEdgeInsets sectionInset;

// 一次性設定列間距，行間距，sectionInset三個屬性
- (void)setColumnSpacing:(NSInteger)columnSpacing rowSpacing:(NSInteger)rowSepacing sectionInset:(UIEdgeInsets)sectionInset;

/**
 以下代理屬性與block屬性二選一，用來設定每一個item的高度
 會將item的寬度與indexPath傳遞給外界
 如果兩個都設定，block的優先順序高，即代理無效
 */

// 代理，用來計算item的高度
@property (nonatomic, weak) id<JTWaterFallLayoutDelegate> delegate;

// 計算item高度的block，將item的高度與indexPath傳遞給外界
@property (nonatomic, strong) CGFloat(^itemHeightBlock)(CGFloat itemHeight,NSIndexPath *indexPath);

// 兩個初始化方法任選其一
+ (instancetype)waterFallLayoutWithColumnCount:(NSInteger)columnCount;
- (instancetype)initWithColumnCount:(NSInteger)columnCount;

@end

複製程式碼

#import "JTWaterFallLayout.h"

@interface JTWaterFallLayout ()

// 用來記錄每一列的最大y值
@property (nonatomic, strong) NSMutableDictionary *maxYDic;

// 儲存每一個item的attributes
@property (nonatomic, strong) NSMutableArray *attributesArray;

@end

@implementation JTWaterFallLayout

#pragma mark - init

- (instancetype)init
{
    if (self = [super init])
    {
        self.columnCount = 2;
    }
    return self;
}

- (instancetype)initWithColumnCount:(NSInteger)columnCount
{
    if (self = [super init]) {
        self.columnCount = columnCount;
    }
    return self;
}

+ (instancetype)waterFallLayoutWithColumnCount:(NSInteger)columnCount
{
    return [[self alloc] initWithColumnCount:columnCount];
}

#pragma mark - method

- (void)setColumnSpacing:(NSInteger)columnSpacing rowSpacing:(NSInteger)rowSepacing sectionInset:(UIEdgeInsets)sectionInset
{
    self.columnSpacing = columnSpacing;
    self.rowSpacing = rowSepacing;
    self.sectionInset = sectionInset;
}

#pragma mark - 佈局相關方法

// 佈局前的準備工作，CollectionView第一次佈局和佈局失效時都會呼叫
- (void)prepareLayout
{
    [super prepareLayout];
    //初始化字典，有幾列就有幾個鍵值對，key為列，value為列的最大y值，初始值為上內邊距
    for (int i = 0; i < self.columnCount; i++) {
        self.maxYDic[@(i)] = @(self.sectionInset.top);
    }
    
    //根據collectionView獲取總共有多少個item
    NSInteger itemCount = [self.collectionView numberOfItemsInSection:0];
    [self.attributesArray removeAllObjects];
    //為每一個item建立一個attributes並存入陣列
    for (int i = 0; i < itemCount; i++) {
        UICollectionViewLayoutAttributes *attributes = [self layoutAttributesForItemAtIndexPath:[NSIndexPath indexPathForItem:i inSection:0]];
        [self.attributesArray addObject:attributes];
    }
}

// 返回indexPath位置上的item的佈局屬性
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
    //根據indexPath獲取item的attributes
    UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
    
    //item的寬度 = (collectionView的寬度 - 內邊距與列間距) / 列數
    CGFloat itemWidth = (self.collectionView.bounds.size.width - 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);
    } else {
        if ([self.delegate respondsToSelector:@selector(waterfallLayout:itemHeightForWidth:atIndexPath:)])
            itemHeight = [self.delegate waterfallLayout:self itemHeightForWidth:itemWidth atIndexPath: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;
}

// 計算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);
}

// 返回rect範圍內item的attributes佈局屬性的陣列
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
    return self.attributesArray;
}

#pragma mark - lazy init

- (NSMutableDictionary *)maxYDic
{
    if (!_maxYDic) {
        _maxYDic = [[NSMutableDictionary alloc] init];
    }
    return _maxYDic;
}

- (NSMutableArray *)attributesArray
{
    if (!_attributesArray) {
        _attributesArray = [NSMutableArray array];
    }
    return _attributesArray;
}

@end
複製程式碼

如何使用：

// 首先進行初始化
JTWaterFallLayout *waterfallFlowLayout = [JTWaterFallLayout waterFallLayoutWithColumnCount:2];
[waterfallFlowLayout setColumnSpacing:5 rowSpacing:5 sectionInset:UIEdgeInsetsMake(0, 5, 5, 5)];
waterfallFlowLayout.delegate = self; // 記得設定代理

// ① 如果是程式碼寫的CollectionView
self.collectionViewByCode = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, 200, 200) collectionViewLayout:waterfallFlowLayout];

// ② 如果是xib裡寫的CollectionView
self.collectionViewByXib.collectionViewLayout = waterfallFlowLayout;

// 再實現相應代理即可（也可以用block）
複製程式碼

還需要實現相關代理，注意Model中最好有Width和Height或圖片比例，沒有的話只能先用SDWebImage下載好圖片，再傳入代理，當然這樣會特別的慢，影響使用者體驗。

- (CGFloat)waterfallLayout:(JTWaterfallLayout *)waterfallLayout itemHeightForWidth:(CGFloat)itemWidth atIndexPath:(NSIndexPath *)indexPath
{
    JTModel *model = [self.JTModelList objectAtIndex:indexPath.item];
    if (model.height && model.width) {
        self.itemWidth = itemWidth;
        return model.height * 1.0 / model.width * itemWidth;
    }
    // 如果沒有Width和Height屬性，先預估100，待圖片下載完之後計算出來再重新整理CollectionView
    return 100;
}

複製程式碼

相關文章