UICollectionView使用笔记

本笔记主要记录了这几个方面

1.基础布局
2.刷新数据或UI的一些细节操作
3.自定义UICollectionViewFlowLayout达到自定义布局

• 基础布局
  UICollectionViewFlowLayout的默认最小行间距、列间距为10.0；可以通过flowLayout直接访问其属性修改，也可以通过实现对应代理方法进行修改。

😄最初几次用的时候应该都踩过这个坑吧，明明算的好好的itemSize，就是空大了，或者就是少显示一列😄

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{
    return 行间距;
}

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{
    return 列间距;
}

UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];
layout.minimumLineSpacing = 0;
layout.minimumInteritemSpacing = 0;
layout.itemSize = CGSizeMake(80, 80);
//滚动方向
layout.scrollDirection = UICollectionViewScrollDirectionVertical;

• 刷新

    [self.collectionV performBatchUpdates:^{

    } completion:^(BOOL finished) {

    }];

类似tableview的beginUpdate和endUpdate，会给进行的批量更新添加一个过程。

当然，也有相反的情况，我只想默默地修改某处UI、不做任何过渡或动效不需要用户关注的时候，可以这么干

[UICollectionView performWithoutAnimation:^{
        [self.collectionV reloadSections:[NSIndexSet indexSetWithIndex:0]];
    }];

重点、要考的🤣
有些情况下直接[collectionView reloadData]是不能更新UI的，需要重新加载过item之后才会更新。
1、
场景一，删除单个item

/*
  collection执行deleteItems后只会调用numberOfItemsInSection刷新一下item的数量，并不会调用cellForItemAtIndexPath来刷新数据
下次点击某item取的indexPath将是删除操作之前的indexPath
 */
[self.collectionV performBatchUpdates:^{      
     [ws.imagesArr removeObjectAtIndex:indexPath.row];
     [ws.collectionV deleteItemsAtIndexPaths:@[indexPath]];
}completion:^(BOOL finished){
     [ws.collectionV reloadData];
}];

2、
场景二，在第n个row对应的item做了操作，需要更新其他item某一小部分UI，此时只有数据源数组下标n的数据产生了变化。

这时候会发现直接reloadData是不能即时更新UI的，需要下次加载item的时候，重新走过cellForItemAtIndexPath代理方法才会更新，但这样产品是不能买单的😿。
那么，可以reloadSections；虽然即时更新了，但是呼闪那一下似乎不太满意，UI/UE那边应该过不去、、、此时可以在performWithoutAnimation这个block内执行reloadSection达到取消闪烁的目的。该类方法功能就不用说了、、、

[UICollectionView performWithoutAnimation:^{
        [self.collectionV reloadSections:[NSIndexSet indexSetWithIndex:0]];
 }];

• 自定义FlowLayout

1. 创建一个名为YTCollectionViewFlowLayout的继承于UICollectionViewFlowLayout的类。
2. 重写 *- (NSArray<UICollectionViewLayoutAttributes *> )layoutAttributesForElementsInRect:(CGRect)rect 方法
3. layoutAttributesForElementsInRect方法内自行设置显示规则

比如在一屏幕见方的控件里九宫格形式展示图片：

/**
 ！！！显示动态照片用，collection.size就是contentSize,也就是全在视野内
 ！！！除了以下张数照片时，其他时候的itemSize都是 contentSize.width/3 见方，不需要处理
 ！！！动态模型内会计算好此collectionView应有的contentSize
 */
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect{
    
    NSArray <UICollectionViewLayoutAttributes *>*arr = [super layoutAttributesForElementsInRect:rect];
    
    if (arr.count == 6) {
        arr[0].frame = CGRectMake(0, 0, _itemWidth * 2 + _margin, _itemWidth * 2 + _margin);
        arr[1].frame = CGRectMake(CGRectGetMaxX(arr[0].frame) + _margin, 0, _itemWidth, _itemWidth );
        arr[2].frame = CGRectMake(CGRectGetMaxX(arr[0].frame) + _margin, CGRectGetMaxY(arr[1].frame) + _margin, _itemWidth, _itemWidth);
        arr[3].frame = CGRectMake(0,CGRectGetMaxY(arr[0].frame) + _margin, _itemWidth, _itemWidth);
        arr[4].frame = CGRectMake(_itemWidth + _margin, CGRectGetMaxY(arr[0].frame) + _margin, _itemWidth, _itemWidth);
        arr[5].frame = CGRectMake((_itemWidth + _margin) * 2, CGRectGetMaxY(arr[0].frame) + _margin, _itemWidth, _itemWidth);
    }else if (arr.count == 5) {
        arr[0].frame = CGRectMake(0, 0, _SCREENWidth_2,_SCREENWidth_2);
        arr[1].frame = CGRectMake(_SCREENWidth_2 + _margin, 0, _SCREENWidth_2, _SCREENWidth_2);
        arr[2].frame = CGRectMake(0, CGRectGetMaxY(arr[1].frame) + _margin, _itemWidth, _itemWidth);
        arr[3].frame = CGRectMake(_margin + _itemWidth,CGRectGetMaxY(arr[0].frame) + _margin, _itemWidth, _itemWidth);
        arr[4].frame = CGRectMake((_itemWidth + _margin) * 2, CGRectGetMaxY(arr[0].frame) + _margin, _itemWidth, _itemWidth);
    }else if (arr.count == 4) {
        arr[0].frame = CGRectMake(0, 0, _SCREENWidth_2,_SCREENWidth_2);
        arr[1].frame = CGRectMake(_SCREENWidth_2 + _margin, 0, _SCREENWidth_2, _SCREENWidth_2);
        arr[2].frame = CGRectMake(0, CGRectGetMaxY(arr[1].frame) + _margin, _SCREENWidth_2, _SCREENWidth_2);
        arr[3].frame = CGRectMake(_SCREENWidth_2 + _margin, CGRectGetMaxY(arr[0].frame) + _margin, _SCREENWidth_2, _SCREENWidth_2);
    }else if (arr.count == 2) {
        arr[0].frame = CGRectMake(0, 0, _SCREENWidth_2,_SCREENWidth_2);
        arr[1].frame = CGRectMake(_SCREENWidth_2 + _margin, 0, _SCREENWidth_2, _SCREENWidth_2);
    }else if (arr.count == 1) {
        arr[0].frame = CGRectMake(0, 0, SCREEN_Width,SCREEN_Width);
    }
    
    return arr;
}