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;
}

最终的效果如下：