本文原文

原文转自

1.1. Collection View

全家福:

UICollectionView, UITableView, NSCollectionView

n   不直接等效于NSCollectionView

n   也不替代UITableView----亲兄弟

为什么要使用Collection Views呢?

n  可以高度定制内容的展现

n  管理数据最佳的做法

n  即使是处理大量数据,也非常的高效

我们先来感性的认识一下Collection Views,下面这幅图就是用Collection Views实现的一个照片墙显示。

1.1.1 Collection View 元素

从上图中,我们可以看出Collection View的整体构成元素,共有三个要素,分别如下

n Cells(单元格)

n Supplementary Views(补充的view,相当于TableView的页眉和页脚)

n Decoration Views(装饰View,用于装饰整个CollectionView的)

我们可以分解一下这个照片墙,来描述上面的三个元素都对应什么内容

Cells如下图,即每一张图片

SupplementaryViews如下图右边白色的文字部分

Decoration Views如下图

最终,三个元素,就构成了照片墙,下面是元素构成图

1.1.2 数据模型与交互

数据模型(数据提供者UICollectionViewDataSource)

UICollectionViewDataSource是一个代理,主要用于向Collection View提供数据。

UICollectionViewDataSource的主要功能:

n  Section数目

n  Section里面有多少item

n  提供Cell和supplementary view设置

下面我们依次讲解这些功能。

1、numberOfSectionsInCollectionView:

下图中有多少个sections呢?

答案是2个。即我们在numberOfSectionsInCollectionView:方法中返回2即可。

2、collectionView:numberOfItemsInSection:

下图中section0中有多少个items呢?

答案是4个。即我们在collectionView:numberOfItemsInSection:方法中对应的section 0返回4即可。

3、collectionView:cellForItemAtIndexPath:

下图中section0 item 0位置处应该显示什么内容呢?

答案是使用方法collectionView:cellForItemAtIndexPath:返回一个cell,类似下图中的一个view。

4、Cell和View的重用

下面通过5个步骤,来演示Cell和View的重用

1)如下图,左边是Collection View,右边是Cell和View的重用队列,刚开始,左边的数据显示内容,右边的重用队列还没有数据。

2)再看下图,当用户显示出了Collection View下面的内容后,Collection View中之前的一些Cell和View就已经不再被显示了,这是,系统是如何处理呢?

3)看这里,系统会把不用的Cell和View添加到重用队列中,以备后面使用。

4)如何再次被使用呢,请看下图,当用户继续往下看内容的时候,系统就会提供队列中存在的Cell和View供使用。

5)最终使用效果如下图

5、iOS6中,Cell重用改善

在iOS6中,我们可以更加方便的使用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:

下面我们通过实际的代码,来演示具体如何进行Cell的重用

第一步:在collection view中进行设置(Cell类的注册)

// In collectionview setup...

[collectionView registerClass:[MyCellclass]

forCellWithReuseIdentifier:@”MY_CELL_ID”]

第二步:在下面的函数中,从队列中取出一个cell即可。并且再也不用对cell进行空值判断,以做额外的初始化操作。Cell的一切初始化工作都由系统为我们做好了。我们只需要对cell进行一些赋值等操作即可。

-(UICollectionView*)collectionView:(UICollectionView*)cv

cellForItemAtIndexPath:(NSIndexPath*)indexPath

{

MyCell *cell =[cv dequeueReusableCellWithReuseIdentifier:@”MY_CELL_ID”];

if (!cell) {

// Well, nothingreally. Never again

}

// Configure thecell's content

cell.imageView.image= ...

return cell;

}

交互(UICollectionViewDelegate)

UICollectionViewDelegate的主要功能:

n  控制cell的高亮

n  控制cell的选择

n  在cell上支持菜单操作,如下图

选择和高亮在iOS中都有所改进,高亮和flow的精确定位都非常好控制。

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

1) 管理cell的高亮

collectionView:shouldHighlightItemAtIndexPath:

collectionView:didHighlightItemAtIndexPath:

collectionView:didUnhighlightItemAtIndexPath:

这个方法collectionView:shouldHighlightItemAtIndexPath:的效果如下图所示:注意右边selected和highlighted的值。

这个方法collectionView:didHighlightItemAtIndexPath:的效果如下图所示:注意右边selected和highlighted的值。

2) 管理cell的选择

collectionView:shouldSelectItemAtIndexPath:

collectionView:didSelectItemAtIndexPath:

collectionView:shouldDeselectItemAtIndexPath:

collectionView:didDeselectItemAtIndexPath:

collectionView:shouldSelectItemAtIndexPath:的效果如下图

下面两个方法

collectionView:didUnhighlightItemAtIndexPath:

collectionView:didSelectItemAtIndexPath:的效果如下图所示:

1.1.3 内容的显示

UICollectionViewCell Styles

iOS6中没有预定义cell的Style

Collection View跟踪cell的选择和高亮

通过设置cell的highlight和selection属性(包含子视图)

如果进行了相关配置,这可以切换background view和selected background view

