内容字号:默认大号超大号

段落设置:段首缩进取消段首缩进

字体设置:切换到微软雅黑切换到宋体

CollectionView FlowLayout瀑布流(可同时存在不同列数)

2018-03-12 17:16 出处:清屏网 人气: 评论(0

最终效果

不定列数瀑布流

介绍

瀑布流的自定义的一般流程请参考另外一篇文章,比较详细,我也不继续解释。 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的宽度还是相等的。

demo 地址

demo百度云链接

分享给小伙伴们:
本文标签: CollectionViFlowLayout瀑布流

相关文章

发表评论愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。

CopyRight © 2015-2016 QingPingShan.com , All Rights Reserved.

清屏网 版权所有 豫ICP备15026204号