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

        imageView.image=[UIImageimageNamed:@"BookShelfCell.png"];

        [selfaddSubview:imageView];

    }

returnself;

}

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