自定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;