先看效果图,这里放上淘宝上的例子:
大概就是这样的东西,collection的每个section都是一个整体(这里也可以强行把section头试图和cell拼起来,当然我觉得挺麻烦的所以这里说的是另一种方法)
我们下面说的是另一种方式:使用重新Collection layout的方式来试下。
- 首先自定义layout类继承于 UICollectionViewFlowLayout
- 重写 - (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