图片来自：[蓉er蓉er](//www.greatytc.com/u/904f3fc2ce35)
UICollectionViewLayout的功能为向UICollectionView提供布局信息，不仅包括cell的布局信息，也包括追加视图和装饰视图的布局信息。
通常我们使用UICollectionViewLayout时是由系统帮助计算布局的，如图：
系统帮助计算布局的Layout
这显然不符合我们的需求。在系统的UICollectionViewLayout不能满足我们的需求时，可实现一个自定义的继承UICollectionViewLayout类CustomCollectionViewFlowLayout。
我们需要items优先居左显示，并自动换行。如图：
最终需要的效果图
本文主要是讲述CustomCollectionViewFlowLayout优先居左排列的自定义布局。其实现的步骤如下：
首先自定义一个CustomCollectionViewFlowLayout继承自UICollectionViewLayout类。
#import <UIKit/UIKit.h>
@interface SkyLeftItemsCollectionViewFlowLayout : UICollectionViewFlowLayout<UICollectionViewDelegateFlowLayout>//继承自UICollectionViewLayout类
@end
- UICollectionView的结构
Cells
Supplementary Views 追加视图 （类似Header或者Footer）
Decoration Views 装饰视图 （用作背景展示）
- UICollectionViewLayout是对collectionView的布局和行为进行描述的一个类。
在CustomCollectionViewFlowLayout.m中重载下列方法：
-(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
1.返回rect中的所有的元素的布局属性
2.返回的是包含UICollectionViewLayoutAttributes的NSArray
3.UICollectionViewLayoutAttributes可以是cell，追加视图或装饰视图的信息，通过不同的UICollectionViewLayoutAttributes初始化方法可以得到不同类型的UICollectionViewLayoutAttributes：
1)layoutAttributesForCellWithIndexPath:
2)layoutAttributesForSupplementaryViewOfKind:withIndexPath:
3)layoutAttributesForDecorationViewOfKind:withIndexPath:
-(UICollectionViewLayoutAttributes )layoutAttributesForItemAtIndexPath:(NSIndexPath )indexPath
返回对应于indexPath的位置的cell的布局属性
-(UICollectionViewLayoutAttributes )layoutAttributesForSupplementaryViewOfKind:(NSString )kind atIndexPath:(NSIndexPath *)indexPath
返回对应于indexPath的位置的追加视图的布局属性，如果没有追加视图可不重载
-(UICollectionViewLayoutAttributes * )layoutAttributesForDecorationViewOfKind:(NSString)decorationViewKind atIndexPath:(NSIndexPath )indexPath
返回对应于indexPath的位置的装饰视图的布局属性，如果没有装饰视图可不重载
UICollectionViewLayout中方法的调用顺序：
- 1 -(void)prepareLayout 设置layout的结构和初始需要的参数等。
- 2 -(CGSize) collectionViewContentSize 确定collectionView的所有内容的尺寸。
- 3 -(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect初始的layout的外观将由该方法返回的UICollectionViewLayoutAttributes来决定。
- 4 在需要更新layout时，需要给当前layout发送
- 1 -invalidateLayout， 该消息会立即返回，并且预约在下一个loop的时候刷新当前layout
- 2 -prepareLayout，
- 3 依次再调用-collectionViewContentSize和-layoutAttributesForElementsInRect来生成更新后的布局。
-
在- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect方法中，获取系统计算好的Attributes
// 获取系统计算好的Attributes
NSArray * attributesToReturn = [[NSArray alloc] initWithArray:[super layoutAttributesForElementsInRect:rect] copyItems:YES];
-
在- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect方法中，遍历系统的Attributes数组。
// 遍历
for (UICollectionViewLayoutAttributes* attributes in attributesToReturn) {
/*
typedef NS_ENUM(NSUInteger, UICollectionElementCategory) {
UICollectionElementCategoryCell,
UICollectionElementCategorySupplementaryView,
UICollectionElementCategoryDecorationView
};
*/
// representedElementKind == nil 时 representedElementCategory 为 UICollectionElementCategoryCell 即此时的attributes为item
if (nil == attributes.representedElementKind) {
NSIndexPath* indexPath = attributes.indexPath;
//对每个attributes的frame重新布局
attributes.frame = [self layoutAttributesForItemAtIndexPath:indexPath].frame;
}
}
-
在- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath 方法中，对每个Attributes进行重新布局。
//定义cell的布局
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {
// 获取系统计算好的当前的Attributes
UICollectionViewLayoutAttributes * currentItemAttributes =
[[super layoutAttributesForItemAtIndexPath:indexPath] copy];
//设置内边距
UIEdgeInsets sectionInset = [(UICollectionViewFlowLayout *)self.collectionView.collectionViewLayout sectionInset];
//如果是第一个item。则其frame.origin.x直接在内边距的左边。重置currentItemAttributes的frame 返回currentItemAttributes
if (indexPath.item == 0) { // first item of section
CGRect frame = currentItemAttributes.frame;
frame.origin.x = sectionInset.left; // first item of the section should always be left aligned
currentItemAttributes.frame = frame;
//返回currentItemAttributes
return currentItemAttributes;
}
//如果不是第一个item。则需要获取前一个item的Attributes的frame属性
NSIndexPath* previousIndexPath = [NSIndexPath indexPathForItem:indexPath.item-1 inSection:indexPath.section];
CGRect previousFrame = [self layoutAttributesForItemAtIndexPath:previousIndexPath].frame;
//前一个item与当前的item的相邻点
CGFloat previousFrameRightPoint = previousFrame.origin.x + previousFrame.size.width + kMaxCellSpacing;
//当前的frame
CGRect currentFrame = currentItemAttributes.frame;
//
CGRect strecthedCurrentFrame = CGRectMake(0,
currentFrame.origin.y,
self.collectionView.frame.size.width,
currentFrame.size.height);
//判断两个结构体是否有交错.可以用CGRectIntersectsRect
//如果两个结构体没有交错，则表明这个item与前一个item不在同一行上。则其frame.origin.x直接在内边距的左边。重置currentItemAttributes的frame 返回currentItemAttributes
if (!CGRectIntersectsRect(previousFrame, strecthedCurrentFrame)) {
// if current item is the first item on the line
// the approach here is to take the current frame, left align it to the edge of the view
// then stretch it the width of the collection view, if it intersects with the previous frame then that means it
// is on the same line, otherwise it is on it's own new line
CGRect frame = currentItemAttributes.frame;
frame.origin.x = sectionInset.left; // first item on the line should always be left aligned
currentItemAttributes.frame = frame;
//返回currentItemAttributes
return currentItemAttributes;
}
//如果如果两个结构体有交错。将前一个item与当前的item的相邻点previousFrameRightPoint赋值给当前的item的frame.origin.x
CGRect frame = currentItemAttributes.frame;
frame.origin.x = previousFrameRightPoint;
currentItemAttributes.frame = frame;
//返回currentItemAttributes
return currentItemAttributes;
}
其中，具体的布局方案：
1.获取系统计算好的当前的Attributes
2.判断当前的Attributes是否是第一个。如果是直接返回。
3.如果当前的Attributes不是第一个Attributes。则需要获取前一个item的Attributes。将两个Attributes的frame是否有交错。使用CGRectIntersectsRect对比。
4.如果两个结构体没有交错，则表明当前的Attributes与前一个Attributes不在同一行上。则设置当前的Attributes的frame在下一行的左边，并返回当前的Attributes。
5.如果如果两个结构体有交错。则表明当前的Attributes与前一个Attributes在同一行上。则设置当前的Attributes的frame在前一个Attributes的左边，并返回当前的Attributes。
出现警告：This is likely occurring because the flow layout subclass SkyLeftItemsCollectionViewFlowLayout is modifying attributes returned by UICollectionViewFlowLayout without copying them的解决方法
- 如果是获取系统计算好的Attributes时使用
NSMutableArray *attributesToReturn = [[super layoutAttributesForElementsInRect:rect] mutableCopy]方法的话会有警告：
This is likely occurring because the flow layout subclass SkyLeftItemsCollectionViewFlowLayout is modifying attributes returned by UICollectionViewFlowLayout without copying them
- 其解决方法就是在获取系统计算好的Attributes时进行copyItems。
//定义屏幕展示的范围和数量
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {
// 获取系统计算好的Attributes
NSArray * attributesToReturn = [[NSArray alloc] initWithArray:[super layoutAttributesForElementsInRect:rect] copyItems:YES];//copyItems将系统的Attributes进行拷贝
/*
也可以这样写
NSArray* arrayattributesToReturn = [super layoutAttributesForElementsInRect:rect];
NSArray * attributesToReturn = [[NSArray alloc] initWithArray:arrayattributesToReturn copyItems:YES];
*/
- 上述方法添加之后，运行还是有同样的警告。我们还需对每个Attributes布局时进行copy。
//定义cell的布局
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {
// 获取系统计算好的当前的Attributes
UICollectionViewLayoutAttributes * currentItemAttributes =
[[super layoutAttributesForItemAtIndexPath:indexPath] copy];
}
