转载自:   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。就可以看到上面图上的效果了。

posted on 2016-04-06 22:42  pruple_Boy  阅读(817)  评论(0编辑  收藏  举报