iOS 淘宝首页、电商首页 瀑布流效果 复杂collectionView样式

最近需求中需要对首页进行改版，插入瀑布流效果，但是我的首页是collectionView创建的，里面布局太多了，不好修改，以前遇到这样的需求，当时直接想的不同的second设置不同的layout ，但是感觉太复杂了，对我来说有点难度，后面想到把上面的那部分全部设置为表头，只留一个瀑布流的layout实现，但是对于我们项目来说，这样写改动太大了，我还怕改出问题，所以就有了以下方式，先看下具体效果：

gif.gif

实现思路

• 瀑布流的那个效果单独做一个自定义的cell，里面设置瀑布流效果
• 难度就是计算高度的问题，这个cell的高度需要去计算，每次获取新数据的时候，都把所有数据遍历算一遍当前数据所瀑布流布局得到的高度
• 计算高度的时候要知道，因为我的是两列，所以 我把数组两个两个变成一个组合 组成大数组，然后遍历，计算左边高度 和 右边高度，相比较，哪边矮就先把数据布局到矮的那边，这样就可以得到最终的左右两边高度，当然记得加上行间距，然后再取一下左右高度最大值得到整个瀑布流的高度。

实现代码

//为什么要加号方法，因为我的cell高度计算是通过cell加号方法根据数据计算的，所以下面用的都是加号方法,
// 拆分数组变成2个2个一组
+ (NSArray *)splitArray:(NSArray *)originalArray withSubSize:(NSInteger)subSize
{
    NSInteger count = originalArray.count % subSize == 0 ? (originalArray.count / subSize) : (originalArray.count / subSize + 1);
    NSMutableArray *newArray = [[NSMutableArray alloc] init];
    for (NSInteger i = 0; i < count; i ++) {
        NSInteger j = i * subSize;
        NSMutableArray *tempArray = [[NSMutableArray alloc] init];
        while (j < subSize*(i + 1) && j < originalArray.count) {
            [tempArray addObject:[originalArray objectAtIndex:j]];
            j += 1;
        }
        [newArray addObject:[tempArray copy]];
    }
    return [newArray copy];
}

+(CGFloat)caculateEndHeight:(OSFlowVideoModel *)model
{

    CGFloat height = 0.0;
    //左边的高度
    CGFloat leftHeight = 0.0;
    //右边的高度
    CGFloat rightHeight = 0.0;
    //最终高度
    CGFloat contentHeight = 0.0;
    //数组两个两个组成数据
    NSArray *array = [self splitArray:model.list withSubSize:2];
    for (int i = 0; i rightHeight) {
                rightHeight = rightHeight + [self caculateContentHeight:a] + PtOnIPhone6(7);
            }else{
                leftHeight = leftHeight + [self caculateContentHeight:a] + PtOnIPhone6(7);
            }
        }
    }
    contentHeight =  MAX(leftHeight, rightHeight);
    //多加了一个间距
    height -= PtOnIPhone6(7);
    height += contentHeight;
    return height;
}
//计算每个item内容高度
+(CGFloat)caculateContentHeight:(OSFlowVideoItemModel *)item
{
    CGFloat itemWidth = (OSScreenWidth - PtOnIPhone6(32) - PtOnIPhone6(7))/2;
    CGFloat height = 0.0;
    CGFloat titleH = [OSUtiltity getHeightWithText:item.title width:itemWidth - PtOnIPhone6(12) fontSize:RegularSysFont(14) withLimitHeight:PtOnIPhone6(40)];
    CGFloat imageHeight = 0.0;
    if (item.width.floatValue > item.height.floatValue) {
        imageHeight = itemWidth*3/4;
    }else if (item.width.floatValue < item.height.floatValue){
        imageHeight = itemWidth*4/3;
    }else{
        imageHeight = itemWidth;
    }
    height = titleH + imageHeight + PtOnIPhone6(16) + PtOnIPhone6(11) + PtOnIPhone6(20) + PtOnIPhone6(16);
    return height;
}

//计算的是cell高度，根据自身的情况来
+ (CGFloat)heightWithItems:(NSArray *)items indexPath:(NSIndexPath *)indexPath width:(CGFloat)width
{
    OSFlowVideoModel *model = (OSFlowVideoModel *)items[indexPath.row];
    return  [self caculateEndHeight:model];
}

瀑布流的collectionViewlayout

• h文件

@class EWWaterFallLayout;
 
@protocol EWWaterFallLayoutDataSource
 
@required
/**
  * 每个item的高度
  */
- (CGFloat)waterFallLayout:(EWWaterFallLayout *)waterFallLayout heightForItemAtIndexPath:(NSUInteger)indexPath itemWidth:(CGFloat)itemWidth;
 
@optional
/**
 * 有多少列
 */
- (NSUInteger)columnCountInWaterFallLayout:(EWWaterFallLayout *)waterFallLayout;
 
/**
 * 每列之间的间距
 */
- (CGFloat)columnMarginInWaterFallLayout:(EWWaterFallLayout *)waterFallLayout;
 
/**
 * 每行之间的间距
 */
- (CGFloat)rowMarginInWaterFallLayout:(EWWaterFallLayout *)waterFallLayout;
/**
* 每个item的内边距
*/
- (UIEdgeInsets)edgeInsetsInWaterFallLayout:(EWWaterFallLayout *)waterFallLayout;

@end
                   
@interface EWWaterFallLayout : UICollectionViewLayout

/**
* 代理
*/
@property (nonatomic, weak) id delegate;

@end

-m文件

