iOS - UICollectionView的DecorationView之用“框框”包住你的items

1.需求：

在同一个页面展示分类items，类别之间使用特定的“容器”视图包裹此分类下的所有元素，分类头部和尾部要显示相关数据。如下图：

Paste_Image.png

2.可选方案：

1. 使用UITableView或者UICollectionView，一个分类就是一个cell或者item， 每个cell或item内再绘制类别下所有元素。
2. 使用UICollectionView，每个元素都是一个item，这时候就需要想办法，把相应的item给“包”起来。

方案“1”无疑是最简单的实现，但是如果当一个类别的元素特别多，而且类别需要显示的UI特别复杂（例如一个cell里面有N多个元素），就会因为这个大cell需要一次性绘制，包括没有显示在屏幕内的元素，会造成性能问题。
所以我们来探讨一下方案“2”的实现。

3. 实现：

每个类别header、section、footer上中下三层，底下一个DecorationView。

Paste_Image.png

Paste_Image.png

创建一个UICollectionView，使用自定义的layout（继承UICollectionViewFlowLayout）。

#import "ViewController.h"
#import "HVWLayout.h"
#import "HVWHeader.h"
#import "HVWFooter.h"

@interface ViewController () 

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    self.view.backgroundColor = [UIColor whiteColor];
    self.automaticallyAdjustsScrollViewInsets = NO;
    
    HVWLayout *layout = [[HVWLayout alloc] init];
    layout.itemSize = CGSizeMake(80, 80);
    layout.headerReferenceSize = CGSizeMake(self.view.bounds.size.width, 90);
    layout.footerReferenceSize = CGSizeMake(self.view.bounds.size.width, 70);
    layout.sectionInset = UIEdgeInsetsMake(0, 30, 0, 30);
    layout.minimumLineSpacing = 20;
    layout.minimumInteritemSpacing = ([UIScreen mainScreen].bounds.size.width - 80 * 3 - 60) / 2;
    
    UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout];
    collectionView.backgroundColor = [UIColor whiteColor];
    [self.view addSubview:collectionView];
    
    collectionView.dataSource = self;
    collectionView.delegate = self;
    
    [collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cell"];
    [collectionView registerClass:[HVWHeader class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header"];
    [collectionView registerClass:[HVWFooter class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footer"];
}


- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

#pragma mark - UICollectionViewDataSource
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    return 10;
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return section + 4;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];
    cell.backgroundColor = [UIColor orangeColor];
    return cell;
}

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath {
    if (kind == UICollectionElementKindSectionHeader) {
        return [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header" forIndexPath:indexPath];
        
    } else if (kind == UICollectionElementKindSectionFooter) {
        return [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footer" forIndexPath:indexPath];
    }
    
    return nil;
}

#pragma mark - UICollectionViewDelegate


@end

在layout里面配置DecorationView，计算出位置。

#import "HVWLayout.h"
#import "HVWDecorationView.h"

@implementation HVWLayout

- (void)prepareLayout {
    [super prepareLayout];
    
    [self registerClass:[HVWDecorationView class] forDecorationViewOfKind:@"decorationView"];
}

- (UICollectionViewLayoutAttributes *)layoutAttributesForDecorationViewOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath top:(CGFloat)top {
    UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForDecorationViewOfKind:elementKind withIndexPath:indexPath];
    
    NSUInteger numberOfItems = [self.collectionView numberOfItemsInSection:indexPath.section];
    int itemsPerRow = 3;
    NSUInteger rows = (numberOfItems + itemsPerRow - 1) / itemsPerRow;
    CGFloat cellHeight = 80;
    CGFloat cellSpace = 20;
    CGFloat headerHeigh = 90;
    CGFloat footerHeight = 70;
    CGFloat height = headerHeigh + cellHeight * rows + cellSpace * (rows - 1) + footerHeight;

    attrs.frame = CGRectMake(0, top, [UIScreen mainScreen].bounds.size.width, height);
    attrs.zIndex = -1;
//    NSLog(@"%s", __func__);
    
    return attrs;
}

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {
    NSArray *superAttrs = [super layoutAttributesForElementsInRect:rect];
    NSMutableArray *attrs = [NSMutableArray arrayWithArray:superAttrs];
    
    for (UICollectionViewLayoutAttributes *attr in superAttrs) {
        if (attr.representedElementKind == UICollectionElementKindSectionHeader) {
            [attrs addObject:[self layoutAttributesForDecorationViewOfKind:@"decorationView" atIndexPath:attr.indexPath top:attr.frame.origin.y]];
        }
    }
    
//    NSLog(@"%s", __func__);
    
    return attrs;
}

在DecorationView中，重写方法applyLayoutAttributes，重新计算布局view内的元素。

注意不能靠重写setFrame或者layoutSubViews来布局，因为这两方法只在初始化的时候调用一次，重用就不会调用了。

#import "HVWDecorationView.h"

@interface HVWDecorationView()

@property(nonatomic, strong) UIImageView *imageView;

@end

@implementation HVWDecorationView

- (instancetype)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
//        self.backgroundColor = [UIColor grayColor];
        
        _imageView = [[UIImageView alloc] initWithFrame:CGRectMake(10, 10, frame.size.width - 20, frame.size.height - 20)];
        UIImage *image = [UIImage imageNamed:@"bg"];
        _imageView.image = [image stretchableImageWithLeftCapWidth:image.size.width/2 topCapHeight:image.size.height/2];
        [self addSubview:_imageView];
    }
    
    return self;
}

- (void)applyLayoutAttributes:(UICollectionViewLayoutAttributes *)layoutAttributes {
    [super applyLayoutAttributes:layoutAttributes];
//    NSLog(@"%s", __func__);
    
    _imageView.frame = CGRectMake(10, 10, layoutAttributes.frame.size.width - 20, layoutAttributes.frame.size.height - 20);
}

大功告成~