UICollectionView详解

最新推荐文章于 2022-01-15 21:02:26 发布

BlackWolfSky

最新推荐文章于 2022-01-15 21:02:26 发布

阅读量3.5k

点赞数

分类专栏：常用控件

本文链接：https://blog.youkuaiyun.com/BlackWolfSky/article/details/51969831

版权

常用控件专栏收录该内容

25 篇文章

订阅专栏

目录分三部分：

1、UICollectionView常规功能使用步骤

2、UICollectionViewLayout布局说明，及自定义

3、UICollectionView常用属性、函数

参考：

1）、Creating Custom Layouts－官方文档

2）、CollectionView DecorationView使用

3）、UICollectionView 全解

4）、流水布局实例

5）、圆形布局

6）、方形布局

7）、瀑布流

＝＝＝＝＝＝＝＝＝＝＝UICollectionView常规功能使用步骤＝＝＝＝＝＝＝＝＝＝

一、需要实现如下协议

UICollectionViewDataSource，UICollectionViewDelegate， UICollectionViewDelegateFlowLayout

二、初始化
//初始化布局类(UICollectionViewLayout的子类)
UICollectionViewFlowLayout *fl = [[UICollectionViewFlowLayout alloc]init];

//初始化collectionView
self.collectionView = [[UICollectionView alloc]initWithFrame:CGRectZero collectionViewLayout:fl];

//设置代理
self.collectionView.delegate = self;
self.collectionView.dataSource = self;

//注册相应的UICollectionViewCell子类，用来从队列提取和显示
- (void)registerClass:(Class)cellClass forCellWithReuseIdentifier:(NSString *)identifier;
- (void)registerNib:(UINib *)nib forCellWithReuseIdentifier:(NSString *)identifier;//注册xib型cell

//注册页脚、页眉视图：如果需要显示每个section的headerView或footerView，则还需注册相应的UICollectionReusableView的子类到collectionView；elementKind标示是header还是footer
- (void)registerClass:(Class)viewClass forSupplementaryViewOfKind:(NSString *)elementKind withReuseIdentifier:(NSString *)identifier;
- (void)registerNib:(UINib *)nib forSupplementaryViewOfKind:(NSString *)kind withReuseIdentifier:(NSString *)identifier;//注册xib型cell

注意：注册之后在数据源代理函数中通过如下两个函数实现cell和头视图的重用

-(id)dequeueReusableCellWithReuseIdentifier:forIndexPath:

-(id)dequeueReusableSupplementaryViewOfKind:withReuseIdentifier:forIndexPath:

三、实现协议规定的代理函数:
DataSource协议相关函数:
//每一组(section)有多少个cell
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section;
//定义并返回每个cell
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath;
//collectionView里有多少个组（section）
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView;
//定义并返回每个headerView或footerView（即页眉或页脚）
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath; // 这个方法使用时必须要注意的是，如果布局没有为headerView或footerView设置size的话(默认size为CGSizeZero)，则该方法不会被调用。所以如果需要显示header或footer，需要手动为headerView或footerView设置size，可以通过设置UICollectionViewFlowLayout的headerReferenceSize和footerReferenceSize属性来全局控制size，或者通过重载以下代理方法来设置
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section;//设置页眉的size
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section;//设置页脚的size

Delegate协议相关函数:
//每一个cell的大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath;
//设置每组的cell的边界, 具体看下图＝＝＝从图中看出UIEdgeInsetsMake(top,left,bottom,right)的bottom、right为正值
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section;

//cell的最小行间距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section;
//cell的最小列间距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section;
//cell被选择时被调用
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath;
//cell反选时被调用(多选时才生效)
- (void)collectionView:(UICollectionView *)collectionView didDeselectItemAtIndexPath:(NSIndexPath *)indexPath;

注意：对于Decoration Views，不需要在代理函数中提供其视图对象，而应该在自定义的UICollectionViewLayout子类中提供，这么做的原因：Decoration Views仅仅跟视图相关，而与数据无关。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

＝＝＝＝＝＝＝＝＝UICollectionViewLayout布局说明，及自定义＝＝＝＝＝＝＝＝＝＝＝＝

UICollectionViewLayout是一个专门用来管理collectionView布局的基类，它通过UICollectionViewLayoutAttributes类来管理cell、Supplementary View和Decoration View的位置、transform、alpha、hidden等等。

