UICollectionView--Flow Layout[转载]

本文转自iOS大神破船在devdiv论坛的帖子,原贴地址iOS6新特征:UICollectionView介绍.

1.1 Flow Layout


1.1.1 核心概念

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

  • 面向线性布局
  • 可配置为网格
  • 一组lines
  • 具有页眉和页脚

1.1.2 自定义Flow Layout

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

  • Item size
  • Line spacing
  • Inter cell spacing
  • Scrolling direction
  • Header and footer size
  • Section Inset

下面我们来详细介绍这些可定制的功能。
这里需要对通过全局和delegate定制进行说明一下:
几乎所有的定制属性都是在UICollectionViewFlowLayout中,delegate实际上是collection view的delegate。UICollectionViewDelegateFlowLayout只是对UICollectionViewDelegate进行了一些扩展。

Item size(每个item的大小)
  1. 可以进行全局配置,如下代码
@property (CGSize)itemSize
layout.itemSize = CGSizeMake(30,20);
  1. 也可以通过delegate对每一个item进行配置,如下代码
collectionView:layout:sizeForItemAtIndexPath:
{
        return ...;
}

效果如下图所示

item size
Line spacing(每行的间距)
  1. 可以进行全局配置,如下属性
@property (CGFloat) minimumLineSpacing
  1. 也可以通过delegate对每一个section进行配置,如下代码:
collectionView:layout:minimumLineSpacingForSectionAtIndex:

请按顺序看下面的三个图

最小行间距1
最小行间距2
最小行间距3

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

  1. 可以进行全局配置,如下属性
@property (CGFloat) minimum InteritemSpacing
  1. 也可以通过delegate对每一个section进行配置,如下代码
collectionView:layout:minimumInteritemSpacingForSectionAtIndex:

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

Inter cell spacing1
Inter cell spacing2

Scrolling direction(滚动方向)

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

UICollectionViewScrollDirectionVertical
UICollectionViewScrollDirectionHorizontal

主要作用:

  • 定义了Flow Layout的基本行为
  • 控制页眉页脚的维度

UICollectionViewScrollDirectionVertical效果如下图所示

UICollectionViewScrollDirectionVertical效果

UICollectionViewScrollDirectionHorizontal效果如下图所示

UICollectionViewScrollDirectionHorizontal效果

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

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

  • 也就是supplementary views
  • 通过数据源的方法来提供内容,如下
collectionView:viewForSupplementaryElementOfKind:atIndexPath:
  • 两种常量(类型)
UICollectionElementKindSectionHeader
UICollectionElementKindSectionFooter
  • 同样需要注册一个类并从队列中取出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,如下图

垂直时,需要设置Height

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

水平的,需要设置Width

Section Inset

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

Section Inset1
Section Inset2

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

Section Inset的配置方式同样有两种

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

 @property UIEdgeInsets sectionInset;

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

collectionView:layout:insetForSectionAtIndex:

1.1.3 Flow Layout总结

  • 非常强大
  • 许多内置的行为
  • 相对于自己写layout,可以节省很多时间
  • 具有很多子类

1.2 总结


  • 数据源驱动视图
  • 内置选择和高亮跟踪
  • Cells, Supplementary, and Decoration Views
  • 单独的一个类提供layout

1.3 更多


  • 细粒度,基于块的更新
  • 动画和重新布局
  • 滚动视图的继承
  • 自定义layouts
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,039评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,223评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,916评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,009评论 1 291
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,030评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,011评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,934评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,754评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,202评论 1 309
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,433评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,590评论 1 346
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,321评论 5 342
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,917评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,568评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,738评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,583评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,482评论 2 352

推荐阅读更多精彩内容