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

本文详细介绍了如何使用UICollectionView创建简易书架应用,并着重讲解了DecorationView的使用方法,包括自定义布局、注册装饰视图及布局属性等关键步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值