我们来按顺序看下面四幅图。开发者可以自行领悟规律。

下图是UICollectionView相关的类图,从图中我们可以看到

l UICollectionView继承自UIScrollView,

l 尊循UICollectionViewDelegate和UICollectionViewDataSource两个协议

l 管理UICollectionViewCell

图中貌似还缺点东西,什么呢?对了,就是缺少Layout。我们需要Layout对cell和其它的view进行布局。再看下图,图中多了UICollectionViewLayout和UICollectionViewFlowLayout。

下面我们对UICollectionViewLayout进行介绍

使用自己的layout(UICollectionViewLayout)

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

你需要计算如下view的layout属性

n  Cells

n  Supplementary views

n  Decoration views

系统也为我们定义了layout属性,即UICollectionViewLayoutAttributes,它主要包括如下内容:

n  位置

n  大小

n  透明度

n  ZIndex

n  转场

如下面的两个图是collection view的layout。

1.2 Flow Layout

1.2.1 核心概念

UICollectionViewFlowLayout是一个具体的layout对象,用来把item布局在网格中,并且可选页眉和页脚。在collection view中的items,可以从一行或者一列flow至下一行或者下一列(行或者列取决于滚动的方向)。每行都会根据情况,包含尽可能多的Cells。Cells可以是相同的尺寸,也可以是不同的尺寸。

下面是Flow Layout的一些特性

n 面向线性布局

n 可配置为网格

n 一组lines

n 具有页眉和页脚

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

下面我们来详细介绍这些可定制的功能。

这里需要对通过全局和delegate定制进行说明一下:

几乎所有的定制属性都是在UICollectionViewFlowLayout中,delegate实际上是collection view的delegate。UICollectionViewDelegateFlowLayout只是对UICollectionViewDelegate进行了一些扩展。

Item size(每个item的大小)

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

@property(CGSize)itemSize

layout.itemSize= CGSizeMake(30,20);

2、  也可以通过delegate对每一个item进行配置,如下代码

collectionView:layout:sizeForItemAt

IndexPath:

{

return...;

}

效果如下图所示

Line spacing(每行的间距)

1、  可以进行全局配置,如下属性

@property(CGFloat) minimumLineSpacing

2、  也可以通过delegate对每一个section进行配置,如下代码

ollectionView:layout:minimumLineSpacingForSectionAtIndex:

请按顺序看下面的三个图

Inter cell spacing(每行内部cell item的间距)

1、  可以进行全局配置,如下属性

@property(CGFloat) minimumInteritemSpacing

2、  也可以通过delegate对每一个section进行配置,如下代码

collectionView:layout:minimumInteritemSpacingForSectionAtIndex:

看看下面的两个图,蓝色是实际的item间距,绿色的是最小item间距。

Scrolling direction(滚动方向)

设置scrollDirection属性即可。两个值如下

UICollectionViewScrollDirectionVertical

UICollectionViewScrollDirectionHorizontal

主要作用:

n  定义了Flow Layout的基本行为

n  控制页眉页脚的维度

UICollectionViewScrollDirectionVertical效果如下图所示

UICollectionViewScrollDirectionHorizontal效果如下图所示

Header and footer size(页眉和页脚大小)

下面是页眉和页脚的一些解释。

n 也就是supplementary views

n 通过数据源的方法来提供内容,如下

-collectionView:viewForSupplementaryElementOfKind:atIndexPath:

n 两种常量(类型)

UICollectionElementKindSectionHeader

UICollectionElementKindSectionFooter

n 同样需要注册一个类并从队列中取出view

- registerClass:forSupplementaryViewOfKind:withReuseIdentifier:

-registerNib:forSupplementaryViewOfKind:withReuseIdentifier:

-dequeueReusableSupplementaryViewOfKind:withReuseIdentifier:forIndexPath:

页眉和页脚的size配置方式:

1)可以全局配置,如下属性

@property(CGSize) headerReferenceSize

@property(CGSize) footerReferenceSize

2)也可以通过delegate对每一个section进行配置,如下代码

collectionView:layout:referenceSizeForHeaderInSection:

collectionView:layout:referenceSizeForFooterInSection:

页眉页脚的属性如下图

当垂直的时候,需要设置Height,如下图

当水平的时候,需要设置Width,如下图

Section Inset

我们先通过两个图来看看Sections Insets是怎么回事

从上面的两个图中,我们大概知道了,Section Inset就是某个section中cell的边界范围。

SectionInset的配置方式同样有两种

1、  通过全局配置,如下属性

@propertyUIEdgeInsets sectionInset;

2、  也通过delegate对每一个section进行配置,如下函数

- (UIEdgeInsets)collectionView:layout:insetForSectionAtIndex:

DEMO

 
 

