您的位置:首页 > 产品设计 > UI/UE

iOS-UICollectionView的使用简介

2014-10-14 13:52 621 查看
第一次写博客,经验和知识都不充足,希望各位见谅和鼓励。其中一部分是借鉴老师讲课的内容,一部分是自己总结的内容。

UICollectionView和UITableView十分类似,可以把它们两对比记忆,效果会很好。

1.UICollectionView是什么?

是一种新的数据展示方式,简单来说可以把它理解成多例地UITabkeView.如果你使用过iBooks的话,可能你还对书架布局有一定的印象:一个虚拟书架上放着你下载和购买的各类图书,排列整齐,这就是UICollecctionView的表现形式。

整体结构:

1.cells(单元格):

虽然也叫cells,但是和UITableViewCell有很大的不同之处,拿照片墙例子来说,每一张照片的组成就是在每个cell的contentView上添加一个UIImageView视图。

2.Supplementary Views(补充的视图):

UICollectionView的页眉和页脚,类似于UITableView的节头和节尾,不同的是它可以控制尺寸大小,更加方便灵活,而UITableView只能控制段头和段位的高度。

3.Decoration Views(装饰视图,用于装饰整个UICollectionView):

类似一个大背景视图。

2.UICollectionViewDatasource(数据源)

UICollectionViewDataSource是一个代理,主要用于向collection view 提供数据(类似于table view),如果使用的是 UICollectionViewController则不用设置,否则需要设置UICollectionView的数据源为当前的控制器。

UICollectionViewDataSource的主要功能:

</pre><h2>1.section数目</h2><p><pre name="code" class="objc">-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section;


2.每一个section里面有多少item

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section;



3.提供cell和supplementary view设置

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath;


- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath;


实现三个委托方法后,UICollectionView的展示基本上就没有问题了。

3.UICollectionViewDelegate(代理)

如果使用的是UICollectionViewController,则不用设置这个属性,系统已经设置好了。如果是创建的UICollectionView则需要把delegate属性设置为当前控制器,并让控制器遵守代理协议。

于数据无关的外形,用户交互都由delegate负责

1.控制cell的高亮

- (BOOL)collectionView:(UICollectionView *)collectionView shouldHighlightItemAtIndexPath:(NSIndexPath *)indexPath;
- (void)collectionView:(UICollectionView *)collectionView didHighlightItemAtIndexPath:(NSIndexPath *)indexPath;
- (void)collectionView:(UICollectionView *)collectionView didUnhighlightItemAtIndexPath:(NSIndexPath *)indexPath;


2.控制cell的选择

- (BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath;
- (BOOL)collectionView:(UICollectionView *)collectionView shouldDeselectItemAtIndexPath:(NSIndexPath *)indexPath; // called when the user taps on an already-selected item in multi-select mode
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath;
- (void)collectionView:(UICollectionView *)collectionView didDeselectItemAtIndexPath:(NSIndexPath *)indexPath;


3.在cell上支持菜单操作

- (BOOL)collectionView:(UICollectionView *)collectionView shouldShowMenuForItemAtIndexPath:(NSIndexPath *)indexPath;


4.UICollectionView单元格和view重用

如果 在一个视图上要展示成千上万个item,不可能一个个创建这么多的item,否则内存肯定要崩掉。例如在照片墙上展示多张照片,不可能根据一张照片创建一个item,不然手机内存也受不了。这里就谈到UICollectionView的单元格和view的重用机制。

那么UICollectionView是如何解决重用问题的呢?

首先注册:

static NSString *str = @"cell";//创建一个静态字符串,用作重用队列的名字

UICollectionView *collectionView = [[UICollectionView alloc]initWithFrame:self.view.bounds collectionViewLayout:layout];//这里的layout是布局对象,下面会讲到

[collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:str];//注册一个重用队列,后边重用是要用到此队列。

//用来注册的方法主要有以下几个

- (void)registerClass:forCellWithReuseIdentifier:

- (void)registerClass:forSupplementaryViewOfKind:withReuseIdentifier:

- (void)registerNib:forCellWithReuseIdentifier:

- (void)registerNib:forSupplementaryViewOfKind:withReuseIdentifier:


重用:

刚开始页面的内容为空,item和view需要一个个创建,重用队列还是为空。当用户的内容显示后,向上或者向下滑动时后,当前页面的内容消失,此时系统就会把用不着的item和view放如重用队列里,下面需要用到的item和view就会从这个队列里面来取。

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:str forIndexPath:indexPath];
cell.backgroundColor = [UIColor orangeColor];
return cell;
}

//重用方法

-(id)dequeueReusableCellWithReuseIdentifier:forIndexPath:

-(id)dequeueReusableSupplementaryViewOfKind:withReuseIdentifier:forIndexPath:



通过此方法,最终达到高效率的重用机制,不得不说苹果的设计是十分的巧妙。

5. Layout(布局)

5.1 UICollectionViewLayout

UICollectionViewLayout是一个抽象基类,你需要继承自他,来为collection view生成layout信息。Layout对象的作用是决定cells,Supplementary views和Decorationviews在collection view中的布局位置。

你需要计算如下view的layout属性
1. Cells
2.Supplementary views
3. Decoration views
系统也为我们定义了layout属性,即UICollectionViewLayoutAttributes,它主要包括如下内容:
1. 位置
2. 大小
3.透明度
4.ZIndex
5.转场

5.2 Flow layout

UICollectionViewFlowLayout是一个具体的layout对象,用来把item布局在网格中,并且可选页眉和页脚。在collection view中的items,可以从一行或者一列flow至下一行或者下一列(行或者列取决于滚动的方向)。每行都会根据情况,包含尽可能多的Cells。Cells可以是相同的尺寸,也可以是不同的尺寸。
下面是Flow Layout的一些特性
面向线性布局
可配置为网格
一组lines
具有页眉和页脚
Flow Layout 可以定制以下内容
1.item size(每一个item的大小)
2.line spacing(每一行的行距)
3.inter cell spacing (每一行内部,cell item的间距)
4.scrolling direction(滚动的方向)
5.header and footer size (页眉页脚的大小)
6.section inset(每一section边距)
针对每一个属性都可以有两种方式来设置,一种是直接设置flowLayout的属性,它将影响全局属性
第二种方式是通过delegate方法来设置,可以指定具体的元素来单独配置。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: