流式布局过去也玩很多种,今天来总结一下瀑布流,市面上应该是不那么流行了,不过无奈产品经理喜欢呀~
自定义布局
-
其实需要使用到
UICollectionViewLayout
a、其决定UICollectionView如何将单元格显示 -
实现流程
1、- (void)prepareLayout;
运算所有单元格位置
2、- (CGSize)collectionViewContentSize;
返回运算后视图的总大小
3、- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect;
返回运算后的单元格布局属性(包含悬停的实现部分)
4、- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath;
单元格进行布局时,返回的是要获取的布局属性
5、(nullable UICollectionViewLayoutAttributes *)layoutAttributesForSupplementaryViewOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath;
同上,不同在于,非单元格、是头尾视图
6、- (nullable UICollectionViewLayoutAttributes *)layoutAttributesForDecorationViewOfKind:(NSString*)elementKind atIndexPath:(NSIndexPath *)indexPath;
同上,是装饰视图,若没有不需要重载
7、- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds;
当边界发生变化时,决定是否刷新 -
ok,流程介绍完毕,可以开始有作为了😆~
悬停关键点
- 在于流程3中,保持y坐标对齐顶部
CGFloat headerHeight = CGRectGetHeight(attriture.frame);
CGRect frame = attriture.frame;
frame.origin.y = MIN(MAX(self.collectionView.contentOffset.y, CGRectGetMinY(itemAttribute.frame)-headerHeight-contentInsetOfSection.top),
CGRectGetMinY(itemAttribute.frame)+[_heightOfSections[section] floatValue]);
attriture.frame = frame;
attriture.zIndex = (NSIntegerMax/2)+section;
- 在于流程7中,需要刷新视图,保证对齐
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds {
if (_sectionHeadersPinToVisibleBounds) {
return YES;
}
return [super shouldInvalidateLayoutForBoundsChange:newBounds];
}
预览图
玉兰图🌶也可以下载项目查看~
# [WaterHoverLayout]
网友评论