UICollectionView使用的更多相关文章

  1. 【iOS】Xcode8+Swift3 纯代码模式实现 UICollectionView

    开发环境 macOS Sierra 10.12.Xcode 8.0,如下图所示: 总体思路 1.建立空白的storyboard用于呈现列表 2.实现自定义单个单元格(继承自:UICollectionV ...

  2. 使用UICollectionView实现首页的滚动效果

    实现类似这样的效果,可以滚动大概有两种实现方案 1. 使用scrollview来实现 2. 使用UICollectionView来实现 第一种比较简单,而且相对于性能来说不太好,于是我们使用第二种方案 ...

  3. 用NSCalendar和UICollectionView自定义日历,并实现签到显示

    前一段时间因为工作需要实现了一个可以签到的日历,来记录一下实现的思路 效果如图:   这里的基本需求是: 1,显示用户某个月的签到情况,已经签到的日子打个圈,没有签到且在某个时间范围内的可以签到,其他 ...

  4. UICollectionView布局cell的三种方式

    UICollectionViewFlowLayout里面: // 方法一 - (void)prepareLayout{} // 方法二 - (nullable NSArray<__kindof ...

  5. 【Swift】iOS UICollectionView 计算 Cell 大小的陷阱

    前言 API 不熟悉导致的问题,想当然的去理解果然会出问题,这里记录一下 UICollectionView 使用问题. 声明  欢迎转载,但请保留文章原始出处:)  博客园:http://www.cn ...

  6. UICollectionLayout布局 —— UIKit之学习UICollectionView记录二《流水布局》

    重点知识 一. 加载collectionView注意事项 1.创建collectionView,有两种方式 :一种是xib和一种是纯代码:设置代理和数据源,注册cell,配置流水布局的属性,如上.下. ...

  7. UICollectionView中使用 UICollectionViewFlowLayout进行布局(模仿苹果相册)

    现在都知道,在初始化UICollectionView的时候,必须要传入一Layout对象,进行布局管理.这也是collectionview和tableview的明显区别,通过collectionvie ...

  8. UI第十九节——UICollectionView

    UICollectionView其实就是UITableView的升级版,在布局方面比UITableView更出色.下面,先看代码吧 #import "RootViewController.h ...

  9. iOS6新特征:UICollectionView介绍

    http://blog.csdn.net/eqera/article/details/8134986 1.1. Collection View 全家福: UICollectionView, UITab ...

  10. 【iOS】UITabView/UICollectionView 全选问题

    UITabView/UICollectionView 全选问题 SkySeraph July. 30th 2016 Email:skyseraph00@163.com 更多精彩请直接访问SkySera ...

随机推荐

  1. Azure SQL Database 时间点还原(Point in Time Restore)功能

      微软中国TechNet 7 Oct 2014 9:17 PM Comments 0 Likes 原文地址:http://blogs.technet.com/b/azuretw/archive/20 ...

  2. Force.com微信开发系列(二)用户消息处理

    Force.com是国际知名的云平台公司,成功配置好Force.com作为微信公开号的服务端后,接下来需要的任务是处理用户发送的消息.当普通微信用户向公众账号发消息时,微信服务器将POST消息的XML ...

  3. GridView总结二:GridView自带编辑删除更新

    GridView自带编辑删除更新逻辑很简单:操作完,重新绑定.总结总结,防止忘记... 效果图: 前台代码: <%@ Page Language="C#" AutoEvent ...

  4. IOS字典NSDictionary与NSMutableDictionary知识点

    字典中的元素是以键值对的形式存储的,键值对的键和值,都是任意的对象,但是键往往使用字符串,字典存储对象的地址没有顺序,字典的遍历分为:键的遍历和值的遍历,字典与数组的区别:数组讲究顺序,而字典可以快速 ...

  5. 【原】ios下比较完美的单例模式,已验证

    网上关于ios单例模式实现的帖子已经很多了,有很多版本,里面有对的也有不对的.我在使用过程中很难找到一个比较完美的方法,索性自己写一个吧,经过项目验证是比较合理的一个版本. static PRAuto ...

  6. 【原】UIView实现点击着重效果的解决方案

    我们知道,在IOS中UIButton UIControl都有一个默认的选中效果,即点中后会图标会变暗,移开后又恢复正常.如何让UIView UIImageView等这些普通的view也实现同样的效果呢 ...

  7. Grand Central Dispatch (GCD)

    Grand Central Dispatch (GCD) Reference Grand Central Dispatch (GCD) comprises language features, run ...

  8. js检测浏览器型号

    公司要求做内部统计,要求监控客服玩游戏使用的浏览器的型号,是火狐的.谷歌的.还是IE的等等. [code lang="javascript"] /**** * 目前识别范围 * M ...

  9. Linux套接字编程

    网络中的进程是如何通信的? 在网络中进程之间进行通信的时候,那么每个通信的进程必须知道它要和哪个计算机上的哪个进程通信.否则通信无从谈起!在本地可以通过进程PID来唯一标识一个进程,但是在网络中这是行 ...

  10. centos7.0 没有netstat 命令问题

    centos有时安装时,没有安装netstat命令: 直接如下就可搞定: yum install wget 运行  yum install net-tools  就OK了 netstat常用命令: n ...