CollectionView FlowLayout 瀑布流(可同
2018-02-28 本文已影响53人
34码的小孩子
最终效果
不定列数瀑布流
介绍
瀑布流的自定义的一般流程请参考另外一篇文章，比较详细，我也不继续解释。ios - 用UICollectionView实现瀑布流详解
网上能搜索到的瀑布流一般都是相同列数的文章，而因项目需求，需要在同一个collectionView 能实现不同列数的瀑布流。譬如：一个collectionView可以同时存在 1、2、3.……列的瀑布流。
分析
为了方便控制，不同列数的cell用section来区分，而同一个section的cell的布局就可以跟固定列数的瀑布流一样。
然后下面来了解一下，哪些内容是在计算cell的位置必须要知道的，方便作为属性或者是delegate的方式公开出去。(备注：自定义flowlayout发现了一件奇怪的事情：如果设置了collectionView.contentInset, viewController竟然会不调用dataSource的cellForItemAtIndexPath方法，导致collectionView一片空白，至今没有找到原因。)
必要项
- numberOfSections: section的个数
- numberOfColumnInSection: 每个section的列数
- size: 每个cell的大小size，如果全部cell宽度相等的话，可以考虑只是获取高度。
可选项
- contentInset: 为了解决上面说的情况，自己添加了一个属性来替代collectionView.contentInset。（可以在创建对象时直接设置）
- lineSpacing: 每一行的间距
- itemSpace: 每一列的间距
- sectionInset: 代替collectionView 的sectionInset。
除了contentInset之外，其他属性对于不同section不一定相同，所以使用协议的方式比较好。
实现
.h 文件
根据上面的分析，可以定义layout相关的协议，只有实现该协议的，才能得到瀑布流布局。
#import <UIKit/UIKit.h>
@protocol WatchFlowLayoutDelegate <NSObject>
@optional
// 行间距
- (CGFloat)minimumLineSpacingForSectionAtIndex:(NSInteger)section;
// 列间距
- (CGFloat)minimumInteritemSpacingForSectionAtIndex:(NSInteger)section;
// sectionInset
- (UIEdgeInsets)contentInsetOfSectionAtIndex:(NSInteger)section;
@required
// section的数量
- (NSInteger)numberOfSection;
// cell的大小
- (CGSize)sizeForItemAtIndexPath:(NSIndexPath *)indexPath;
// section的列数
- (NSInteger)numberOfColumnInSectionAtIndex:(NSInteger)section;
@end
@interface WatchFlowLayout : UICollectionViewLayout
@property (nonatomic, weak) id<WatchFlowLayoutDelegate> flowDelegate;
// 代替collectionView.contentInset
@property (nonatomic, assign) UIEdgeInsets contentInset;
@end
.m 文件
为了保存信息，设置了下面的几个属性。
- maxYOfColumns: 保存section每一列的最大的Y值，然后获取到最短的一列，将下一个cell放在该列中。
- layoutAttributes: 保存所有cell的frame等信息，决定cell的布局。
- contentHeight：保存collectionView的bouns的高度，决定collectionView竖向滑动的长度。
#import "WatchFlowLayout.h"
@interface WatchFlowLayout()
// 保存section每一列的最大的Y值，然后获取到最短的一列，将下一个cell放在该列中。
@property (nonatomic, strong) NSMutableArray *maxYOfColumns;
// 保存所有cell的位置信息
@property (nonatomic, strong) NSMutableArray *layoutAttributes;
// 保存collectionView的bouns的高度。
@property (nonatomic, assign) CGFloat contentHeight;
@end
prepareLayout方法中计算出所有cell的位置。
@implementation WatchFlowLayout
- (void)prepareLayout {
[super prepareLayout];
// 没有代理，没法布局。
if (_flowDelegate == nil) {
NSLog(@"需要代理");
return;
}
// 重新赋值，清除上一次计算的数据。
_contentHeight = self.contentInset.top;
_layoutAttributes = [NSMutableArray new];
// 使用delegate获取section的数量
NSInteger numberOfSection = [_flowDelegate numberOfSection];
for (int section = 0; section < numberOfSection; section++) {
NSMutableArray *sectionLayoutAttributes = [self computeLayoutAttributesInSection:section];
[_layoutAttributes addObjectsFromArray:sectionLayoutAttributes];
}
}
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {
// 返回每个cell的位置信息等
NSInteger section = indexPath.section;
NSArray *sectionLayoutAttributes = _layoutAttributes[section];
return sectionLayoutAttributes[indexPath.row];
}
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {
return _layoutAttributes;
}
- (CGSize)collectionViewContentSize {
// 返回collectionView滑动的大小，因为横向没有滑动，X值不重要，也可以返回0
return CGSizeMake(0.0, _contentHeight + self.contentInset.bottom);
}
自定义的方法来计算每个section所有cell的frame
/**
计算每个section的位置信息
@param section section
@return 与位置相关的信息。
*/
- (NSMutableArray *)computeLayoutAttributesInSection:(NSInteger)section {
// 获取section的列数和cell的个数
NSInteger column = [_flowDelegate numberOfColumnInSectionAtIndex:section];
NSInteger itemCount = [self.collectionView numberOfItemsInSection:section];
NSMutableArray *attributesArr = [NSMutableArray new];
CGFloat itemSpace = 0.0;
CGFloat lineSpace = 0.0;
UIEdgeInsets sectionInset;
// 获取间距等信息，下面计算位置时需要用到
// 因为是可选的实现方法，在直接使用时需要判断是否已经实现了。
if ([_flowDelegate respondsToSelector:@selector(contentInsetOfSectionAtIndex:)]) {
sectionInset = [_flowDelegate contentInsetOfSectionAtIndex:section];
}
if ([_flowDelegate respondsToSelector:@selector(minimumLineSpacingForSectionAtIndex:)]) {
itemSpace = [_flowDelegate minimumInteritemSpacingForSectionAtIndex:section];
}
if ([_flowDelegate respondsToSelector:@selector(minimumLineSpacingForSectionAtIndex:)]) {
lineSpace = [_flowDelegate minimumLineSpacingForSectionAtIndex:section];
}
// 留出每个section的顶部与上一个section的距离
_contentHeight += sectionInset.top;
if (column == 1) {
// 一列，cell会占满屏幕
for (int index = 0; index < itemCount; index++) {
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:index inSection:section];
UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath: indexPath];
// 获取cell的大小
CGSize size = [_flowDelegate sizeForItemAtIndexPath:indexPath];
// 为了让collectionView.contentInset和sectionInset有效果，需要将width减去这个两个inset的左右的数值
attributes.frame = CGRectMake(self.contentInset.left + sectionInset.left, _contentHeight, size.width - self.contentInset.left - self.contentInset.right - sectionInset.left - sectionInset.right, size.height);
[attributesArr addObject:attributes];
// 保存下一个cell的Y轴的数值
_contentHeight += attributes.size.height + lineSpace;
}
// 减去最后一行底部添加的lineSpace
_contentHeight += (sectionInset.bottom - lineSpace);
return attributesArr;
}
// 不止一列时
// 保存每一个最后一个Cell的底部Y轴的数值
_maxYOfColumns = [NSMutableArray new];
for (int i = 0; i < column; i++) {
self.maxYOfColumns[i] = @(0);
}
CGSize size;
CGFloat x = 0.0;
CGFloat y = 0.0;
NSInteger currentColumn = 0;
CGFloat width = 0.0;
for (int index = 0; index < itemCount; index++) {
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:index inSection:section];
size = [_flowDelegate sizeForItemAtIndexPath:indexPath];
if (index < column) {
// 第一行直接添加到当前的列
currentColumn = index;
} else {// 其他行添加到最短的那一列
// 这里使用!会得到期望的值
NSNumber *minMaxY = [_maxYOfColumns valueForKeyPath:@"@min.self"];
currentColumn = [_maxYOfColumns indexOfObject:minMaxY];
}
// 根据列数计算出每个cell的宽度
width = (self.collectionView.bounds.size.width - itemSpace * (column - 1) - self.contentInset.left - self.contentInset.right - sectionInset.left - sectionInset.right) / column;
// 根据将cell放在那一列，来计算出x坐标
x = self.contentInset.left + sectionInset.left + currentColumn * (width + itemSpace);
// 每个cell的y坐标
y = lineSpace + [_maxYOfColumns[currentColumn] floatValue];
// 记录每一列的最后一个cell的最大Y
_maxYOfColumns[currentColumn] = @(y + size.height);
UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath: indexPath];
// 设置用于瀑布流效果的attributes的frame
attributes.frame = CGRectMake(x, y + _contentHeight, width, size.height);
[attributesArr addObject:attributes];
}
// 将所有列最大的Y值作为整个collectionView.cententSize的高度
CGFloat maxY = [[_maxYOfColumns valueForKeyPath:@"@max.self"] floatValue];
_contentHeight += maxY + sectionInset.bottom;
return attributesArr;
}
@end
使用方法 （示例在ViewController）
@interface ViewController () <UICollectionViewDelegate, UICollectionViewDataSource, WatchFlowLayoutDelegate>
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// 创建layout对象，并设置delegate和 collectionView.contentInset
WatchFlowLayout *layout = [WatchFlowLayout new];
layout.flowDelegate = self;
layout.contentInset = UIEdgeInsetsMake(20, 10, 40, 10);
_collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 100, self.view.bounds.size.width, self.view.bounds.size.height - 100)
collectionViewLayout:layout];
}
实现layout的协议——WatchFlowLayoutDelegate
#pragma mark - WatchFlowLayoutDelegate
- (NSInteger)numberOfSection {
return [self numberOfSectionsInCollectionView:_collectionView];
}
- (NSInteger)numberOfColumnInSectionAtIndex:(NSInteger)section {
if (section == 1) {
return 2;
}
else if (section == 3) {
return 3;
}
return 1;
}
- (CGSize)sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
if (indexPath.section == 1 || indexPath.section == 3) {
// [40,160)随机数
CGFloat height = 40 + arc4random() % (160 - 40 + 1);
return CGSizeMake(0, height);
}
return CGSizeMake(_collectionView.bounds.size.width, 100);
}
- (CGFloat)minimumLineSpacingForSectionAtIndex:(NSInteger)section {
if (section == 1 || section == 3) {
return 10;
}
return 4.0;
}
- (CGFloat)minimumInteritemSpacingForSectionAtIndex:(NSInteger)section {
if (section == 1 || section == 3) {
return 10;
}
return 0.0;
}
- (UIEdgeInsets)contentInsetOfSectionAtIndex:(NSInteger)section {
if (section == 1 || section == 3) {
return UIEdgeInsetsMake(0, 0, 10, 0);
}
return UIEdgeInsetsZero;
}
疑问
重点标注一下我发现的一个问题，如果简友们知道是什么原因，请评论一下或者私信我，谢谢！
问题：自定义flowlayout发现了一件奇怪的事情：如果设置了collectionView.contentInset, viewController竟然会不调用dataSource的cellForItemAtIndexPath方法，导致collectionView一片空白，至今没有找到原因。
扩展
简友可以试一下，如果多行多列没什么规律，就是每一行和每一列的宽或者高都不一致的时候，如何自定义瀑布流。
毕竟，这篇文章中每个section的宽度还是相等的。
