iOS UICollectionView布局系统(19)

一、iOS UICollectionView布局系统概述

iOS UICollectionView是一种强大的视图组件，用于展示大量数据项并支持各种布局方式。与UITableView相比，UICollectionView提供了更灵活的布局能力，可以实现网格、瀑布流、圆形等各种复杂布局。本文将从源码级别深入分析UICollectionView的布局系统与自定义FlowLayout，包括布局管理器的基本原理、FlowLayout的实现机制以及如何自定义布局等方面。

二、UICollectionView布局系统的基本架构

2.1 核心组件

UICollectionView的布局系统主要由以下几个核心组件构成：

UICollectionView：作为容器视图，负责管理和显示数据项。
UICollectionViewLayout：抽象基类，定义了布局管理器的基本接口和行为。
UICollectionViewFlowLayout：苹果提供的默认布局实现，支持网格和线性布局。
UICollectionViewLayoutAttributes：存储每个元素（单元格、补充视图、装饰视图）的布局信息，如位置、大小、透明度等。
UICollectionViewCell：数据项的视图表示。
UICollectionReusableView：补充视图和装饰视图的基类，用于展示头部、尾部等附加信息。

2.2 布局系统的工作流程

UICollectionView的布局系统工作流程可以概括为以下几个步骤：

准备布局：UICollectionView调用布局管理器的prepare()方法，布局管理器在此方法中进行必要的初始化和计算。
生成布局属性：布局管理器为每个元素（单元格、补充视图、装饰视图）生成对应的UICollectionViewLayoutAttributes对象，并存储在内部数据结构中。
提供布局属性：当UICollectionView需要显示某个元素时，会调用布局管理器的layoutAttributesForItem(at:)、layoutAttributesForSupplementaryView(ofKind:at:)等方法获取对应的布局属性。
应用布局属性：UICollectionView根据获取的布局属性设置元素的位置、大小等属性，将元素显示在正确的位置。
更新布局：当布局需要更新时（如滚动、旋转屏幕等），UICollectionView会重新调用布局管理器的相关方法，生成新的布局属性并应用到元素上。

三、UICollectionViewLayout基类分析

3.1 主要方法

UICollectionViewLayout是所有布局管理器的基类，它定义了布局管理器的基本接口和行为。以下是UICollectionViewLayout的一些主要方法：

// 准备布局，在这个方法中进行必要的初始化和计算
open func prepare()// 返回collectionView的内容尺寸
open var collectionViewContentSize: CGSize { get }// 返回指定indexPath的单元格的布局属性
open func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes?// 返回指定类型和indexPath的补充视图的布局属性
open func layoutAttributesForSupplementaryView(ofKind elementKind: String, at indexPath: IndexPath) -> UICollectionViewLayoutAttributes?// 返回指定类型和indexPath的装饰视图的布局属性
open func layoutAttributesForDecorationView(ofKind elementKind: String, at indexPath: IndexPath) -> UICollectionViewLayoutAttributes?// 返回rect范围内所有元素的布局属性
open func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]?// 当边界发生变化时，是否应该更新布局
open func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool// 返回布局更新的上下文
open func invalidationContext(forBoundsChange newBounds: CGRect) -> UICollectionViewLayoutInvalidationContext// 应用布局更新的上下文
open func invalidateLayout(with context: UICollectionViewLayoutInvalidationContext)

3.2 源码分析

在源码级别，UICollectionViewLayout的核心实现可以简化为以下代码表示：