/** 默认的列数 */
static const CGFloat EWDefaultColumnCount = 2;
/** 每一列之间的间距 */
static const CGFloat EWDefaultColumnMargin = 7;
/** 每一行之间的间距 **/
static const CGFloat EWDefaultFRowMargin = 7;
/** 内边距 */
static const UIEdgeInsets EWDefaultEdgeInsets = {0,0,0,0};

@interface EWWaterFallLayout()
/** 存放所有的布局属性 */
@property (nonatomic, strong) NSMutableArray *attrsArr;
/** 存放所有列的当前高度 */
@property (nonatomic, strong) NSMutableArray *columnHeights;
/** 内容的高度 */
@property (nonatomic, assign) CGFloat contentHeight;

- (NSUInteger)columnCount;
- (CGFloat)columnMargin;
- (CGFloat)rowMargin;
- (UIEdgeInsets)edgeInsets;

@end
@implementation EWWaterFallLayout
- (NSMutableArray *)attrsArr {
    if (!_attrsArr) {
        _attrsArr = [NSMutableArray array];
    }
    return _attrsArr;
}
 
- (NSMutableArray *)columnHeights {
    if (!_columnHeights) {
        _columnHeights = [NSMutableArray array];
    }
    return _columnHeights;
}
 
#pragma mark 数据处理
/**
  * 列数
 */
- (NSUInteger)columnCount {
    if ([self.delegate respondsToSelector:@selector(columnCountInWaterFallLayout:)]) {
        return [self.delegate columnCountInWaterFallLayout:self];
    } else {
        return EWDefaultColumnCount;
    }
}

/**
 * 列间距
 */
- (CGFloat)columnMargin {
    if ([self.delegate respondsToSelector:@selector(columnMarginInWaterFallLayout:)]) {
        return [self.delegate columnMarginInWaterFallLayout:self];
    } else {
        return EWDefaultColumnMargin;
    }
}
 
/**
 * 行间距
 */
- (CGFloat)rowMargin {
    if ([self.delegate respondsToSelector:@selector(rowMarginInWaterFallLayout:)]) {
        return [self.delegate rowMarginInWaterFallLayout:self];
    } else {
        return EWDefaultFRowMargin;
    }
}

/**
 * item的内边距
 */
- (UIEdgeInsets)edgeInsets {
    if ([self.delegate respondsToSelector:@selector(edgeInsetsInWaterFallLayout:)]) {
        return [self.delegate edgeInsetsInWaterFallLayout:self];
    } else {
        return EWDefaultEdgeInsets;
    }
}
 
/**
 * 初始化
 */
- (void)prepareLayout {
    [super prepareLayout];
    
    self.contentHeight = 0;
    
    //清除之前计算的所有高度
    [self.columnHeights removeAllObjects];
    
    //设置每一列默认的高度
    for (NSInteger i = 0; i < self.columnCount; i++) {
        [self.columnHeights addObject:@(EWDefaultEdgeInsets.top)];
    }
    //清除之前所有的布局属性
        [self.attrsArr removeAllObjects];
        
        //开始创建每一个cell对应的布局属性
        NSInteger count = [self.collectionView numberOfItemsInSection:0];
        
        for (int i = 0; i < count; i++) {
            
            //创建位置
            NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
            
            //获取indexPath位置上cell对应的布局属性
            UICollectionViewLayoutAttributes *attrs = [self layoutAttributesForItemAtIndexPath:indexPath];
            
            [self.attrsArr addObject:attrs];
        }
    }
/**
 * 返回indexPath位置cell对应的布局属性
 */
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {
    
    //创建布局属性
    UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
    //collectionView的宽度
    CGFloat collectionViewW = self.collectionView.frame.size.width;
    //设置布局属性的frame
    CGFloat cellW = (collectionViewW - self.edgeInsets.left - self.edgeInsets.right - (self.columnCount - 1) * self.columnMargin) / self.columnCount;
    CGFloat cellH = [self.delegate waterFallLayout:self heightForItemAtIndexPath:indexPath.item itemWidth:cellW];
    //找出最短的那一列
    NSInteger destColumn = 0;
    CGFloat minColumnHeight = [self.columnHeights[0] doubleValue];
    for (int i = 0; i < self.columnCount; i++) {
        //取得第i列的高度
        CGFloat columnHeight = [self.columnHeights[i] doubleValue];
        if (minColumnHeight > columnHeight) {
            minColumnHeight = columnHeight;
            destColumn = i;
        }
    }
    CGFloat cellX = self.edgeInsets.left + destColumn * (cellW + self.columnMargin);
    CGFloat cellY = minColumnHeight;
    if (cellY != self.edgeInsets.top) {
        cellY += self.rowMargin;
    }
    attrs.frame = CGRectMake(cellX, cellY, cellW, cellH);
    //更新最短那一列的高度
    self.columnHeights[destColumn] = @(CGRectGetMaxY(attrs.frame));
    //记录内容的高度 - 即最长那一列的高度
    CGFloat maxColumnHeight = [self.columnHeights[destColumn] doubleValue];
    if (self.contentHeight < maxColumnHeight) {
        self.contentHeight = maxColumnHeight;
    }
    return attrs;
}
 
/**
 * 决定cell的布局属性
 */
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {
    return self.attrsArr;
}
 
/**
 * 内容的高度
 */
- (CGSize)collectionViewContentSize {
    return CGSizeMake(0, self.contentHeight + self.edgeInsets.bottom);
}
@end

总结

难点主要在高度的计算那块，不要算错了，道理都一样，就和collectionViewlayout里面计算高度一样。

========2022.1.15更新==========

上面那种写法会存在这个问题：每次快速上拉获取新数据会导致内存增加，CPU会闪增，再降低，视图显示效果不好

优化

• 自定义UICollectionViewlayout 分区layout

具体实现，有时间写一个demo