本篇文章主要是針對如何在 ASCollectionNode中構(gòu)建瀑布流提供一種思路需忿，可以滿足大部分的產(chǎn)品需求刻诊。當(dāng)你看到這篇文章時矗烛，說明你對Texture的布局方式已經(jīng)熟悉趴泌，因此本篇文章對布局就不做說明告组。

先來一個效果圖

使用ASCollectionNode構(gòu)建瀑布流煤伟，可以真正的做到內(nèi)容自適應(yīng)，不用去計(jì)算煩人的headerHeight木缝、footerHeight便锨、itemSize

image.png

第一步:新建一個類，命名為YHASCollectionLayoutInfo

image.png

第二步:新建一個類，命名為YHASCollectionLayoutDelegate恳守，實(shí)現(xiàn) ASCollectionLayoutDelegate和 ASCollectionViewLayoutInspecting協(xié)議

1考婴、初始化方法:

image.png

image.png

3、實(shí)現(xiàn)ASCollectionLayoutDelegate(這才是重頭戲)
第一步:設(shè)置滑動方向

image.png

image.png

image.png

// 真正布局的地方.
+ (ASCollectionLayoutState *)calculateLayoutWithContext:(ASCollectionLayoutContext *)context{
    CGFloat layoutWidth = context.viewportSize.width;
    ASElementMap *elements = context.elements;
    CGFloat top = 0;
    YHASCollectionLayoutInfo *info = (YHASCollectionLayoutInfo *)context.additionalInfo;
    
    NSMapTable<ASCollectionElement *, UICollectionViewLayoutAttributes *> *attrsMap = [NSMapTable elementToLayoutAttributesTable];
    NSMutableArray *columnHeights = [NSMutableArray array];
    
    NSInteger numberOfSections = [elements numberOfSections];
    
    // 遍歷section.
    for (NSUInteger section = 0; section < numberOfSections; section++) {
        
        NSInteger numberOfItems = [elements numberOfItemsInSection:section];
        
        top += info.sectionInsets.top;
        
        NSIndexPath *indexPath = [NSIndexPath indexPathForItem:0 inSection:section];
        
        // header.
        ASCollectionElement *headerElement = [elements supplementaryElementOfKind:UICollectionElementKindSectionHeader atIndexPath:indexPath];
        if (headerElement) {
            UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForSupplementaryViewOfKind:UICollectionElementKindSectionHeader
                                                                                                                     withIndexPath:indexPath];
            CGSize size = [headerElement.node layoutThatFits:ASSizeRangeUnconstrained].size;
            CGRect frame = CGRectMake(info.sectionInsets.left, top, size.width, size.height);
            attrs.frame = frame;
            [attrsMap setObject:attrs forKey:headerElement];
            top = CGRectGetMaxY(frame);
        }
        
        //
        [columnHeights addObject:[NSMutableArray array]];
        for (NSUInteger idx = 0; idx < info.numberOfColumns; idx++) {
            [columnHeights[section] addObject:@(top)];
        }
        
    
        // item.
        CGFloat columnWidth = [self _columnWidthForSection:section withLayoutWidth:layoutWidth info:info];
        
        for (NSUInteger idx = 0; idx < numberOfItems; idx++) {
            NSUInteger columnIndex = [self _shortestColumnIndexInSection:section withColumnHeights:columnHeights];
            NSIndexPath *indexPath = [NSIndexPath indexPathForItem:idx inSection:section];
            ASCollectionElement *element = [elements elementForItemAtIndexPath:indexPath];
            UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
            
            ASSizeRange sizeRange = [self _sizeRangeForItem:element.node atIndexPath:indexPath withLayoutWidth:layoutWidth info:info];
            CGSize size = [element.node layoutThatFits:sizeRange].size;
            CGPoint position = CGPointMake(info.sectionInsets.left + (columnWidth + info.columnSpacing) * columnIndex,
                                           [columnHeights[section][columnIndex] floatValue]);
            CGRect frame = CGRectMake(position.x, position.y, size.width, size.height);
            
            attrs.frame = frame;
            [attrsMap setObject:attrs forKey:element];
            
            columnHeights[section][columnIndex] = @(CGRectGetMaxY(frame) + info.interItemSpacing);
        }
        
        NSUInteger columnIndex = [self _tallestColumnIndexInSection:section withColumnHeights:columnHeights];
        top = [columnHeights[section][columnIndex] floatValue] - info.interItemSpacing + info.sectionInsets.bottom;
        
        
        // footer.
        ASCollectionElement *footerElement = [elements supplementaryElementOfKind:UICollectionElementKindSectionFooter atIndexPath:indexPath];
        if (footerElement) {
            UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForSupplementaryViewOfKind:UICollectionElementKindSectionFooter withIndexPath:indexPath];
            CGSize size = [footerElement.node layoutThatFits:ASSizeRangeUnconstrained].size;
            CGRect frame = CGRectMake(info.sectionInsets.left, top, size.width, size.height);
            attrs.frame = frame;
            [attrsMap setObject:attrs forKey:footerElement];
            top = CGRectGetMaxY(frame);
        }
        
        //
        for (NSUInteger idx = 0; idx < [columnHeights[section] count]; idx++) {
            columnHeights[section][idx] = @(top);
        }
    }
    
    CGFloat contentHeight = [[[columnHeights lastObject] firstObject] floatValue];
    CGSize contentSize = CGSizeMake(layoutWidth, contentHeight);
    return [[ASCollectionLayoutState alloc] initWithContext:context contentSize:contentSize elementToLayoutAttributesTable:attrsMap];
}



