UICollectionView最大间距

作者: FlyElephant | 来源:发表于2016-06-03 17:59 被阅读1615次

UICollectionView其实在开发中是比较常用,说简单也简单,网上的各种UICollectionView的博客一看,基本上就入门了,但是如果做项目经常会有种UICollectionView怎么这么坑的感觉,前面写过一篇关于UICollectionView自适应的博客UITableView和UICollecionView自适应,有兴趣的可以看一下,本文主要是UICollectionView的单元格是宽高相同设置最大间距和可变单元格的间距设置:

宽高相同设置最大间距

FlyElephant.png

初始化数据:

UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
layout.itemSize = CGSizeMake(100, 40);
layout.minimumInteritemSpacing=0;
layout.sectionInset=UIEdgeInsetsMake(0, 0, 0, 0);
[self.collectionView registerClass:[BookCollectionViewCell class] forCellWithReuseIdentifier:CollectionViewIdentifier];
self.collectionView.backgroundColor      = [UIColor redColor];
self.collectionView.collectionViewLayout = layout;
self.data                                = [NSMutableArray array];

[self.data addObject:@"北京"];
[self.data addObject:@"FlyElephant"];
[self.data addObject:@"编程"];
[self.data addObject:@"加班"];
[self.data addObject:@"Objective-C"];
[self.data addObject:@"iOS"];
[self.data addObject:@"UICollectioView自适应"];

}

UICollectionViewDataSource:
<pre><code>`

  • (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    return 1;
    }

  • (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return [self.data count];
    }

  • (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    BookCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:CollectionViewIdentifier forIndexPath:indexPath];
    cell.contentLabel.text = self.data[indexPath.row];
    return cell;
    }`</code></pre>

上面是一个最普通的UICollectionView的布局,我们已经设置最小间距是0和边距,事实上间距是iOS帮我们计算出来布局的,如果我们想设置相邻的单元为我们想要的间距就需要设置最大间距,效果如下:

FlyElephant.png

这时候需要自定义UICollectionViewFlowLayout,重写layoutAttributesForElementsInRect方法:

<pre><code>`

-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect{
NSMutableArray *attributes = [[super layoutAttributesForElementsInRect:rect] mutableCopy];

//注意起始值
for(NSInteger i = 1; i < [attributes count]; i++){

    UICollectionViewLayoutAttributes *currentLayoutAttributes = attributes[i];
    
    UICollectionViewLayoutAttributes *prevLayoutAttributes = attributes[i - 1];
    
    NSInteger origin = CGRectGetMaxX(prevLayoutAttributes.frame);

    if(origin + ITEM_SPACING + currentLayoutAttributes.frame.size.width < self.collectionViewContentSize.width){
        CGRect frame = currentLayoutAttributes.frame;
        frame.origin.x = origin + ITEM_SPACING;
        currentLayoutAttributes.frame = frame;
    }
}

return attributes;

}
`</code></pre>

可变单元格设置最大间距

FlyElephant.png

这里主要设置了预估大小,如果不太清楚,可以参考开头的文章链接,参考代码:

FECollectionViewFlowLayout *layout = [[FECollectionViewFlowLayout alloc] init];
layout.estimatedItemSize = CGSizeMake(100, 40);

layout.minimumInteritemSpacing=0;
layout.sectionInset=UIEdgeInsetsMake(0, 0, 0, 0);
[self.collectionView registerClass:[BookCollectionViewCell class] forCellWithReuseIdentifier:CollectionViewIdentifier];
self.collectionView.backgroundColor      = [UIColor redColor];
self.collectionView.collectionViewLayout = layout;
self.data                                = [NSMutableArray array];

[self.data addObject:@"北京"];
[self.data addObject:@"FlyElephant"];
[self.data addObject:@"编程"];
[self.data addObject:@"加班"];
[self.data addObject:@"Objective-C"];
[self.data addObject:@"iOS"];
[self.data addObject:@"UICollectioView自适应"];

