iOS UICollectionView基础教程

1,659 阅读3分钟
更多技术好文,请关注公众号 iOS学习社区

UICollectionView对象定义了集合视图内容的可见区域。该类从UIScrollView继承,可以根据需要包含一个很大的滚动区域。该类从布局对象接收布局信息,并基于布局信息帮助显示数据。

基本概念

layout

布局可以看作是UICollectionView的超能力,它用来决定集合视图中项的位置、大小和显示相关的属性。布局对象永远不会直接接触它管理的视图,因为它不是真的拥有这些视图。

注意:布局方向与滚动方向垂直,布局线是与滚动轴垂直的水平线。

Flow layout(流式布局)

流式布局指的是从顶部前沿开始,沿着布局线对Item依次进行布局。下面这张图形象的展示了流式布局过程:

流式布局会在移到下一条线之前安装尽可能多的集合项。

Line Spacing(行间距)

Line Spacing:指的是在同一个 section 中,相邻两行之间的间距。查看 UICollectionViewFlowLayout 的 API , 会发现里面有一个 minimumLineSpacing 属性,即最小行间距。如果itemSize的大小是一样的,那么真实的 LineSpacing 就minimumLineSpacing ,如果高度不一样,那么这个值回事上一行中Y轴值最大者和当前行中Y轴值最小者之间得高度,行中其它元素的LineSpacing 会大于 minimumLineSpacing 。

Inter-Item Spacing(项间距)

Inter-Item Spacing:指的是沿着布局方向,两个Item之间的距离。查看 UICollectionViewFlowLayout 的 API 同样会发现里面有一个 minimumInteritemSpacing 属性。真实的项间距会大于或等于我们设置的 minimumInteritemSpacing 的值,因为有可能有一行只能容纳下N个元素,还有M个单位的空间,这些剩余的空间会被平局分配到元素的间距,那么真实的InterItemSpacing值其实是(minimumInteritemSpacing + M / (N - 1))。

itemSize

itemSize 表示 item(cell) 的大小。如果要指定 cell 的大小,必须在collection view delegate中实现 collectionView:layout:sizeForItemAtIndexPath: 方法,从而根据NSIndexPath参数返回对应的 CGSize 大小。注意在同一水平线上的cell是居中对齐的。

sectionInset(section边距)

sectionInset表示内容区上下左右之间的内边距。

dataSource(数据源)

数据源对象是视图要显示的内容。可以是一个数据模型对象,或者是管理集合视图的视图控制器。数据源的唯一要求是提供集合视图需要的信息,例如有多少项,使用哪个视图来显示这些项。每个集合视图必须有一个数据源对象

delegate(代理)

代理负责显示内容,以及与内容交互相关的方面。尽管代理的主要工作是管理单元格的高亮和选择,但也可以通过扩展来提供额外的信息。例如,流布局扩展基本的代理行为来自定义布局度量,比如单元格的尺寸和它们之间的距离。代理对象是可选的(推荐使用)

开始使用 UICollectionView

  • 初始化 UICollectionView、注册cell、辅助视图等 。

  • 提供 sections 和 items 数量。

  • 配置单元格和辅助视图。

  • 根据需要调整视图大小,内间距等


关注公众号,get更多技术好文