IOS中集合视图UICollectionView中DecorationView的简易使用方法

Posted 2020-07-06 010_purple

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