iOS开发UI篇--UICollectionView初步入门

1、UICollectionView的简介

UICollectionView是iOS 6中引进的列表展示控件，用于展现集合视图，布局更加灵活，能够高度定制内容的展示，能够有效的进行数据管理，即便对于大量数据，也很是的高效。苹果官方给出了Demo点我下载是一个相似于Android里面的GridView的实现。和UITableView的实现相比较，他对于每个Item都是一次复用，而UITableView只能对于每一行进行复用。若是你认为它仅仅是对GridView在IOS中的实现的话，那你就过小看它的功能了。下面咱们就来一块儿学习UICollectionView的使用方法。

2、UICollectionView的感性认识

网上有一个书架的举例很经典，很好的说明了UICollectionView的表现形式。如图：

一个标准的UICollectionView包含三个部分，他们都是UIView的子类：

Cells 用于展现内容的主体，对于不一样的Cell能够指定不一样的尺寸和内容。
Supplementary Views 附加视图，能够理解为UITableView每一个Section的HeaderView和FooterView。
Decoration Views 装饰视图，这是每一个section的背景视图，用于装饰该section。
将上图分解为以上三个元素组成的结构，以下图所示：

3、基本原理

UICollectionView 向 UICollectionViewLayout 询问布局，当询问过程发生时，layout 对象会建立 UICollectionViewLayoutAttributes 实例。一个 UICollectionViewLayoutAttributes 对象管理着一个对应的 item layout 相关信息（一对一关系）

4、实现一个简单的gridview视图

效果以下：

第一步：生成UICollectionViewFlowLayout对象，设置他的显示大小、每一个item之间的边距和滚动方向。

UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
flowLayout.itemSize = CGSizeMake(SCREEN_WIDTH/2-10, SCREEN_WIDTH/2-10);
flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;
flowLayout.minimumLineSpacing = 20;//设置每一个item之间的间距

第二步：生成collectionView对象，设置他的显示大小、代理方法和其余相关属性。

UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, self.navBarHeight, SCREEN_WIDTH, SCREEN_HEIGHT-self.navBarHeight) collectionViewLayout:flowLayout];
collectionView.delegate = self;
collectionView.dataSource = self;
collectionView.showsVerticalScrollIndicator = YES;
collectionView.backgroundColor = [UIColor blackColor];
[self.view addSubview:collectionView];

第三步：注册Cell，重用Cell

首先在初始化的时候注册cell的Id。

[self.collectionView registerClass:[Demo1Cell class] forCellWithReuseIdentifier:Demo1CellID];

而后在使用Cell的时候，使用如下方法进行重用。

Demo1Cell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:Demo1CellID forIndexPath:indexPath];

第四步：实现UICollectionViewDataSource的三个代理方法。

• section的数量 -numberOfSectionsInCollection:
• 某个section里有多少个item-collectionView:numberOfItemsInSection:
• 对于某个位置应该显示什么样的cell -collectionView:cellForItemAtIndexPath:

#pragma mark- UICollectionViewDataSource
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
    return 1;
}

-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return 31;
}

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    Demo1Cell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:Demo1CellID forIndexPath:indexPath];
    if(!cell){
        cell = [[Demo1Cell alloc] init];
    }
    [cell setImageName:[NSString stringWithFormat:@"%zi",indexPath.row] content:[NSString stringWithFormat:@"{%zi,%zi}",indexPath.section,indexPath.row]];
    return cell;
}

5、Demo下载地址

推荐一个iOS高级交流群：624212887，群文件自行下载，无论你是小白仍是大牛热烈欢迎进群 ，分享面试经验，讨论技术， 你们一块儿交流学习成长！但愿帮助开发者少走弯路。——点击：加入
若是以为对你还有些用，就关注小编+喜欢这一篇文章。你的支持是我继续的动力。

下篇文章预告：使用UICollectionView实现一个无限轮播的案例

文章来源于网络，若有侵权，请联系小编删除。