本笔记主要记录了这几个方面
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
- 创建一个名为YTCollectionViewFlowLayout的继承于UICollectionViewFlowLayout的类。
- 重写 *- (NSArray<UICollectionViewLayoutAttributes *> )layoutAttributesForElementsInRect:(CGRect)rect 方法
- 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;
}
水平有限，只是记录了下自己应用场景🤣