+ (CGFloat)_columnWidthForSection:(NSUInteger)section withLayoutWidth:(CGFloat)layoutWidth info:(YHASCollectionLayoutInfo *)info{
    return ([self _widthForSection:section withLayoutWidth:layoutWidth info:info] - ((info.numberOfColumns - 1) * info.columnSpacing)) / info.numberOfColumns;
}

+ (CGFloat)_widthForSection:(NSUInteger)section withLayoutWidth:(CGFloat)layoutWidth info:(YHASCollectionLayoutInfo *)info{
    return layoutWidth - info.sectionInsets.left - info.sectionInsets.right;
}

+ (NSUInteger)_shortestColumnIndexInSection:(NSUInteger)section withColumnHeights:(NSArray *)columnHeights{
    __block NSUInteger index = 0;
    __block CGFloat shortestHeight = CGFLOAT_MAX;
    [columnHeights[section] enumerateObjectsUsingBlock:^(NSNumber *height, NSUInteger idx, BOOL *stop) {
        if (height.floatValue < shortestHeight) {
            index = idx;
            shortestHeight = height.floatValue;
        }
    }];
    return index;
}

+ (ASSizeRange)_sizeRangeForItem:(ASCellNode *)item atIndexPath:(NSIndexPath *)indexPath withLayoutWidth:(CGFloat)layoutWidth info:(YHASCollectionLayoutInfo *)info {
    CGFloat itemWidth = [self _columnWidthForSection:indexPath.section withLayoutWidth:layoutWidth info:info];
    return ASSizeRangeMake(CGSizeMake(itemWidth, 0), CGSizeMake(itemWidth, CGFLOAT_MAX));
}

+ (NSUInteger)_tallestColumnIndexInSection:(NSUInteger)section withColumnHeights:(NSArray *)columnHeights{
    __block NSUInteger index = 0;
    __block CGFloat tallestHeight = 0;
    [columnHeights[section] enumerateObjectsUsingBlock:^(NSNumber *height, NSUInteger idx, BOOL *stop) {
        if (height.floatValue > tallestHeight) {
            index = idx;
            tallestHeight = height.floatValue;
        }
    }];
    return index;
}

第三步:接下來，就可以開始使用了

image.png

image.png

完