UICollectionView首先通过其数据代理函数生成cell、Supplementary View，然后通过UICollectionViewLayout类型的对象获取布局信息的数组。注意：Decoration Views不需要在UICollectionView代理函数中提供其视图对象，而应该在自定义的UICollectionViewLayout子类中提供，原因：Decoration views纯粹为一个装饰品，他们完全属于布局对象，被布局对象创建、管理。

总之，布局类将每个item的位置等布局信息放在一个数组中，在collectionView布局前会调用布局对象的layoutAttributesForElementsInRect：方法来获取布局数组，所以，我们需要重写这个方法去返回我们自定义的布局数组，另外，布局类在进行布局之前，会调用prepareLayout方法进行数据的初始化，所以自定义布局也要重写这个方法。

下面分别说明一下UICollectionViewLayout常用属性、UICollectionViewLayoutAttributes、Decoration Views，通过对三者的说明可以加深对UICollectionViewLayout的理解。

1、UICollectionViewLayout内部常用的属性如下：

//同section中，垂直方向：行与行之间的间距；水平方向：列与列之间的间距

@property (nonatomic) CGFloat minimumLineSpacing;

//垂直方向：同一行中的cell之间的间距；水平方向：同一列中，cell与cell之间的间距

@property (nonatomic) CGFloat minimumInteritemSpacing;

//每个cell统一尺寸

@property (nonatomic) CGSize itemSize;

//滑动方向，默认滑动方向是垂直方向滑动

@property (nonatomic) UICollectionViewScrollDirection scrollDirection;

//section头视图的尺寸。若是垂直滑动，则只有高起作用；若是水平滑动，则只有宽起作用

@property (nonatomic) CGSize headerReferenceSize;

//section尾部视图的尺寸。若是垂直滑动，则只有高起作用；若是水平滑动，则只有宽起作用

@property (nonatomic) CGSize footerReferenceSize;

//section的内容缩进

@property (nonatomic) UIEdgeInsets sectionInset;

注意：

1）、UICollectionViewLayout内部的属性都是用来统一设置，若是统一设置无法满足需求，可以实现UICollectionViewDelegateLayout代理方法，进行对应的设置。

2）、以上属性可以在使用时设置，或在自定义布局类时在prepareLayout方法中设置，或者通过布局类的代理函数设置。

2、UICollectionViewLayoutAttributes类由布局对象返回，称为布局属性对象，该对象描述了collection view内需要布局的视图的布局规则。默认情况下，这个类包含frame，center，size，transform3D，alpha，zIndex，hidden属性。如果你的布局想要控制其他视图属性（比如，背景颜色），你可以建一个UICollectionViewLayoutAttributes的子类，然后加上你自己的属性。

UICollectionViewLayoutAttributes类通过indexPath属性和他们对应的cell，supplementary view或者decoration view关联在一起。collection view为所有布局子视图(包括cell，supplementary view、decoration view)从布局对象中请求到布局属性后，它将会实例化所有视图，并将对应的属性应用到每个视图上去。

3、对于Decoration Views，不需要在代理函数中提供其视图对象，而应该在自定义的UICollectionViewLayout子类中提供，这么做的原因：Decoration views纯粹为一个装饰品，他们完全属于布局对象，被布局对象创建、管理，当布局对象为collection view指定decoration view的布局属性后，collection view不需要准备任何自定义的decoration view视图，而是将布局对象提供的decoration view应用到视图上。

自定义一个FlowLayout布局类的步骤如下：

1、重写prepareLayout方法，对布局中的数据进行初始化。

2、返回整体的content size

3、流式处理中最关键的方法如下

//返回cell的布局。

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)path

//返回Decoration View的布局，如果没有装饰视图或者不需要定制装饰视图的布局属性，则可不重载

- (UICollectionViewLayoutAttributes *)layoutAttributesForDecorationViewOfKind:(NSString*)decorationViewKind atIndexPath:(NSIndexPath *)indexPath

//返回对应indexPath的头视图的布局属性，如果没有头视图或者不需要定制头视图的布局属性，则可不重载

-(UICollectionViewLayoutAttributes )layoutAttributesForSupplementaryViewOfKind:(NSString )kind atIndexPath:(NSIndexPath *)indexPath

1.返回rect中的所有的元素的布局属性

2.返回的是包含UICollectionViewLayoutAttributes的NSArray

3.在函数中元素的布局属性一般是通过上面的三个函数得到的，但是如果没有的话使用上面三个方法是不能得到元素的布局属性的，此时可以通过不同的UICollectionViewLayoutAttributes初始化方法创建不同类型的UICollectionViewLayoutAttributes：