// 简化的UICollectionViewLayout源码表示@interface UICollectionViewLayout () {UICollectionView *_collectionView; // 关联的collectionViewNSMutableDictionary<NSString *, NSMutableArray<UICollectionViewLayoutAttributes *> *> *_layoutAttributes; // 布局属性字典CGSize _contentSize; // 内容尺寸BOOL _isPrepared; // 是否已准备好
}// 初始化方法
- (instancetype)init {self = [super init];if (self) {_layoutAttributes = [NSMutableDictionary dictionary];_contentSize = CGSizeZero;_isPrepared = NO;}return self;
}// 准备布局
- (void)prepare {// 重置布局属性[_layoutAttributes removeAllObjects];// 子类实现具体的布局计算逻辑[self _calculateLayoutAttributes];_isPrepared = YES;
}// 计算布局属性
- (void)_calculateLayoutAttributes {// 由子类实现具体的布局计算逻辑
}// 返回collectionView的内容尺寸
- (CGSize)collectionViewContentSize {return _contentSize;
}// 返回指定indexPath的单元格的布局属性
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {NSString *key = [self _keyForItemAtIndexPath:indexPath];return [_layoutAttributes[key] firstObject];
}// 返回rect范围内所有元素的布局属性
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {NSMutableArray<UICollectionViewLayoutAttributes *> *result = [NSMutableArray array];// 遍历所有布局属性，找出在rect范围内的属性for (NSString *key in _layoutAttributes.allKeys) {for (UICollectionViewLayoutAttributes *attributes in _layoutAttributes[key]) {if (CGRectIntersectsRect(attributes.frame, rect)) {[result addObject:attributes];}}}return result;
}// 当边界发生变化时，是否应该更新布局
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds {// 默认实现是不更新布局，由子类根据需要重写return NO;
}// 使布局无效，触发重新布局
- (void)invalidateLayout {_isPrepared = NO;[self.collectionView setNeedsLayout];
}// 生成布局属性的键
- (NSString *)_keyForItemAtIndexPath:(NSIndexPath *)indexPath {return [NSString stringWithFormat:@"item_%ld_%ld", (long)indexPath.section, (long)indexPath.item];
}// 生成布局属性的键
- (NSString *)_keyForSupplementaryViewOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath {return [NSString stringWithFormat:@"supplementary_%@_%ld_%ld", kind, (long)indexPath.section, (long)indexPath.item];
}// 生成布局属性的键
- (NSString *)_keyForDecorationViewOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath {return [NSString stringWithFormat:@"decoration_%@_%ld_%ld", kind, (long)indexPath.section, (long)indexPath.item];
}@end

四、UICollectionViewFlowLayout实现原理

4.1 基本概念

UICollectionViewFlowLayout是苹果提供的默认布局实现，它支持网格和线性布局，具有以下特点：

支持水平和垂直滚动方向
支持设置行间距和项间距
支持设置section的内边距
支持设置header和footer
支持自动计算单元格大小或自定义单元格大小
支持不同section使用不同的布局参数

4.2 核心属性

UICollectionViewFlowLayout的核心属性包括：

// 滚动方向
open var scrollDirection: UICollectionView.ScrollDirection = .vertical// 最小行间距
open var minimumLineSpacing: CGFloat = 10// 最小项间距
open var minimumInteritemSpacing: CGFloat = 10// 单元格大小
open var itemSize: CGSize = CGSize(width: 50, height: 50)// 自动计算单元格大小
open var estimatedItemSize: CGSize = CGSize.zero// section的内边距
open var sectionInset: UIEdgeInsets = .zero// header的参考大小
open var headerReferenceSize: CGSize = .zero// footer的参考大小
open var footerReferenceSize: CGSize = .zero// section的背景装饰视图
open var sectionFootersPinToVisibleBounds: Bool = false
open var sectionHeadersPinToVisibleBounds: Bool = false

4.3 源码分析

在源码级别，UICollectionViewFlowLayout的核心实现可以简化为以下代码表示：