这里面有个坑就是如果按照上面的方式去设置最大间距,你会发现是没有任何效果的,这个坑才进去花了两个小时爬出来,解决方案很简单,自定义FECollectionViewFlowLayout重写layoutAttributesForItemAtIndexPath方法:
<pre><code>`

  • (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {
    UICollectionViewLayoutAttributes *layoutAttribute = [super layoutAttributesForItemAtIndexPath:indexPath];
    if (layoutAttribute.frame.origin.x == self.sectionInset.left) {
    return layoutAttribute;
    }

    NSIndexPath *previousIndexPath = [NSIndexPath indexPathForRow:indexPath.row-1 inSection:indexPath.section];
    UICollectionViewLayoutAttributes *previousLayoutAttribute = [self layoutAttributesForItemAtIndexPath:previousIndexPath];
    CGRect frame = layoutAttribute.frame;
    frame.origin.x = CGRectGetMaxX(previousLayoutAttribute.frame)+0;
    layoutAttribute.frame = frame;
    return layoutAttribute;

}`</code></pre>

如果觉得文章还不错,同时觉得本人还不错,可以关注本人的GitHub:FlyElephant的GitHub,当然也可以选择加入228407086群~

相关文章

网友评论

  • 英俊神武:我觉得大多数需要应该是间距相等,你这里没有实现
  • 149a7611396f:多个section会出问题,加个判断
    UICollectionViewLayoutAttributes *currentLayoutAttributes = attributes[i];
    if (currentLayoutAttributes.indexPath.row == 0) {
    continue;
    }

  • Hanfank:优化了一下代码
    加了一个判断,如果遇到分组就不修改,遇到cell修改
    -(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect{
    NSMutableArray *attributes = [[super layoutAttributesForElementsInRect:rect] mutableCopy];

    //注意起始值
    for(NSInteger i = 1; i < [attributes count]; i++){

    UICollectionViewLayoutAttributes *currentLayoutAttributes = attributes[i];

    UICollectionViewLayoutAttributes *prevLayoutAttributes = attributes[i - 1];

    NSInteger prevorigin = CGRectGetMaxX(prevLayoutAttributes.frame);


    NSInteger curIndex = currentLayoutAttributes.indexPath.section;
    NSInteger preIndex = prevLayoutAttributes.indexPath.section;

    if (curIndex != preIndex) {
    continue;
    }

    if(prevorigin + 10 + currentLayoutAttributes.frame.size.width < self.collectionViewContentSize.width-20){
    CGRect frame = currentLayoutAttributes.frame;
    frame.origin.x = prevorigin + 10;
    currentLayoutAttributes.frame = frame;
    }

    }

    return attributes;
    }
  • 小熊翻译App:亲,写的太麻烦了,那个items的间距怎么保持一致
    英俊神武:间距相等的问题解决了吗
  • 逾期的誓言:大神,请教你个问题,collection View 设置多个分组的 给header 一定高度,就崩了,能指导指导么
  • 大脸猫xiao3:1.最后一段代码中
    frame.origin.x = CGRectGetMaxX(previousLayoutAttribute.frame)+0;

    后面是不是应该+ ITEM_SPACING

    2.最后这个方法代码layoutAttributesForItemAtIndexPath:是没有调用的,刚才试了下,小白不懂,但是效果是出来了,设置成了maxSpeacing效果。
    FlyElephant:@大脸猫xiao3 代码地址:https://github.com/SmallElephant/FESelfSizing
    大脸猫xiao3:@FlyElephant 只有这个方法的话也是没执行,目前使用反悔array的方法达到了效果
    FlyElephant:@大脸猫xiao3 对,第二个应该是你的FlowLayOut有其他方法,只保留layoutAttributesForItemAtIndexPath是没有问题的~
  • 大脸猫xiao3:请问有没有demo,一直困扰这个问题

本文标题:UICollectionView最大间距

本文链接:https://www.haomeiwen.com/subject/czqldttx.html