IOS中UICollectionView中Decoration View的使用

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 *p_w_picpathView=[[UIImageViewalloc] initWithFrame:frame];

       p_w_picpathView.p_w_picpath=[UIImagep_w_picpathNamed:@"BookShelfCell.png"];

       [selfaddSubview:p_w_picpathView];

   }

returnself;

}

OK。就可以看到上面图上的效果了。