// 简化的UICollectionViewFlowLayout源码表示@interface UICollectionViewFlowLayout () {UICollectionViewScrollDirection _scrollDirection; // 滚动方向CGFloat _minimumLineSpacing; // 最小行间距CGFloat _minimumInteritemSpacing; // 最小项间距CGSize _itemSize; // 单元格大小CGSize _estimatedItemSize; // 估计的单元格大小UIEdgeInsets _sectionInset; // section的内边距CGSize _headerReferenceSize; // header的参考大小CGSize _footerReferenceSize; // footer的参考大小BOOL _sectionHeadersPinToVisibleBounds; // header是否固定在可见区域顶部BOOL _sectionFootersPinToVisibleBounds; // footer是否固定在可见区域底部NSMutableDictionary<NSNumber *, NSMutableArray<UICollectionViewLayoutAttributes *> *> *_itemAttributes; // 单元格布局属性NSMutableDictionary<NSNumber *, UICollectionViewLayoutAttributes *> *_headerAttributes; // header布局属性NSMutableDictionary<NSNumber *, UICollectionViewLayoutAttributes *> *_footerAttributes; // footer布局属性CGSize _contentSize; // 内容大小
}// 准备布局
- (void)prepare {[super prepare];// 重置布局属性[_itemAttributes removeAllObjects];[_headerAttributes removeAllObjects];[_footerAttributes removeAllObjects];// 获取collectionView的section数量NSInteger numberOfSections = [self.collectionView numberOfSections];if (numberOfSections == 0) {_contentSize = CGSizeZero;return;}// 当前位置CGFloat currentOffset = 0;// 计算每个section的布局for (NSInteger section = 0; section < numberOfSections; section++) {// 计算header的布局UICollectionViewLayoutAttributes *headerAttributes = [self _layoutAttributesForHeaderInSection:section withOffset:¤tOffset];if (headerAttributes) {_headerAttributes[@(section)] = headerAttributes;}// 计算section的内边距UIEdgeInsets sectionInset = [self _sectionInsetForSection:section];// 计算单元格的布局NSInteger numberOfItems = [self.collectionView numberOfItemsInSection:section];NSMutableArray<UICollectionViewLayoutAttributes *> *sectionItemAttributes = [NSMutableArray array];if (numberOfItems > 0) {// 根据滚动方向计算单元格布局if (_scrollDirection == UICollectionViewScrollDirectionVertical) {[self _calculateVerticalLayoutForSection:section numberOfItems:numberOfItems sectionInset:sectionInset currentOffset:¤tOffset itemAttributes:sectionItemAttributes];} else {[self _calculateHorizontalLayoutForSection:section numberOfItems:numberOfItems sectionInset:sectionInset currentOffset:¤tOffset itemAttributes:sectionItemAttributes];}_itemAttributes[@(section)] = sectionItemAttributes;}// 计算footer的布局UICollectionViewLayoutAttributes *footerAttributes = [self _layoutAttributesForFooterInSection:section withOffset:¤tOffset];if (footerAttributes) {_footerAttributes[@(section)] = footerAttributes;}}// 设置内容大小if (_scrollDirection == UICollectionViewScrollDirectionVertical) {_contentSize = CGSizeMake(self.collectionView.bounds.size.width, currentOffset);} else {_contentSize = CGSizeMake(currentOffset, self.collectionView.bounds.size.height);}
}// 计算垂直滚动方向的布局
- (void)_calculateVerticalLayoutForSection:(NSInteger)section numberOfItems:(NSInteger)numberOfItems sectionInset:(UIEdgeInsets)sectionInset currentOffset:(CGFloat *)currentOffset itemAttributes:(NSMutableArray<UICollectionViewLayoutAttributes *> *)itemAttributes {// 获取section的宽度CGFloat sectionWidth = self.collectionView.bounds.size.width - sectionInset.left - sectionInset.right;// 计算每行可放置的单元格数量NSInteger itemsPerRow = [self _itemsPerRowForSection:section withWidth:sectionWidth];// 计算实际的项间距CGFloat interitemSpacing = [self _interitemSpacingForSection:section withItemsPerRow:itemsPerRow sectionWidth:sectionWidth];// 获取单元格大小CGSize itemSize = [self _itemSizeForSection:section];// 当前行的Y坐标CGFloat currentY = *currentOffset + sectionInset.top;// 当前行的项数NSInteger currentRowItems = 0;// 当前行的最大高度CGFloat currentRowMaxHeight = 0;// 计算每个单元格的位置for (NSInteger item = 0; item < numberOfItems; item++) {// 计算当前单元格的列和行NSInteger column = currentRowItems % itemsPerRow;NSInteger row = currentRowItems / itemsPerRow;// 如果是新的一行，更新Y坐标if (column == 0 && row > 0) {currentY += currentRowMaxHeight + _minimumLineSpacing;currentRowMaxHeight = 0;}// 计算单元格的X坐标CGFloat x = sectionInset.left + column * (itemSize.width + interitemSpacing);// 创建布局属性NSIndexPath *indexPath = [NSIndexPath indexPathForItem:item inSection:section];UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];attributes.frame = CGRectMake(x, currentY, itemSize.width, itemSize.height);// 添加到数组[itemAttributes addObject:attributes];// 更新当前行的项数和最大高度currentRowItems++;if (itemSize.height > currentRowMaxHeight) {currentRowMaxHeight = itemSize.height;}}// 更新当前偏移量*currentOffset = currentY + currentRowMaxHeight + sectionInset.bottom;
}// 计算水平滚动方向的布局
- (void)_calculateHorizontalLayoutForSection:(NSInteger)section numberOfItems:(NSInteger)numberOfItems sectionInset:(UIEdgeInsets)sectionInset currentOffset:(CGFloat *)currentOffset itemAttributes:(NSMutableArray<UICollectionViewLayoutAttributes *> *)itemAttributes {// 获取section的高度CGFloat sectionHeight = self.collectionView.bounds.size.height - sectionInset.top - sectionInset.bottom;// 计算每列可放置的单元格数量NSInteger itemsPerColumn = [self _itemsPerColumnForSection:section withHeight:sectionHeight];// 计算实际的行间距CGFloat lineSpacing = [self _lineSpacingForSection:section withItemsPerColumn:itemsPerColumn sectionHeight:sectionHeight];// 获取单元格大小CGSize itemSize = [self _itemSizeForSection:section];// 当前列的X坐标CGFloat currentX = *currentOffset + sectionInset.left;// 当前列的项数NSInteger currentColumnItems = 0;// 当前列的最大宽度CGFloat currentColumnMaxWidth = 0;// 计算每个单元格的位置for (NSInteger item = 0; item < numberOfItems; item++) {// 计算当前单元格的行和列NSInteger row = currentColumnItems % itemsPerColumn;NSInteger column = currentColumnItems / itemsPerColumn;// 如果是新的一列，更新X坐标if (row == 0 && column > 0) {currentX += currentColumnMaxWidth + _minimumInteritemSpacing;currentColumnMaxWidth = 0;}// 计算单元格的Y坐标CGFloat y = sectionInset.top + row * (itemSize.height + lineSpacing);// 创建布局属性NSIndexPath *indexPath = [NSIndexPath indexPathForItem:item inSection:section];UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];attributes.frame = CGRectMake(currentX, y, itemSize.width, itemSize.height);// 添加到数组[itemAttributes addObject:attributes];// 更新当前列的项数和最大宽度currentColumnItems++;if (itemSize.width > currentColumnMaxWidth) {currentColumnMaxWidth = itemSize.width;}}// 更新当前偏移量*currentOffset = currentX + currentColumnMaxWidth + sectionInset.right;
}// 返回collectionView的内容尺寸
- (CGSize)collectionViewContentSize {return _contentSize;
}// 返回指定indexPath的单元格的布局属性
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {return [_itemAttributes[@(indexPath.section)] objectAtIndex:indexPath.item];
}// 返回指定类型和indexPath的补充视图的布局属性
- (UICollectionViewLayoutAttributes *)layoutAttributesForSupplementaryViewOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath {if ([elementKind isEqualToString:UICollectionElementKindSectionHeader]) {return _headerAttributes[@(indexPath.section)];} else if ([elementKind isEqualToString:UICollectionElementKindSectionFooter]) {return _footerAttributes[@(indexPath.section)];}return nil;
}// 返回rect范围内所有元素的布局属性
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {NSMutableArray<UICollectionViewLayoutAttributes *> *result = [NSMutableArray array];// 获取可能包含在rect中的section范围NSRange sectionRange = [self _sectionRangeForRect:rect];// 遍历sectionfor (NSInteger section = sectionRange.location; section <= sectionRange.location + sectionRange.length - 1; section++) {// 添加headerUICollectionViewLayoutAttributes *headerAttributes = _headerAttributes[@(section)];if (headerAttributes && CGRectIntersectsRect(headerAttributes.frame, rect)) {[result addObject:headerAttributes];}// 添加单元格NSArray<UICollectionViewLayoutAttributes *> *sectionItemAttributes = _itemAttributes[@(section)];if (sectionItemAttributes) {for (UICollectionViewLayoutAttributes *attributes in sectionItemAttributes) {if (CGRectIntersectsRect(attributes.frame, rect)) {[result addObject:attributes];}}}// 添加footerUICollectionViewLayoutAttributes *footerAttributes = _footerAttributes[@(section)];if (footerAttributes && CGRectIntersectsRect(footerAttributes.frame, rect)) {[result addObject:footerAttributes];}}return result;
}// 当边界发生变化时，是否应该更新布局
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds {// 如果滚动方向是垂直的，且宽度发生了变化，或者滚动方向是水平的，且高度发生了变化，则需要更新布局if ((_scrollDirection == UICollectionViewScrollDirectionVertical && newBounds.size.width != self.collectionView.bounds.size.width) ||(_scrollDirection == UICollectionViewScrollDirectionHorizontal && newBounds.size.height != self.collectionView.bounds.size.height)) {return YES;}// 如果header或footer固定在可见区域，则需要更新布局if (_sectionHeadersPinToVisibleBounds || _sectionFootersPinToVisibleBounds) {return YES;}return NO;
}@end