1)、layoutAttributesForCellWithIndexPath:

2)、layoutAttributesForSupplementaryViewOfKind:withIndexPath:

3)、layoutAttributesForDecorationViewOfKind:withIndexPath:

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect

4、当UICollectionView的bounds发生改变时，是否要刷新布局。如果YES则在边界变化（一般是scroll到其他地方）时，将重新计算需要的布局信息。

-(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds

5、设置collectionview滑动结束的停止位置

//proposedContentOffset为系统期望滑动到的位置，velocity为加速度，返回值为UICollectionView的停止位置，你可以通过这两个参数以及当前item所在的位置计算出你希望它滑动到的位置，具体算法根据需求的不同来实现。

- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity;

6、cell插入和删除动画

对于UICollectionView，苹果自带了插入删除时Item的淡入淡出的动画，若你想自定义更炫的动画，就子类化UICollectionViewFlowLayout类，并重写initialLayoutAttributesForAppearingItemAtIndexPath: 和finalLayoutAttributesForDisappearingItemAtIndexPath: 方法。

如果想实现supplementary的插入、删除动画则需重写initialLayoutAttributesForAppearingSupplementaryElementOfKind:atIndexPath:和finalLayoutAttributesForDisappearingSupplementaryElementOfKind:atIndexPath:方法；如果想实现decoration view的插入、删除动画则需重写initialLayoutAttributesForAppearingDecorationElementOfKind:atIndexPath:和finalLayoutAttributesForDisappearingDecorationElementOfKind:atIndexPath:方法。

插入和删除动画的原理：当一个cell（或者supplementary或者decoration view）被插入到collection view中时，collection view不仅向布局对象请求cell正常状态下的布局属性，同时还请求初始的布局属性，比如，想要cell在插入时有插入动画，则collection view会简单的创建一个animation block，并在这个block中，将所有cell的属性从初始（initial）状态改变到常态（normal）。

举例如下：

// 初始状态

- (nullable UICollectionViewLayoutAttributes *)initialLayoutAttributesForAppearingItemAtIndexPath:(NSIndexPath *)itemIndexPath

{

UICollectionViewLayoutAttributes *attr = [self layoutAttributesForItemAtIndexPath:itemIndexPath];

attr.center = CGPointMake(CGRectGetMidX(self.collectionView.bounds), CGRectGetMaxY(self.collectionView.bounds));

attr.transform = CGAffineTransformRotate(CGAffineTransformMakeScale(0.2, 0.2), M_PI);

return attr;

}

// 终结状态

- (nullable UICollectionViewLayoutAttributes *)finalLayoutAttributesForDisappearingItemAtIndexPath:(NSIndexPath *)itemIndexPath

{

UICollectionViewLayoutAttributes *attr = [self layoutAttributesForItemAtIndexPath:itemIndexPath];

attr.alpha = 0.0f;

return attr;

}

8、布局间切换

通过setCollectionViewLayout:animated:完成布局切换。

说明：以上步骤不是固定的，需要根据具体需求选取。

下面就自定义步骤中的几个问题说明如下：

1、layoutAttributesForElementsInRect:是自定义布局对象时需要重载的函数，用来获取CollectionView的所有布局子试图项的layout，该函数的返回值是一个UICollectionViewLayoutAttributes类型的数组，为矩形区域内可见的每一个cell，supplementary view或decoration view返回布局属性对象，其中布局属性对象通过indexPath属性和他们对应的cell，supplementary view或者decoration view关联在一起。函数内部的实现大致为以下几步：

1).创建一个空的mutable数组来存放所有的布局属性对象。

2).计算矩形内可见cell的index paths，然后在循环中调用你实现的layoutAttributesForItemAtIndexPath:布局代理方法为每个index path代表的cell创建并配置一个合适的布局属性对象，并将每个对象添加到数组中。

3).如果你的布局包含supplementary views，计算矩形内可见supplementary view的index paths，然后在循环中调用你实现的layoutAttributesForSupplementaryViewOfKind:atIndexPath:布局代理方法为每个index path代表的supplementary view创建并配置一个合适的布局属性对象，并且将这些对象加到数组中。通过为kind参数传递不同字符，你可以区分出不同种类的supplementary views（比如headers和footers）。记住supplementary和decoration views的数量和种类完全由布局控制。你不会受到headers和footers的限制。

4).如果布局包含decoration views，计算矩形内可见decoration views的index paths，然后在循环中调用你实现的layoutAttributesForDecorationViewOfKind:atIndexPath:布局代理方法为每个index path代表的decoration views创建并配置一个合适的布局属性对象，并将这些对象加到数组中。

