转载自: http://www.it165.net/pro/html/201312/8575.html
- Decoration View是UICollectionView的装饰视图。苹果官方给的案例都没涉及到这个视图的使用。没有具体的细节。我今天用UICollectionView做了一个简易的书架。主要是Decoration View的使用方法。
效果如下：
基本的UICollectionView使用方法请自己查询。
#import "CVViewController.h"
#import "CVCell.h"
#import "CVLayout.h"
@interfaceCVViewController ()
@end
@implementation CVViewController
- (void)viewDidLoad
{
[superviewDidLoad];
[self.coll registerClass:[CVCell class] forCellWithReuseIdentifier:@"cell"];
CVLayout *layout=[[CVLayout alloc] init];
[self.coll setCollectionViewLayout:layout];
}
- (void)didReceiveMemoryWarning
{
[superdidReceiveMemoryWarning];
}
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
return3;
}
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
return3;
}
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell"forIndexPath:indexPath];
return cell;
}
@end
其中CVCell是我自定义的一个
UICollectionViewCell
其中CVLayout是我自定义的一个
UICollectionViewLayout
接下来主要看一下自定义的layout
#import "CVLayout.h"
#import "CVDEView.h"
@implementation CVLayout
-(void)prepareLayout{
[super prepareLayout];
[self registerClass:[CVDEView class] forDecorationViewOfKind:@"CDV"];//注册Decoration View
}
-(CGSize)collectionViewContentSize{
return self.collectionView.frame.size;
}
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)path
{
UICollectionViewLayoutAttributes* attributes = [UICollectionViewLayoutAttributeslayoutAttributesForCellWithIndexPath:path];
attributes.size = CGSizeMake(215/3.0, 303/3.0);
attributes.center=CGPointMake(80*(path.item+1), 62.5+125*path.section);
return attributes;
}
//Decoration View的布局。
- (UICollectionViewLayoutAttributes *)layoutAttributesForDecorationViewOfKind:(NSString*)decorationViewKind atIndexPath:(NSIndexPath *)indexPath{
UICollectionViewLayoutAttributes* att = [UICollectionViewLayoutAttributeslayoutAttributesForDecorationViewOfKind:decorationViewKind withIndexPath:indexPath];
att.frame=CGRectMake(0, (125*indexPath.section)/2.0, 320, 125);
att.zIndex=-1;
return att;
}
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect{
NSMutableArray* attributes = [NSMutableArrayarray];
//把Decoration View的布局加入可见区域布局。
for (int y=0; y<3; y++) {
NSIndexPath* indexPath = [NSIndexPathindexPathForItem:3inSection:y];
[attributes addObject:[selflayoutAttributesForDecorationViewOfKind:@"CDV"atIndexPath:indexPath]];
}
for (NSInteger i=0 ; i < 3; i++) {
for (NSInteger t=0; t<3; t++) {
NSIndexPath* indexPath = [NSIndexPathindexPathForItem:t inSection:i];
[attributes addObject:[selflayoutAttributesForItemAtIndexPath:indexPath]];
}
}
return attributes;
}
下面是最后的Decoration View的设计。
首先要继承
UICollectionReusableView
?然后
@implementation CVDEView
- (id)initWithFrame:(CGRect)frame
{
self = [superinitWithFrame:frame];
if (self) {
UIImageView *imageView=[[UIImageViewalloc] initWithFrame:frame];
imageView.image=[UIImageimageNamed:@"BookShelfCell.png"];
[selfaddSubview:imageView];
}
returnself;
}
OK。就可以看到上面图上的效果了。