五、UICollectionViewLayoutAttributes分析

5.1 基本概念

UICollectionViewLayoutAttributes是一个存储布局信息的类，它包含了元素（单元格、补充视图、装饰视图）的位置、大小、透明度、变换等属性。每个元素都有一个对应的UICollectionViewLayoutAttributes对象，布局管理器通过这个对象来控制元素的显示位置和样式。

5.2 主要属性

UICollectionViewLayoutAttributes的主要属性包括：

// 元素的索引路径
open var indexPath: IndexPath { get }// 元素的类型（单元格、补充视图、装饰视图）
open var representedElementCategory: UICollectionView.ElementCategory { get }// 补充视图或装饰视图的类型
open var representedElementKind: String? { get }// 元素的frame
open var frame: CGRect { get set }// 元素的center
open var center: CGPoint { get set }// 元素的size
open var size: CGSize { get set }// 元素的transform
open var transform3D: CATransform3D { get set }// 元素的alpha值
open var alpha: CGFloat { get set }// 元素的zIndex
open var zIndex: Int { get set }// 元素是否隐藏
open var isHidden: Bool { get set }

5.3 源码分析

在源码级别，UICollectionViewLayoutAttributes的核心实现可以简化为以下代码表示：

// 简化的UICollectionViewLayoutAttributes源码表示@interface UICollectionViewLayoutAttributes () {NSIndexPath *_indexPath; // 索引路径UICollectionViewElementCategory _representedElementCategory; // 元素类别NSString *_representedElementKind; // 元素类型CGRect _frame; // 框架CGPoint _center; // 中心点CGSize _size; // 大小CATransform3D _transform3D; // 3D变换CGFloat _alpha; // 透明度NSInteger _zIndex; // Z轴索引BOOL _isHidden; // 是否隐藏
}// 初始化方法
- (instancetype)init {self = [super init];if (self) {_frame = CGRectZero;_center = CGPointZero;_size = CGSizeZero;_transform3D = CATransform3DIdentity;_alpha = 1.0;_zIndex = 0;_isHidden = NO;}return self;
}// 创建单元格的布局属性
+ (instancetype)layoutAttributesForCellWithIndexPath:(NSIndexPath *)indexPath {UICollectionViewLayoutAttributes *attributes = [[self alloc] init];attributes->_indexPath = indexPath;attributes->_representedElementCategory = UICollectionViewElementCategoryCell;return attributes;
}// 创建补充视图的布局属性
+ (instancetype)layoutAttributesForSupplementaryViewOfKind:(NSString *)elementKind withIndexPath:(NSIndexPath *)indexPath {UICollectionViewLayoutAttributes *attributes = [[self alloc] init];attributes->_indexPath = indexPath;attributes->_representedElementCategory = UICollectionViewElementCategorySupplementaryView;attributes->_representedElementKind = elementKind;return attributes;
}// 创建装饰视图的布局属性
+ (instancetype)layoutAttributesForDecorationViewOfKind:(NSString *)elementKind withIndexPath:(NSIndexPath *)indexPath {UICollectionViewLayoutAttributes *attributes = [[self alloc] init];attributes->_indexPath = indexPath;attributes->_representedElementCategory = UICollectionViewElementCategoryDecorationView;attributes->_representedElementKind = elementKind;return attributes;
}// 设置frame
- (void)setFrame:(CGRect)frame {_frame = frame;_center = CGPointMake(CGRectGetMidX(frame), CGRectGetMidY(frame));_size = frame.size;
}// 设置center
- (void)setCenter:(CGPoint)center {_center = center;_frame = CGRectMake(center.x - _size.width/2, center.y - _size.height/2, _size.width, _size.height);
}// 设置size
- (void)setSize:(CGSize)size {_size = size;_frame = CGRectMake(_center.x - size.width/2, _center.y - size.height/2, size.width, size.height);
}// 复制方法
- (id)copyWithZone:(NSZone *)zone {UICollectionViewLayoutAttributes *copy = [[[self class] allocWithZone:zone] init];copy->_indexPath = [self->_indexPath copyWithZone:zone];copy->_representedElementCategory = self->_representedElementCategory;copy->_representedElementKind = [self->_representedElementKind copyWithZone:zone];copy->_frame = self->_frame;copy->_center = self->_center;copy->_size = self->_size;copy->_transform3D = self->_transform3D;copy->_alpha = self->_alpha;copy->_zIndex = self->_zIndex;copy->_isHidden = self->_isHidden;return copy;
}@end

