iOS -CustomCollectionViewFlowLay

** Demo_github**

图片来自：[蓉er蓉er](http://www.jianshu.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];
}

以上便是，CustomCollectionViewFlowLayout优先居左的自定义布局的方法。

** Demo_github**

参考文章

• UICollectionViewLayout布局详解

• iOS常用CGRect的交错,边缘,中心的检测

• contentSize、contentOffset和contentInset的图解辨别

• 自定义collectionViewFlowLayout让UICollectionView的item始终优先居左