5).返回数组。

2、shouldInvalidateLayoutForBoundsChange:当collection view的bounds改变时，布局需要告诉collection view是否需要重新计算布局。我的猜想是：当collection view改变大小时，大多数布局会被作废，比如设备旋转的时候。因此，一个幼稚的实现可能只会简单的返回YES。虽然实现功能很重要，但是scroll view的bounds在滚动时也会改变，这意味着你的布局每秒会被丢弃多次。根据计算的复杂性判断，这将会对性能产生很大的影响。幸运的是，collection view将它的新bounds传给shouldInvalidateLayoutForBoundsChange: 方法，这样我们便能比较视图当前的bounds和新的bounds来确定返回值：

- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds

{

CGRect oldBounds = self.collectionView.bounds;

if (CGRectGetWidth(newBounds) != CGRectGetWidth(oldBounds)) {

return YES;

}

return NO;

}

示例参考带Decoration View的UICollectionViewFlowLayout布局自定义。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

＝＝＝＝＝＝＝＝＝＝＝＝UICollectionView常用属性、函数＝＝＝＝＝＝＝＝＝＝＝＝

以下内容来自网页：http://blog.youkuaiyun.com/majiakun1/article/details/24177347

1、Cell重用改善

为了更加方便的使用Cell，系统总是为我们初始化Cell，然后我们可以直接使用。只需要简单的按照两步走即可：

1）必须使用下面的方法进行Cell类的注册：

- (void)registerClass:forCellWithReuseIdentifier:

- (void)registerClass:forSupplementaryViewOfKind:withReuseIdentifier:

- (void)registerNib:forCellWithReuseIdentifier:

- (void)registerNib:forSupplementaryViewOfKind:withReuseIdentifier:

2）从队列中取出一个Cell,具体方法如下：

-(id)dequeueReusableCellWithReuseIdentifier:forIndexPath:

-(id)dequeueReusableSupplementaryViewOfKind:withReuseIdentifier:forIndexPath:

下面列出了常用的相关方法，开发者可以参考sdk的帮助文档，进行详细了解。

1）管理cell的高亮

collectionView:shouldHighlightItemAtIndexPath:

collectionView:didHighlightItemAtIndexPath:

collectionView:didUnhighlightItemAtIndexPath:

2）管理cell的选择

collectionView:shouldSelectItemAtIndexPath:

collectionView:didSelectItemAtIndexPath:

collectionView:shouldDeselectItemAtIndexPath:

collectionView:didDeselectItemAtIndexPath:

3）、获取指定cell

collectionView:cellForItemAtIndexPath:

4）、布局切换

- (void)setCollectionViewLayout:(UICollectionViewLayout *)layout animated:(BOOL)animated; // transition from one layout to another

- (void)setCollectionViewLayout:(UICollectionViewLayout *)layout animated:(BOOL)animated completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(7_0);

5）、长按cell，显示编辑菜单与UITableView不同，用户长按cell时，UICollectionView可以显示编辑菜单。这个编辑菜单可以用来剪切、复制和粘贴cell。不过，要显示这个编辑菜单需要满足下面几个条件：

· 代理对象必须实现下面三个方法： collectionView:shouldShowMenuForItemAtIndexPath:

collectionView:canPerformAction:forItemAtIndexPath:withSender:

collectionView:performAction:forItemAtIndexPath:withSender:

· 对于指定要编辑的cell，collectionView:shouldShowMenuForItemAtIndexPath:方法需要返回YES

· collectionView:canPerformAction:forItemAtIndexPath:withSender: 方法中，对于剪切、复制、粘贴三种action至少有一个返回YES。其实，编辑菜单是有很多种action的，但是对于UICollectionView来说，它仅仅支持的剪切、复制、粘贴三个，所以说这个代理方法至少支持这三种的一种。剪切、复制、粘贴的方法名是： cut: 、copy: 、paste:

当上面的条件都满足了，用户就可以长按cell显示出编辑菜单，然后选择对应的action，从而就会回调delegate的collectionView:performAction:forItemAtIndexPath:withSender: 方法去做对应的事情。

1.2.2 自定义 Flow Layout

Flow Layout可以定制的主要功能如下

n Item size

n Line spacing

n Inter cell spacing

n Scrolling direction

n Header and footer size

n Section Inset

Item size(每个item的大小)

1、可以进行全局配置,如下代码

@property(CGSize)itemSize