本篇文章主要是针对如何在
ASCollectionNode中构建瀑布流提供一种思路，可以满足大部分的产品需求。当你看到这篇文章时，说明你对Texture的布局方式已经熟悉，因此本篇文章对布局就不做说明。
先来一个效果图
使用ASCollectionNode构建瀑布流，可以真正的做到内容自适应，不用去计算烦人的headerHeight、footerHeight、itemSize
image.png
第一步:新建一个类，命名为YHASCollectionLayoutInfo
image.png
注意:
1、
isEqual和hash方法必须实现，具体原因接下来要讲.2、该类并没有设置类似headerHeight和footerHeight的属性，原因是：我希望headerHeight和footerHeight的高度由内部子元素决定。
第二步:新建一个类，命名为YHASCollectionLayoutDelegate，实现 ASCollectionLayoutDelegate和 ASCollectionViewLayoutInspecting协议
1、初始化方法:
image.png
2、实现
ASCollectionViewLayoutInspecting协议，严格来说，该协议并不需要实现，但是Texture框架本身却要求必须实现.引用其Demo中的注释The below 2 methods are required by ASCollectionViewLayoutInspecting, but ASCollectionLayout and its layout delegate are the ones that really determine the size ranges and directions，由此可知，ASCollectionLayoutDelegate才是真正决定ASCollectionNode范围和滑动方向的地方。
image.png
3、实现ASCollectionLayoutDelegate(这才是重头戏)
第一步:设置滑动方向
image.png
第二步：返回布局信息
image.png
点击进入该方法的注释，由此可知为什么必须实现
isEqual和hash方法
image.png
第三步：计算每个Item以及header和footer的位置(大部分参考了官方Demo，本人在其基础上进行了修改)
// 真正布局的地方.
+ (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
