美文网首页
给collectionView每个section加背景

给collectionView每个section加背景

作者: 隔壁班小明 | 来源:发表于2019-03-25 11:58 被阅读0次

    先看效果图,这里放上淘宝上的例子:


    WechatIMG209.jpeg

    大概就是这样的东西,collection的每个section都是一个整体(这里也可以强行把section头试图和cell拼起来,当然我觉得挺麻烦的所以这里说的是另一种方法)
    我们下面说的是另一种方式:使用重新Collection layout的方式来试下。

    1. 首先自定义layout类继承于 UICollectionViewFlowLayout
    2. 重写 - (void)prepareLayout;- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect;
      具体代码如下(懒人模式开启):
    /**
     自定义section背景view 注意继承于UICollectionReusableView
     */
    @interface KFZShopCatorySectionWhiteBgView : UICollectionReusableView
    
    @end
    
    @implementation KFZShopCatorySectionWhiteBgView
    
    - (void)applyLayoutAttributes:(UICollectionViewLayoutAttributes *)layoutAttributes{
        [super applyLayoutAttributes:layoutAttributes];
        
        self.backgroundColor = [UIColor whiteColor];
        self.layer.cornerRadius = 8;
        self.layer.masksToBounds = YES;
    }
    
    @end
    
    //下面是自定义的layout
    @interface KFZShopCatoryFlowLayput  ()
    //存放新的layouttAttributes
    @property (nonatomic, strong) NSMutableArray<UICollectionViewLayoutAttributes *> *decorationViewAttrs;
    
    @end
    
    @implementation KFZShopCatoryFlowLayput
    
    - (void)prepareLayout{
        [super prepareLayout];
        
        NSInteger sections = [self.collectionView numberOfSections];
        if (sections == 0) {//没有内容直接返回
            return;
        }
        
        id<UICollectionViewDelegateFlowLayout> delegate  = (id<UICollectionViewDelegateFlowLayout>) self.collectionView.delegate;
        
        //1.初始化 注册背景view类
        [self registerClass:[KFZShopCatorySectionWhiteBgView class] forDecorationViewOfKind:@"KFZShopCatorySectionWhiteBgView"];
        [self.decorationViewAttrs removeAllObjects];
        
        
        
        for (NSInteger section = 0; section < sections; section++) {
           NSInteger numberOfItems = [self.collectionView numberOfItemsInSection:section];
                if (numberOfItems > 0) {
                    UICollectionViewLayoutAttributes *firstAttr = [self layoutAttributesForItemAtIndexPath:[NSIndexPath indexPathForRow:0 inSection:section]];
                    UICollectionViewLayoutAttributes *lastAttr = [self layoutAttributesForItemAtIndexPath:[NSIndexPath indexPathForRow:(numberOfItems - 1) inSection:section]];
                    
                    UIEdgeInsets sectionInset = self.sectionInset;
                    if ([delegate respondsToSelector:@selector(collectionView:layout:insetForSectionAtIndex:)]) {
                        UIEdgeInsets inset = [delegate collectionView:self.collectionView layout:self insetForSectionAtIndex:section];
                        if (!UIEdgeInsetsEqualToEdgeInsets(inset, sectionInset)) {
                            sectionInset = inset;
                        }
                    }
                    
                    CGSize sectionHeaderSize;
                    if ([delegate respondsToSelector:@selector(collectionView:layout:referenceSizeForHeaderInSection:)]) {
                        
                        sectionHeaderSize = [delegate collectionView:self.collectionView layout:self referenceSizeForHeaderInSection:section];
                    }
                    
                    if (section == 0) {
                        sectionHeaderSize.height = 0;
                    }
                    
                    CGRect sectionFrame = CGRectUnion(firstAttr.frame, lastAttr.frame);
                    sectionFrame.origin.x -= 15;
                    sectionFrame.origin.y -= sectionHeaderSize.height;
                    sectionFrame.size.width = sectionFrame.size.width + 30;
                    sectionFrame.size.height = sectionFrame.size.height + sectionHeaderSize.height + 15;
                    
                    //2. 定义
                    UICollectionViewLayoutAttributes *attr = [UICollectionViewLayoutAttributes layoutAttributesForDecorationViewOfKind:@"KFZShopCatorySectionWhiteBgView" withIndexPath:[NSIndexPath indexPathForRow:0 inSection:section]];
                    attr.frame = sectionFrame;
                    attr.zIndex = -1;
                    [self.decorationViewAttrs addObject:attr];
                }else{
                    continue ;
                }
        }
        
    }
    
    - (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect{
        
        NSMutableArray * attrs = [[super layoutAttributesForElementsInRect:rect] mutableCopy];
        for (UICollectionViewLayoutAttributes *attr in self.decorationViewAttrs) {
            if (CGRectIntersectsRect(rect, attr.frame)) {
                [attrs addObject:attr];
            }
        }
        return [attrs copy];
    }
    
    - (NSMutableArray<UICollectionViewLayoutAttributes *> *)decorationViewAttrs{
        if (!_decorationViewAttrs) {
            _decorationViewAttrs = [NSMutableArray array];
        }
        return _decorationViewAttrs;
    }
    
    @end
    
    
    

    相关文章

      网友评论

          本文标题:给collectionView每个section加背景

          本文链接:https://www.haomeiwen.com/subject/mduxgftx.html