UICollectionView的section设置不同的背景

来源:互联网 发布:淘宝话费没充上不能退 编辑:程序博客网 时间:2024/05/22 05:41

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

最终的效果如下:

这里写图片描述

阅读全文
0 0