六、自定义UICollectionViewFlowLayout

6.1 自定义的基本步骤

自定义UICollectionViewFlowLayout通常需要以下步骤：

创建一个继承自UICollectionViewFlowLayout的子类
重写prepare()方法，进行布局计算和初始化
重写layoutAttributesForElements(in:)方法，返回指定区域内的所有元素的布局属性
重写layoutAttributesForItem(at:)方法，返回指定位置的单元格的布局属性
重写layoutAttributesForSupplementaryView(ofKind:at:)方法，返回指定类型和位置的补充视图的布局属性
重写collectionViewContentSize属性，返回collectionView的内容大小
根据需要，重写其他方法，如shouldInvalidateLayoutForBoundsChange:等

6.2 示例：自定义瀑布流布局

下面是一个自定义瀑布流布局的示例，展示了如何实现一个简单的瀑布流布局：

// 自定义瀑布流布局
class WaterfallFlowLayout: UICollectionViewFlowLayout {// 列数var columnCount: Int = 2// 存储每列的当前高度private var columnHeights: [CGFloat] = []// 存储所有元素的布局属性private var allAttributes: [UICollectionViewLayoutAttributes] = []// 内容高度private var contentHeight: CGFloat = 0override func prepare() {super.prepare()guard let collectionView = collectionView else { return }// 重置数据columnHeights = Array(repeating: sectionInset.top, count: columnCount)allAttributes = []contentHeight = 0// 获取section数量let sectionCount = collectionView.numberOfSections// 遍历每个sectionfor section in 0..<sectionCount {// 处理headerlet headerSize = headerReferenceSizeif headerSize.height > 0 {let headerIndexPath = IndexPath(item: 0, section: section)let headerAttributes = layoutAttributesForSupplementaryView(ofKind: UICollectionElementKindSectionHeader, at: headerIndexPath)!allAttributes.append(headerAttributes)// 更新内容高度contentHeight = max(contentHeight, headerAttributes.frame.maxY)}// 处理section的内边距let sectionInset = self.sectionInset// 获取当前section的item数量let itemCount = collectionView.numberOfItems(inSection: section)// 计算每个item的宽度let availableWidth = collectionView.bounds.width - sectionInset.left - sectionInset.rightlet itemWidth = (availableWidth - (CGFloat(columnCount) - 1) * minimumInteritemSpacing) / CGFloat(columnCount)// 遍历每个itemfor item in 0..<itemCount {let indexPath = IndexPath(item: item, section: section)// 获取item的高度（这里假设我们通过代理获取每个item的高度）let itemHeight = self.itemHeight(for: indexPath, withWidth: itemWidth)// 找到最短的列var shortestColumn = 0var shortestHeight = columnHeights[0]for i in 0..<columnCount {if columnHeights[i] < shortestHeight {shortestHeight = columnHeights[i]shortestColumn = i}}// 计算item的位置let xOffset = sectionInset.left + (itemWidth + minimumInteritemSpacing) * CGFloat(shortestColumn)let yOffset = shortestHeight// 创建布局属性let attributes = UICollectionViewLayoutAttributes(forCellWith: indexPath)attributes.frame = CGRect(x: xOffset, y: yOffset, width: itemWidth, height: itemHeight)// 添加到数组allAttributes.append(attributes)// 更新列的高度columnHeights[shortestColumn] = attributes.frame.maxY + minimumLineSpacing// 更新内容高度contentHeight = max(contentHeight, attributes.frame.maxY)}// 处理footerlet footerSize = footerReferenceSizeif footerSize.height > 0 {let footerIndexPath = IndexPath(item: 0, section: section)let footerAttributes = layoutAttributesForSupplementaryView(ofKind: UICollectionElementKindSectionFooter, at: footerIndexPath)!// 设置footer的位置var footerFrame = CGRect(x: 0, y: contentHeight, width: footerSize.width, height: footerSize.height)footerFrame.origin.x = sectionInset.leftfooterFrame.size.width = collectionView.bounds.width - sectionInset.left - sectionInset.rightfooterAttributes.frame = footerFrameallAttributes.append(footerAttributes)// 更新内容高度contentHeight = footerAttributes.frame.maxY}}// 添加section之间的间距contentHeight += sectionInset.bottom}// 获取item的高度（通过代理或数据源）func itemHeight(for indexPath: IndexPath, withWidth width: CGFloat) -> CGFloat {// 这里应该通过代理或数据源获取实际的高度// 为了示例，我们返回一个随机高度return CGFloat(arc4random_uniform(200) + 100)}override var collectionViewContentSize: CGSize {guard let collectionView = collectionView else { return .zero }return CGSize(width: collectionView.bounds.width, height: contentHeight)}override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {// 找出在rect范围内的布局属性return allAttributes.filter { rect.intersects($0.frame) }}override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {// 找出指定indexPath的布局属性return allAttributes.first { $0.indexPath == indexPath && $0.representedElementCategory == .cell }}override func layoutAttributesForSupplementaryView(ofKind elementKind: String, at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {// 找出指定类型和indexPath的补充视图的布局属性return allAttributes.first { $0.indexPath == indexPath && $0.representedElementKind == elementKind }}override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool {// 当边界变化时，是否需要重新计算布局return true}
}

