UICollectionview使用装饰decorationView

自定collectionview的装饰视图

先来看一下效果图

图中树的部分就是通过装饰来实现的；
要想实现图中树杈部分的UI，如果通过传统的方式很难实现，只能写死一部分UI来实现这样的效果，但是通过collectionview的decorationView就可以轻松的实现这种效果；
先上代码

步骤3：
[self registerClass:[ShelfView class] forDecorationViewOfKind:[ShelfView kind]];

步骤4：
- (void)prepareLayout {
 if (self.scrollDirection == UICollectionViewScrollDirectionVertical)
    {
        int sectionCount = (int)[self.collectionView numberOfSections];
        
        CGFloat y = 0;
        CGFloat availableWidth = self.collectionViewContentSize.width - (self.sectionInset.left + self.sectionInset.right);
        int itemsAcross = floorf((availableWidth + self.minimumInteritemSpacing) / (self.itemSize.width + self.minimumInteritemSpacing));
        for (int section = 0; section < sectionCount; section++)
        {
        if (section == 1) {
                self.headerReferenceSize = CGSizeMake(SCREEN_WIDTH, SCREEN_WIDTH * 0.7);
              }else {
                self.headerReferenceSize = CGSizeMake(SCREEN_WIDTH, 45);
              }
            
            y += self.headerReferenceSize.height;

            int itemCount = (int)[self.collectionView numberOfItemsInSection:section];
            int rows = ceilf(itemCount/(float)itemsAcross);
                dictionary[[NSIndexPath indexPathForItem:0 inSection:section]] = [NSValue valueWithCGRect:CGRectMake(0, y, self.collectionViewContentSize.width, 81)];
            y += self.sectionInset.top;
            y += self.sectionInset.bottom;
            y += (self.itemSize.height)*rows;
            y += self.minimumLineSpacing*rows;
        }
    }
        self.shelfRects = [NSDictionary dictionaryWithDictionary:dictionary];
}

步骤5：

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect

// Add our decoration views (shelves)
    NSMutableArray *newArray = [array mutableCopy];
    
    [self.shelfRects enumerateKeysAndObjectsUsingBlock:^(id key, id obj, BOOL *stop) {
        if (CGRectIntersectsRect([obj CGRectValue], rect))
        {
            
            UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForDecorationViewOfKind:[ShelfView kind] withIndexPath:key];
            attributes.frame = [obj CGRectValue];
            attributes.zIndex = 1;
            //attributes.alpha = 0.5; // screenshots
            [newArray addObject:attributes];
        }
    }];

    array = [NSArray arrayWithArray:newArray];
}

只需要以下几步就可以实现一个自定义装饰步骤：

1.自定义decorationView，MyDecorationView``继承UICollectionReusableView；
2.自定义collectionview的layout;
3.在layout初始化的时候注册MyDecorationView;
4.在layout中的prepare中计算装饰的frame;
5.在布局方法- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect；方法中将计算的frame赋值给指定的decorationView;