UICollectionView的section设置不同的背景

UICollectionView的section设置不同的背景

项目有这样的需求，要为section设置不同背景，在网上搜了一下，解决方案如下，可参考:

• How to create a Section Background in a UICollectionView in Swift
• ericchapman/ios_decoration_view

其方案如下：
1.使用collection view的decoration view来设置背景，所以自定义类ECCollectionReusableView继承自UICollectionReusableView。

实现其applyLayoutAttributes:方法

- (void)applyLayoutAttributes:(UICollectionViewLayoutAttributes *)layoutAttributes {
    [super applyLayoutAttributes:layoutAttributes];
    //设置背景颜色
    ECCollectionViewLayoutAttributes *ecLayoutAttributes = (ECCollectionViewLayoutAttributes*)layoutAttributes;
    self.backgroundColor = ecLayoutAttributes.color;
}

2.自定义布局属性类ECCollectionViewLayoutAttributes继承自UICollectionViewLayoutAttributes

添加一个新的属性UIColor *color，实现其+ (instancetype)layoutAttributesForDecorationViewOfKind:(NSString *)decorationViewKind withIndexPath:(NSIndexPath *)indexPath;方法

+ (UICollectionViewLayoutAttributes *)layoutAttributesForDecorationViewOfKind:(NSString *)decorationViewKind
                                                                withIndexPath:(NSIndexPath *)indexPath {

    ECCollectionViewLayoutAttributes *layoutAttributes = [super layoutAttributesForDecorationViewOfKind:decorationViewKind
                                                                                              withIndexPath:indexPath];
    if (indexPath.section%2 == 0) {
        layoutAttributes.color = [UIColor redColor];
    } else {
        layoutAttributes.color = [UIColor blueColor];
    }
    return layoutAttributes;
}

3.自定义布局类ECCollectionViewLayout，与通常的自定义布局类一样，要实现如下的方法

• + (Class)layoutAttributesClass返回自定义的布局属性类
• - (void)prepareLayout 做一些前期的计算准备
• - (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect方法

详情如下：

+ (Class)layoutAttributesClass
{
    return [ECCollectionViewLayoutAttributes class];
}

- (void)prepareLayout {
    [super prepareLayout];

    self.minimumLineSpacing = 8.0f;
    self.minimumInteritemSpacing = 8.0f;
    self.sectionInset = UIEdgeInsetsMake(8, 8, 8, 8);
    self.itemSize = CGSizeMake(148.0f, 115.0f);

    [self registerClass:[ECCollectionReusableView class] forDecorationViewOfKind:kDecorationReuseIdentifier];
}

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {
    NSArray *attributes = [super layoutAttributesForElementsInRect:rect];

    NSMutableArray *allAttributes = [NSMutableArray arrayWithArray:attributes];

    for (UICollectionViewLayoutAttributes *attribute in attributes) {

        // 查找一行的第一个item
        if (attribute.representedElementKind == UICollectionElementCategoryCell
            && attribute.frame.origin.x == self.sectionInset.left) {

            // 创建decoration属性、
            ECCollectionViewLayoutAttributes *decorationAttributes =
            [ECCollectionViewLayoutAttributes layoutAttributesForDecorationViewOfKind:kDecorationReuseIdentifier
                                                                        withIndexPath:attribute.indexPath];

            // 让decoration view占据整行
            decorationAttributes.frame =
            CGRectMake(0,
                       attribute.frame.origin.y-(self.sectionInset.top),
                       self.collectionViewContentSize.width,
                       self.itemSize.height+(self.minimumLineSpacing+self.sectionInset.top+self.sectionInset.bottom));

            // 设置zIndex，表示在item的后面
            decorationAttributes.zIndex = attribute.zIndex-1;

            // 添加属性到集合
            [allAttributes addObject:decorationAttributes];

        }

    }

    return allAttributes;
}

最终的效果如下：