七、UICollectionView布局性能优化

7.1 布局计算优化

布局计算是UICollectionView性能的关键部分，以下是一些布局计算优化的方法：

缓存布局计算结果：在prepare()方法中进行布局计算，并将结果缓存起来，避免重复计算。
懒加载布局属性：只计算当前可见区域和即将可见区域的布局属性，而不是一次性计算所有元素的布局属性。
批量更新布局：当需要更新布局时，使用performBatchUpdates(_:completion:)方法批量更新，减少布局计算的次数。

7.2 内存管理优化

内存管理也是UICollectionView性能优化的重要方面，以下是一些内存管理优化的方法：

重用单元格：使用UICollectionView的重用机制，避免创建过多的单元格对象。
释放不再使用的资源：在单元格被重用或不再显示时，释放其占用的资源，如图片、数据等。
避免内存泄漏：确保没有强引用循环，及时移除不再需要的观察者和回调。

7.3 滚动性能优化

滚动性能直接影响用户体验，以下是一些滚动性能优化的方法：

预加载内容：在滚动过程中，提前计算和加载即将显示的内容，减少滚动时的卡顿。
异步加载图片：使用异步方式加载图片，避免阻塞主线程。
优化单元格绘制：避免在单元格的绘制过程中进行复杂的计算和操作。
使用estimatedItemSize：当单元格大小变化不大时，使用estimatedItemSize属性来预估单元格大小，提高布局计算效率。

