UICollectionView的section设置不同的背景

最新推荐文章于 2025-06-23 19:29:56 发布

winfred_zen

最新推荐文章于 2025-06-23 19:29:56 发布

阅读量1.1w

点赞数

分类专栏： # UICollectionView 文章标签： collection section background 背景

UICollectionView 专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何为UICollectionView的不同section设置背景颜色。通过自定义ECCollectionReusableView、ECCollectionViewLayoutAttributes及ECCollectionViewLayout等类实现，具体包括布局属性的自定义、背景颜色的设置以及布局的定制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

UICollectionView的section设置不同的背景

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

其方案如下：
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;
}

最终的效果如下：

这里写图片描述