八、UICollectionView与动画效果

8.1 基本动画

UICollectionView支持多种基本动画效果，如插入、删除、移动、刷新等操作的动画。这些动画可以通过以下方法触发：

// 插入项目
func insertItems(at indexPaths: [IndexPath])// 删除项目
func deleteItems(at indexPaths: [IndexPath])// 移动项目
func moveItem(at indexPath: IndexPath, to newIndexPath: IndexPath)// 刷新项目
func reloadItems(at indexPaths: [IndexPath])// 批量更新
func performBatchUpdates(_ updates: (() -> Void)?, completion: ((Bool) -> Void)? = nil)

8.2 自定义动画

除了基本动画，UICollectionView还支持自定义动画效果。自定义动画通常需要创建一个继承自UICollectionViewTransitionLayout的子类，并实现相应的方法。

以下是一个自定义动画的示例：

// 自定义过渡布局
class CustomTransitionLayout: UICollectionViewTransitionLayout {override func initialLayoutAttributesForAppearingItem(at itemIndexPath: IndexPath) -> UICollectionViewLayoutAttributes? {let attributes = super.initialLayoutAttributesForAppearingItem(at: itemIndexPath)?.copy() as? UICollectionViewLayoutAttributes// 设置初始状态attributes?.alpha = 0.0attributes?.transform3D = CATransform3DMakeScale(0.1, 0.1, 1.0)return attributes}override func finalLayoutAttributesForDisappearingItem(at itemIndexPath: IndexPath) -> UICollectionViewLayoutAttributes? {let attributes = super.finalLayoutAttributesForDisappearingItem(at: itemIndexPath)?.copy() as? UICollectionViewLayoutAttributes// 设置最终状态attributes?.alpha = 0.0attributes?.transform3D = CATransform3DMakeScale(1.5, 1.5, 1.0)return attributes}override func shouldInvalidateLayout(forTransitionProgress transitionProgress: CGFloat) -> Bool {// 是否在过渡过程中重新计算布局return true}
}// 在UICollectionView中应用自定义动画
extension ViewController: UICollectionViewDelegate {func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {// 删除选中的项目并应用自定义动画let transitionLayout = CustomTransitionLayout(currentLayout: collectionView.collectionViewLayout, nextLayout: collectionView.collectionViewLayout)collectionView.performBatchUpdates({collectionView.deleteItems(at: [indexPath])}, completion: nil)}
}